HeroBG — 24 Plug-and-play Hero Background Effects

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/herobg.com -->
<!-- Extracted: 2026-05-02T00:05:09.847Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "HeroBG — 24 Plug-and-play Hero Background Effects"
description: "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."
colors:
  primary: "#06b6d4"
  tertiary: "#22d3ee"
  surface: "#ffffff"
typography:
  display-lg:
    fontFamily: "Cabinet Grotesk"
    fontSize: "72px"
    fontWeight: "800"
    lineHeight: "68.4px"
    letterSpacing: "-1.8px"
  headline-lg:
    fontFamily: "Cabinet Grotesk"
    fontSize: "36px"
    fontWeight: "800"
    lineHeight: "40px"
    letterSpacing: "-0.9px"
  headline-md:
    fontFamily: "Cabinet Grotesk"
    fontSize: "16px"
    fontWeight: "600"
    lineHeight: "24px"
  body-md:
    fontFamily: "Cabinet Grotesk"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  md: "6px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#06b6d4"
    rounded: "6px"
    padding: "0px 12px"
    fontSize: "12px"
    fontWeight: "500"
  button-outline:
    rounded: "6px"
    padding: "0px 24px"
    fontSize: "16px"
    fontWeight: "500"
    borderWidth: "1px"
---

# HeroBG — 24 Plug-and-play Hero Background Effects — Design System

## Overview

HeroBG's design atmosphere embodies the archetypes of The Magician and The Creator, reflecting a brand that empowers developers with sophisticated, high-performance tools. Our aesthetic aligns with industry leaders like Vercel, Stripe, Tailwind CSS, and Framer, prioritizing a clean, functional, and technically advanced presentation. The visual language is direct and efficient, designed to convey cutting-edge technology and immediate value without superfluous ornamentation. This is a developer-first experience, where every design choice reinforces the brand's commitment to powerful, plug-and-play solutions.

The emotional register is one of confidence and precision. We avoid anything that suggests complexity, instability, or a steep learning curve. The design is not playful, whimsical, or overly decorative; it is not a consumer-facing brand relying on broad appeal. Instead, it speaks directly to the technical user, emphasizing clarity, performance, and a streamlined path to integration. The visual design is a testament to the product's efficacy: advanced capabilities delivered with elegant simplicity, reinforcing the one-time purchase value proposition through an aesthetic of enduring quality and technical mastery.

**Key characteristics:**

- Vibe — developer-first, technical, cutting-edge, direct, efficient, modern
- Archetypes — The Magician, The Creator
- Comparable to — Vercel, Stripe, Tailwind CSS, Framer
- Design era — flat-2.0
- Emotional tone — expert-empowering
- Target audience — 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.
- Visual energy — 7/10 (high-energy/bold)

## Colors

The color philosophy centers on a primary accent of `#06b6d4`, a vibrant cyan that signals innovation, clarity, and technical precision. This single, strong accent against a dominant `#ffffff` surface creates a high-contrast, modern aesthetic that is both clean and impactful. The limited palette reinforces the brand's directness and efficiency, avoiding visual clutter to emphasize the cutting-edge nature of the product. This choice communicates a focused, high-performance character, aligning with developer expectations for powerful, unadorned tools.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#06b6d4` | Dark Turquoise |
| accent / tertiary | `#22d3ee` | Deep Sky Blue |
| background | `#ffffff` | White |

## Typography

The type system leverages Cabinet Grotesk for primary headings and body text, providing a contemporary, geometric sans-serif that conveys technical sophistication and directness. Its clean lines and robust presence align with the brand's developer-first, no-nonsense ethos. Geist Mono is reserved for code snippets, technical specifications, and elements requiring precise alignment, reinforcing the cutting-edge and technical aspects of HeroBG. The hierarchy is clear and functional, prioritizing readability and information density, ensuring that technical details are communicated with precision and authority.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Cabinet Grotesk | body | self-hosted | 400, 500 |
| Cabinet Grotesk | heading | self-hosted | 600, 800 |
| Geist Mono | mono | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Cabinet Grotesk | 72px | 800 | 68.4px | -1.8px |
| Heading 2 | Cabinet Grotesk | 36px | 800 | 40px | -0.9px |
| Heading 3 | Cabinet Grotesk | 16px | 600 | 24px | — |
| Body | Cabinet Grotesk | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px
- Monospace — Geist Mono

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `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` |

## Shapes

Border-radius scale:

- `md` — 6px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#06b6d4`
- Radius — `6px`
- Padding — `0px 12px`
- Font size — `12px`
- Font weight — `500`
- Sample copy — "Buy $79"

**Outline**

- Radius — `6px`
- Padding — `0px 24px`
- Font size — `16px`
- Font weight — `500`
- Sample copy — "Buy — $79 lifetime"

## Do's and Don'ts

### Do

- 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).

### Don't

- 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*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 4/10 | formal |
| Playful ↔ Serious | 8/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 7/10 | irreverent |
| Technical ↔ Accessible | 3/10 | technical |

### Copywriting style

- Avg. sentence length — 10 words
- Vocabulary — advanced
- Jargon — heavy
- CTA style — direct, action-oriented, and price-focused
- Rhetorical devices — repetition

### Sample copy

> 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.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | svg | [link](https://extractvibe.com/api/assets/brands/herobg.com/logo-0.svg) | 62% |

## Sources

- Official brand guidelines — https://herobg.com/brand
- Live brand page — https://extractvibe.com/brand/herobg.com
- Raw JSON — https://extractvibe.com/api/brand/herobg.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/herobg.com/design.md
- Extracted — 2026-05-02T00:05:09.847Z
- Generator — ExtractVibe vv1
- Quality score — 100/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md