LunarCrush Design System

The single source of truth for LunarCrush brand and product UI.

Two visual languages, one brand:

• MARKETING — purple/cyan accents on deep navy. Figtree (UI) + Butler (display serif). Default for landing pages, dashboards, investor reports, blog companions, CEO/internal tools.
• PRODUCT — teal/purple accents on near-black. Fakt (body) + Space Grotesk (numerics). For the LunarCrush mobile/web app.

Files

Path	Purpose
DESIGN.md	The full token spec — colors, typography, radii, shadows, spacing, components
examples/	Reference implementations showing the system applied to real surfaces

Tooling

Validated with @google/design.md:

npm install -g @google/design.md
design.md lint DESIGN.md      # ✅ 0 errors, 0 warnings
design.md spec                # show full DESIGN.md format spec
design.md diff old.md new.md  # diff two versions

Quick reference

Marketing palette (the default):

• Canvas #0F1A2A · Card #0E1120 · Surface #1A1D2E
• Primary #6E3CF5 (purple) with glow 0 0 40px rgba(147,109,248,0.27)
• Body text #A0A5B8 · Muted #6B7090 · Heading #FFFFFF
• Gradient signature: linear-gradient(90deg, #6E3CF5, #6EC6F8) — Butler serif only, hero line 2

Type scale: Figtree 14/17/20/24/48 + Butler 56/72 for hero moments.

Radii: 8 / 10 / 12 / 16 / full. Cards default to 16 (rounded-2xl).

Hard rules

• Dark always (never light mode unless explicit)
• Never pure black (#000) — use canvas #0F1A2A
• Never pure white on body — body is #A0A5B8
• One purple moment per screen (CTA glow OR gradient headline, not both)
• Butler serif is for emotional moments only — never UI labels, body, or buttons
• Teal #13F3C9 is product-only — never marketing surfaces

Fonts (CDN)

<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=butler@400,700&display=swap" rel="stylesheet">

License

Brand assets © LunarCrush. Tokens and structure may be referenced for interop (Tailwind/DTCG export, design tooling).