Hatch — Design & Branding System

Modern. Minimal. Elegant. Source of truth for every visual decision across the product. EN + 中文 parity enforced.

1. Brand Principles

If a design decision feels loud, it's wrong. If it feels slow, it's wrong. If it feels clear, keep it.

2. Identity

2.1 Wordmark

Hatch — set in Inter 600, -0.02em letter-spacing, sentence case. Never ALL CAPS except in single-letter tag labels (EN, 中).

2.2 Mascot

🥚 — one emoji, used sparingly as a state indicator. Never as decoration.

2.3 Tagline

• EN: Every meme deserves to hatch.
• 中: 让每个 meme 顺利孵化。

Always paired when hero-adjacent. Subtitle lines keep parity.

3. Color

Color tokens live in apps/web/src/styles/globals.css as HSL CSS variables and in apps/web/tailwind.config.ts under hatch.*.

3.1 Core palette

3.2 Brand accents

3.3 Semantic score bands

Never stack bands with the primary yolk CTA in the same card — it muddles the signal.

3.4 Rules

• One accent at a time. Yolk OR crack in any viewport, not both.
• Contrast ≥ 4.5:1 for body text; ≥ 3:1 for UI chrome. Audited via axe-core per Sprint A.3 gate.
• No raw hex in components. Always the token.
• No gradients except the subtle score.* chip fills. No glows. No glassmorphism.

4. Typography

4.1 Family

• Sans: Inter (variable, self-hosted via next/font/google). --font-sans.
• Mono: JetBrains Mono for addresses, hashes, code.

CJK fallback: system fonts — "PingFang SC", "Microsoft YaHei", sans-serif — applied automatically for 中文.

4.2 Type scale (rem / line-height / tracking)

4.3 Weight

• 400 body
• 500 emphasized inline, buttons
• 600 wordmark, H1-H3
• 700 reserved for numeric display (scores, amounts)

4.4 Rules

• No italics for emphasis — use weight instead.
• Balance headings with text-balance. Always.
• Tabular nums for any number that appears in a scanning column: font-feature-settings: 'tnum'.
• Bilingual pairing: when a hero subtitle has EN + 中, the 中 line sits at the same size and 80% opacity.

5. Spacing & Layout

5.1 Scale

Tailwind's 4-px scale. Common steps: 2, 3, 4, 6, 8, 12, 16, 24. Never arbitrary pixel values in components.

5.2 Rhythm

• Section vertical rhythm: py-16 md:py-24 baseline; py-20 md:py-32 for hero.
• Card padding: p-6 compact, p-8 comfortable.
• Line length: max-w-prose (~65ch) for body copy; max-w-4xl for hero.

5.3 Grid

• Container: container mx-auto, centered, 1rem gutter, capped at 1400px on 2xl.
• Gutter between grid items: gap-4 dense, gap-6 standard, gap-8 airy.

5.4 Elevation

One-step depth system. No multi-layer shadows.

No inner shadows. No colored shadows. Dark mode: drop shadow opacity by 50%.

5.5 Radius

• --radius: 0.75rem (12px) — cards, buttons, inputs.
• rounded-full — chips, avatars, live dots.
• Never mix radii on adjacent surfaces.

6. Motion

6.1 Tokens

--motion-fast:    120ms;
--motion-base:    200ms;
--motion-slow:    320ms;
--ease-standard:  cubic-bezier(0.2, 0, 0, 1);
--ease-emphasis:  cubic-bezier(0.2, 0, 0, 1.2);

6.2 Rules

• Hover/focus transitions: --motion-fast.
• Layout transitions (sheet, modal, accordion): --motion-base.
• Entrance animations (once per session): --motion-slow with --ease-emphasis.
• Respect prefers-reduced-motion: reduce — drop all non-essential motion.
• Never animate color on scroll. Never parallax. No marquee.

6.3 The "hatch" moment

When a token graduates, play one 600ms sequence: scale 0.98→1.02→1, yolk ring pulse. Once. Ever.

7. Components

All components live in packages/ui/src/. Primitives wrap Radix; compositions are bespoke. No raw <div> for buttons.

7.1 Button

• primary — yolk fill, black text, font-medium, rounded-md, px-5 py-2.5.
• secondary — border + hover:bg-accent.
• ghost — no border, hover:bg-accent.
• destructive — destructive fill, confirmation required.
• link — foreground text, underline on hover.

