Interface Lab

TOONHUBv1.0 Published

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