BACK TO LAB
CAPABILITY DEMO — DESIGN SYSTEMS

THE SPECIMEN

Every pixel is intentional. Every interaction is choreographed.
Every detail is the product.

SCROLL TO INSPECT
TYPE SCALE

Typography

A modular scale rooted in 1.333 (perfect fourth). Two typefaces: Space Grotesk for display, Inter for body.

Display72Aa
H148Aa
H236Aa
H324Aa
Body18Aa
Small14Aa
Caption11Aa
Overline9Aa
SPACING TOKENS

Spacing

A 4px base unit. Every margin, padding, and gap is a multiple. No magic numbers.

4px
8px
12px
16px
24px
32px
48px
64px
96px
128px
COLOR SYSTEM

Palette

Primary
#ff3366
CTAs, accents
Cyan
#00ccff
Links, info
Violet
#8a64ff
AI, highlights
Green
#00ff88
Success, positive
Gold
#ffcc00
Warnings, stars
White/80
rgba(255,255,255,0.8…
Primary text
White/30
rgba(255,255,255,0.3…
Secondary text
White/10
rgba(255,255,255,0.1…
Borders
Surface
#0a0a1a
Card backgrounds
Background
#050510
Page background
LAYOUT GRID

12-Column System

123456789101112
8 cols — Content
4 cols — Sidebar
4
4
4
3
6
3
COMPONENT DISSECTION

Anatomy

Hover to inspect measurements.

SPECIMEN: PRIMARY BUTTON
FONT
Space Grotesk 600
SIZE
14px / 0.875rem
TRACKING
0.05em
RETURN TO LAB