Interface Lab

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

导航与入口主叙事区视觉场与背景层内容/数据表面行动路径

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