{"meta":{"url":"https://seangeng.com/","domain":"seangeng.com","extractedAt":"2026-05-30T01:42:56.130Z","schemaVersion":"v1","durationMs":11485,"extractionDepth":1,"qualityScore":100},"identity":{"brandName":"Sean Geng — learnings, snippets & frontend components","description":"Frontend components, rendering experiments, and short writeups by Sean Geng — co-founder & CTO at B3. The good parts, left out in the open.","archetypes":[{"name":"The Creator","confidence":0.85},{"name":"The Sage","confidence":0.75}]},"logos":[{"type":"favicon","originalUrl":"https://seangeng.com/avatar.png","url":"https://extractvibe.com/api/assets/brands/seangeng.com/logo-1.png","format":"png","confidence":0.74,"source":"favicon"}],"colors":{"lightMode":{"primary":{"hex":"#0f0f0f","rgb":{"r":15,"g":15,"b":15},"name":"Near-Black","role":"primary","source":"computed: button-sample-1 background-color","confidence":0.8},"background":{"hex":"#ffffff","rgb":{"r":255,"g":255,"b":255},"name":"White","role":"background","source":"inferred: default white (body transparent)","confidence":0.5},"muted":{"hex":"#8f8f8f","rgb":{"r":143,"g":143,"b":143},"name":"Gray","role":"muted","source":"inferred: gray in palette","confidence":0.4},"accent":{"hex":"#3c83f6","rgb":{"r":60,"g":131,"b":246},"name":"Dodger Blue","role":"accent","source":"inferred: saturated non-primary","confidence":0.4}},"darkMode":{"background":{"hex":"#0a0a0a","rgb":{"r":10,"g":10,"b":10},"name":"Black","role":"background","source":"computed: html background-color","confidence":0.85},"text":{"hex":"#f5f5f5","rgb":{"r":245,"g":245,"b":245},"name":"White Smoke","role":"text","source":"computed: body color","confidence":0.75}},"rawPalette":[{"hex":"#0a0a0a","rgb":{"r":10,"g":10,"b":10},"source":"meta: theme-color","name":"Black"},{"hex":"#f5f5f5","rgb":{"r":245,"g":245,"b":245},"source":"computed: a","name":"White Smoke"},{"hex":"#0f0f0f","rgb":{"r":15,"g":15,"b":15},"source":"computed: button-sample-13","name":"Near-Black"},{"hex":"#8f8f8f","rgb":{"r":143,"g":143,"b":143},"source":"computed: text-sample-0","name":"Gray"},{"hex":"#3c83f6","rgb":{"r":60,"g":131,"b":246},"source":"computed: text-sample-2","name":"Dodger Blue"},{"hex":"#ffffff","rgb":{"r":255,"g":255,"b":255},"source":"inferred","name":"White"}]},"typography":{"families":[{"name":"Inter","role":"body","source":"google-fonts","weights":[400,500],"fallbackStack":"ui-sans-serif, system-ui, sans-serif","confidence":0.95},{"name":"Inter","role":"heading","source":"google-fonts","weights":[500,600],"fallbackStack":"ui-sans-serif, system-ui, sans-serif","confidence":0.95},{"name":"JetBrains Mono","role":"body","source":"google-fonts","weights":[400],"fallbackStack":"ui-monospace, SFMono-Regular, monospace","confidence":0.85}],"scale":{"body":{"fontFamily":"Inter","fontSize":"16px","fontWeight":400,"lineHeight":"24px"},"h1":{"fontFamily":"Inter","fontSize":"48px","fontWeight":600,"lineHeight":"50.4px","letterSpacing":"-1.2px"},"h2":{"fontFamily":"Inter","fontSize":"24px","fontWeight":600,"lineHeight":"32px","letterSpacing":"-0.6px"},"h3":{"fontFamily":"Inter","fontSize":"16px","fontWeight":500,"lineHeight":"24px"}},"conventions":{"headingCase":"sentence-case","bodyLineHeight":"24px"}},"spacing":{"baseUnit":"2px","borderRadius":{"small":"8px","large":"12px"}},"assets":[],"voice":{"toneSpectrum":{"formalCasual":7,"playfulSerious":6,"enthusiasticMatterOfFact":7,"respectfulIrreverent":5,"technicalAccessible":4},"copywritingStyle":{"avgSentenceLength":15,"vocabularyComplexity":"moderate","jargonUsage":"some","rhetoricalDevices":[],"ctaStyle":"direct action verbs and descriptive labels"},"contentPatterns":{"headingCase":"sentence-case","emojiUsage":"none","exclamationFrequency":"rare","questionUsageInHeadings":false,"bulletPreference":false},"sampleCopy":["I sweat the small details in software, and leave the good parts (components, free tools & writeups) out in the open here.","Drop an image and pixelate it — drawn tiny then scaled back up with smoothing off, so it renders as crisp blocks.","A graduated blur — stacked backdrop-filter layers, each masked to an overlapping gradient band, so the blur ramps smoothly instead of stepping.","A canvas grid of pixels that flicker random opacities inside a sine-pulsing circle — a breathing field of static.","A glowy CTA with orbiting stars, a conic spark sweep, and a 3D star ring built on transform-style: preserve-3d."]},"rules":{"dos":["Utilize Inter font for all body and heading text, with weights 400 and 500 for body, and 500 and 600 for headings. JetBrains Mono should be reserved for code snippets or specific technical body text.","Maintain a clean, high-contrast color scheme: #0f0f0f (dark text) on #ffffff (light background) for light mode, and #f5f5f5 (light text) on #0a0a0a (dark background) for dark mode.","Employ #3c83f6 as the primary accent color for interactive elements, links, and highlights, ensuring it stands out against both light and dark backgrounds.","Apply sentence-case for all headings, avoiding title case or all caps to maintain a measured and accessible tone.","Design buttons with rounded corners, using 8px for smaller elements (e.g., 'About me') and 12px for larger, more descriptive buttons (e.g., 'Image Pixelator').","Implement subtle background gradients for visual interest, specifically a radial-gradient(closest-side, rgba(60, 131, 246, 0.25), rgba(0, 0, 0, 0)) for ambient glow effects and linear-gradient(to right, rgba(255, 255, 255, 0.024) 1px, rgba(0, 0, 0, 0) 1px) for subtle vertical line dividers.","Ensure body text has a line-height of 24px for optimal readability, particularly when using Inter 400 or 500.","Craft calls to action using direct action verbs and descriptive labels, providing clear expectations of the outcome, such as 'Drop an image and pixelate it'."],"donts":["Avoid using emojis in any copy or content; the brand maintains a serious and professional demeanor.","Do not use exclamations; the brand's tone is matter-of-fact and confident without needing excessive emphasis.","Refrain from using any shadows other than the single, subtle, and transparent shadow found (rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0), implying a preference for flat design or extremely subtle depth).","Do not deviate from the established border radii of 8px and 12px; avoid sharp corners or overly pill-shaped elements.","Avoid overly playful or casual language; while accessible, the brand maintains a technical and informative voice.","Do not introduce additional font families beyond Inter and JetBrains Mono; maintain typographic consistency across all platforms.","Do not use vibrant or multi-color palettes; stick to the defined primary, accent, and background colors for a cohesive and understated look."],"source":"inferred"},"vibe":{"summary":"Sean Geng's brand exudes a refined, technical, and slightly experimental vibe, offering transparent insights into frontend development with a focus on quality and detail. It feels like a meticulously curated workshop, sharing 'the good parts' with a discerning audience.","tags":["technical","curated","experimental","frontend-focused","transparent","meticulous","developer-centric"],"visualEnergy":4,"designEra":"contemporary-minimal","comparableBrands":["Vercel","Stripe (developer docs)","Linear","Figma (developer resources)"],"emotionalTone":"informative-precise","targetAudienceInferred":"Frontend developers, software engineers, technical co-founders, and individuals interested in advanced UI/UX implementation and rendering techniques.","confidence":0.95},"officialGuidelines":{"discoveredUrl":"https://www.reddit.com/r/branding/comments/1syquus/are_there_any_standards_to_create_a_brand_style/","hasOfficialKit":true,"guidelineRules":[]},"buttons":{"styles":[{"variant":"outline","textColor":"#f5f5f5","borderRadius":"8px","borderColor":"#242424","borderWidth":"1px","padding":"0px 20px","fontSize":"14px","fontWeight":500,"sampleText":"About me","confidence":0.7},{"variant":"secondary","backgroundColor":"#0f0f0f","textColor":"#f5f5f5","borderRadius":"12px","borderColor":"#242424","borderWidth":"1px","padding":"0px","fontSize":"16px","fontWeight":400,"sampleText":"Image PixelatornewDrop an image and pixelate it — drawn tiny then scaled back up","confidence":0.5}]},"effects":{"shadows":[{"value":"rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.35) 0px 1px 2px 0px, rgba(60, 131, 246, 0.6) 0px 6px 18px -6px","source":"[class*=\"shadow\"]","context":"element"}],"gradients":[{"value":"radial-gradient(closest-side, rgba(60, 131, 246, 0.25), rgba(0, 0, 0, 0))","source":"[class*=\"gradient\"]","context":"[class*=\"gradient\"]"},{"value":"linear-gradient(to right, rgba(255, 255, 255, 0.024) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgba(255, 255, 255, 0.024) 1px, rgba(0, 0, 0, 0) 1px)","source":"[class*=\"bg-\"]","context":"[class*=\"bg-\"]"}]},"designAssets":[{"src":"https://seangeng.com/avatar.png","alt":"Sean Geng","width":500,"height":500,"format":"png","context":"nav"},{"src":"https://seangeng.com/sean-avatar-full.png","alt":"Sean Geng","width":500,"height":500,"format":"png","context":"body"},{"src":"https://seangeng.com/shots/pixelator.png","alt":"Image Pixelator preview","width":1280,"height":1000,"format":"png","context":"body"},{"src":"https://seangeng.com/shots/progressive-blur.png","alt":"Progressive Blur preview","width":1280,"height":900,"format":"png","context":"body"},{"src":"https://seangeng.com/shots/pixel-grid.png","alt":"Dynamic Pixel Grid preview","width":1280,"height":900,"format":"png","context":"body"},{"src":"https://seangeng.com/shots/glass-button.png","alt":"Liquid Glass Button preview","width":1280,"height":900,"format":"png","context":"body"},{"src":"https://seangeng.com/shots/galaxy-button.png","alt":"Galaxy Button preview","width":1280,"height":900,"format":"png","context":"body"},{"src":"https://seangeng.com/shots/neu-toggle.png","alt":"Neumorphic Toggle preview","width":1280,"height":900,"format":"png","context":"body"}],"ogImage":"https://seangeng.com/avatar.png","iconLibrary":{"name":"Lucide","confidence":0.55,"sampleIcons":["arrow-right"],"source":"class-pattern"}}