States: focus-visible ring = ring-2 ring-ring ring-offset-2 ring-offset-background. No outline: none without replacement.

7.2 Card

bg-background border border-border/60 rounded-lg shadow-xs

Hover: shadow-sm transition-shadow. Card title = title token.

7.3 Chip / Tag

• Height h-6, px-2, rounded-full, caption type, border border-border/60.
• Live-state chip: leading dot h-1.5 w-1.5 rounded-full bg-hatch-yolk animate-pulse (reduced-motion: no pulse).

7.4 Input

• Height h-10, rounded-md, border-border, focus-visible:ring-2 ring-ring.
• Error state: border-destructive + helper text text-destructive.
• Never a red background — only border + text.

7.5 Score display

• Numeric score in 700 tabular-nums, display-lg size.
• Band chip inline-right.
• "Why?" link — ghost button, caption size. Opens explainability modal (Sprint C.4).

7.6 Toast

Top-right, shadow-md, auto-dismiss 6s success / never error. One at a time — collapse queue.

8. Iconography

• lucide-react is the only icon set.
• Stroke 1.5, size by context: 16 inline, 20 buttons, 24 headers.
• currentColor fill — never baked-in color.
• Never mix icon sets.

9. Imagery & Illustration

• Launch-specific: Claude Vision-scored creator images shown at native aspect, rounded-lg, 1px border.
• Marketing: abstract, low-contrast grain textures only. No stock photography of people. No 3D renders of coins.
• The only brand illustration is the 🥚 → 🐣 → 🐥 lifecycle, used once per surface max.

10. Content & Voice

10.1 Tone

• Plain > clever. "Verified buyer" not "Chad-tier degen."
• Numbers > adjectives. "Graduation rate: 38%" not "Strong graduation."
• Active > passive. "Hatch scores your token" not "Your token is scored by Hatch."

10.2 Case

• Sentence case everywhere (buttons, headings, nav). Launch a token not Launch A Token.
• ALL CAPS only for 2-letter locale tags and on-chain opcodes in docs.

10.3 Numbers

• Thousands separator always: 1,234.
• Percents: 38% not 38 percent.
• BNB amounts: 4 decimal places max in UI, full in receipts.
• Addresses: 0x1234…abcd truncation in UI, full on hover + copy-button.

10.4 Bilingual rules

• EN primary in keys; 中 lives in messages/zh.json with full parity.
• Same key → same meaning. No CN-only copy hacks.
• Numbers + addresses are locale-independent.
• Punctuation: CJK full-width ，。！？ in zh; ASCII in en.

11. Accessibility

• WCAG 2.1 AA baseline; AAA for on-chain irreversible actions.
• Every interactive element has a visible focus ring.
• Every form field has an associated label (visible or sr-only).
• Min tap target: 44×44 on mobile.
• Landmark roles on header/nav/main/footer.
• Live regions for score updates, toast announcements.
• Color is never the sole signal — pair with icon + text.

Audit in CI via axe-core (Sprint A.3 gate).

12. Dark mode

Not a theme — a first-class surface. Every component is designed in both.

Rules:

• Yolk stays yolk in dark mode (same HSL).
• Borders get more opacity (border/60 → border/80).
• Shadows lose 50% opacity.
• No pure #000 background — use 240 10% 4%.

13. OG & social

• OG image template: 1200×630, yolk background, wordmark top-left, headline 64/72, no emoji.
• Twitter card = summary_large_image.
• Each locale gets its own OG render. No "English OG on Chinese page."

14. Do / Don't cheatsheet

DO

• One clear CTA per viewport.
• Numbers in tabular-nums.
• text-balance on headings.
• Border-first over shadow-first.
• Respect reduced-motion.

DON'T

• Gradients across full sections.
• Rocket, moon, fire emojis.
• Multiple accent colors in one card.
• Custom pixel values outside the spacing scale.
• Italics for emphasis.

15. Evolution

Design system is versioned. Every token change is a PR with:

1. Before / after screenshot.
2. Contrast audit diff.
3. RTL / CJK spot check.
4. packages/ui Storybook (once stood up in Sprint F.*) regenerated.

Tag: design-vX.Y.Z. Current: v1.0.0.