TOONHUBv1.0 Published
0
TOONHUB Design SystemBuild a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using `lucide-react` for icons. The component is a character-figurine carousel called "TOONHUB". **Fonts (load in `index.html` head):** ```html <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> ``` Body font: `'Inter', sans-serif`. Display font (huge ghost text + bottom-right link): `'Anton', sans-serif`. **Image data (4 items, exact URLs and colors):** ```ts const IMAGES = [ { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/1.02464a56.png', bg: '#F4845F', panel: '#F79B7F' }, { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4d...
Typography
Heading systemInter / 22px / 600 / - / -Body systemInter / 16px / 400 / - / -Inter
LettersAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk LlNumbers01 02 03 04 05 06 07 08 09
Colors
Primary#F4845F

40% usage signal

Secondary#F79B7F

20% usage signal

Tertiary#6BBF7A

20% usage signal

Neutral#85CC92

20% usage signal

Layout
LayoutLayeredWidthFull BleedGridMinimalFramingOpen
Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path
Spacing
16px12pxTitle block

Description copy reflects measured rhythm, icon offset, and CTA spacing.

12px16px20px
Icons
LinearPreserve the specified aspect ratios, circular buttons, icon strokes, and responsive sizing.
Elevation & Depth

Follow the specified z-index, grain overlay, blur, opacity, and depth layering.

Blur / backdrop filterBlur / backdrop filter
Surface sampleOpen
SurfaceOpenBorder1px solid currentColor / low opacityShadow0 18px 50px rgba(15,23,42,.14)Blur0px
Shapes

Preserve the specified aspect ratios, circular buttons, icon strokes, and responsive sizing.

999pxradius-1
Card surfaceInput fieldStatus pill
Do's and Don'ts

Use these constraints as design lint rules for future generations.

Dokeep the prompt as authoritative. Do not: replace exact URLs, colors, copy, or timing with placeholders.
Don't