{"meta":{"url":"https://herobg.com/","domain":"herobg.com","extractedAt":"2026-05-02T00:05:09.847Z","schemaVersion":"v1","durationMs":74562,"extractionDepth":1,"qualityScore":100},"identity":{"brandName":"HeroBG — 24 Plug-and-play Hero Background Effects","description":"WebGL, Canvas, and AI-driven hero backgrounds. One $79 purchase, lifetime access. No subscriptions.","archetypes":[{"name":"The Magician","confidence":0.8},{"name":"The Creator","confidence":0.7}]},"logos":[{"type":"favicon","originalUrl":"https://herobg.com/favicon.svg","url":"https://extractvibe.com/api/assets/brands/herobg.com/logo-0.svg","format":"svg","confidence":0.62,"source":"favicon"}],"colors":{"lightMode":{"primary":{"hex":"#06b6d4","rgb":{"r":6,"g":182,"b":212},"name":"Dark Turquoise","role":"primary","source":"computed: button-sample-0 background-color","confidence":0.9457547169811321},"background":{"hex":"#ffffff","rgb":{"r":255,"g":255,"b":255},"name":"White","role":"background","source":"inferred: default white (body transparent)","confidence":0.5},"accent":{"hex":"#22d3ee","rgb":{"r":34,"g":211,"b":238},"name":"Deep Sky Blue","role":"accent","source":"inferred: saturated non-primary","confidence":0.4}},"rawPalette":[{"hex":"#06b6d4","rgb":{"r":6,"g":182,"b":212},"source":"computed: button-sample-3","name":"Dark Turquoise"},{"hex":"#22d3ee","rgb":{"r":34,"g":211,"b":238},"source":"computed: text-sample-4","name":"Deep Sky Blue"},{"hex":"#ffffff","rgb":{"r":255,"g":255,"b":255},"source":"inferred","name":"White"},{"hex":"#0a0a0a","rgb":{"r":10,"g":10,"b":10},"source":"meta: theme-color","name":"Black"}]},"typography":{"families":[{"name":"Cabinet Grotesk","role":"body","source":"self-hosted","weights":[400,500],"fallbackStack":"Inter, ui-sans-serif, system-ui, sans-serif","confidence":0.95},{"name":"Cabinet Grotesk","role":"heading","source":"self-hosted","weights":[600,800],"fallbackStack":"Inter, ui-sans-serif, system-ui, sans-serif","confidence":0.95},{"name":"Geist Mono","role":"mono","source":"self-hosted","weights":[400],"fallbackStack":"ui-monospace, SF Mono, Menlo, monospace","confidence":0.85}],"scale":{"body":{"fontFamily":"Cabinet Grotesk","fontSize":"16px","fontWeight":400,"lineHeight":"24px"},"h1":{"fontFamily":"Cabinet Grotesk","fontSize":"72px","fontWeight":800,"lineHeight":"68.4px","letterSpacing":"-1.8px"},"h2":{"fontFamily":"Cabinet Grotesk","fontSize":"36px","fontWeight":800,"lineHeight":"40px","letterSpacing":"-0.9px"},"h3":{"fontFamily":"Cabinet Grotesk","fontSize":"16px","fontWeight":600,"lineHeight":"24px"}},"conventions":{"headingCase":"sentence-case","bodyLineHeight":"24px","codeFont":"Geist Mono"}},"spacing":{"baseUnit":"2px","borderRadius":{"medium":"6px"}},"assets":[],"voice":{"toneSpectrum":{"formalCasual":4,"playfulSerious":8,"enthusiasticMatterOfFact":7,"respectfulIrreverent":7,"technicalAccessible":3},"copywritingStyle":{"avgSentenceLength":10,"vocabularyComplexity":"advanced","jargonUsage":"heavy","rhetoricalDevices":["repetition"],"ctaStyle":"direct, action-oriented, and price-focused"},"contentPatterns":{"headingCase":"sentence-case","emojiUsage":"none","exclamationFrequency":"none","questionUsageInHeadings":false,"bulletPreference":false},"sampleCopy":["Depth-aware hero backgrounds from any photo.","Drop in any image. We run depth-anything-v2 on Replicate, cache the result, and render a chromatic-split ASCII scanner in real time. One drop-in React component. Lifetime access.","A real depth-aware composition pipeline — image upload → AI depth model → cached → cell-grid sampler → chromatic-split renderer — is not a weekend project.","DPR-capped, FPS-capped, full prefers-reduced-motion respect, graceful fallback.","Shipped one at a time, to the same quality bar."]},"rules":{"dos":["Use Cabinet Grotesk for all body text at weights 400 or 500, with a line-height of 24px.","Employ Cabinet Grotesk for all headings, utilizing weights 600 or 800, always in sentence-case.","Render all code snippets and monospaced text using Geist Mono at weight 400.","Utilize the primary color #06b6d4 for key interactive elements and primary call-to-action buttons.","Apply a medium border-radius of 6px consistently to all interactive elements, such as buttons and input fields.","Design primary call-to-action buttons with a background of #06b6d4, white text, 0px 12px padding, and a 6px border-radius.","Structure content with a base spacing unit of 2px for consistent visual rhythm and hierarchy.","Maintain a clean, flat aesthetic with minimal use of shadows, specifically only one subtle shadow style (rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0) on elements)."],"donts":["Avoid using any gradients; the brand's visual language is strictly flat and solid-colored.","Do not use title case or all caps for headings; all headings must adhere to sentence-case.","Refrain from incorporating emojis or exclamation marks in any marketing or product copy.","Do not use serif fonts; the brand's typography is exclusively sans-serif and monospaced.","Avoid complex, multi-layered shadows; stick to the single, subtle shadow style detected.","Do not introduce any additional accent colors beyond #22d3ee; maintain the limited, focused color palette.","Do not use subscriptions; the brand emphasizes a one-time purchase and lifetime access model in its messaging.","Avoid overly casual or informal language; maintain a tone that is serious, enthusiastic, and technically proficient."],"source":"inferred"},"vibe":{"summary":"HeroBG projects a vibe of sophisticated technical prowess and direct value. It's a brand for developers who appreciate cutting-edge technology presented with a no-nonsense, high-performance aesthetic, emphasizing a one-time purchase for advanced tools.","tags":["developer-first","technical","cutting-edge","direct","efficient","modern","value-driven"],"visualEnergy":7,"designEra":"flat-2.0","comparableBrands":["Vercel","Stripe","Tailwind CSS","Framer","Linear"],"emotionalTone":"expert-empowering","targetAudienceInferred":"Web developers, front-end engineers, and technical designers who are comfortable with advanced concepts (WebGL, Canvas, AI) and seek high-quality, plug-and-play solutions for hero sections, valuing lifetime access over subscriptions.","confidence":0.95},"officialGuidelines":{"discoveredUrl":"https://herobg.com/brand","hasOfficialKit":true,"guidelineRules":[]},"buttons":{"styles":[{"variant":"primary","backgroundColor":"#06b6d4","borderRadius":"6px","padding":"0px 12px","fontSize":"12px","fontWeight":500,"sampleText":"Buy $79","confidence":0.95},{"variant":"outline","borderRadius":"6px","borderWidth":"1px","padding":"0px 24px","fontSize":"16px","fontWeight":500,"sampleText":"Buy — $79 lifetime","confidence":0.7}]},"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(34, 211, 238, 0.7) 0px 0px 24px -4px","source":"[class*=\"shadow\"]","context":"element"}],"gradients":[]},"designAssets":[],"ogImage":"https://herobg.com/og/landing","iconLibrary":{"name":"Lucide","confidence":0.95,"sampleIcons":["github","arrow-right","check","layers","sparkles","zap","code-xml"],"source":"class-pattern"}}