Design System

JUST
DO IT.

A light editorial product system: black type, white surfaces, and one decisive action at a time.

11 color tokens 11 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Strict monochrome palette. Black, white, and grays. Two accent colors reserved exclusively for functional indicators.

True Black
#000000
Primary background, hero sections
Obsidian
#111111
Elevated panels, secondary sections
Charcoal
#1a1a1a
Tertiary surfaces, hover states
Iron
#222222
Borders, dividers
Steel
#333333
Disabled states, inactive
Smoke
#757575
Placeholders, secondary labels
Platinum
#b3b3b3
Secondary text, subheadings
Pure White
#ffffff
Primary text, icons, CTAs
Off White
#f5f5f5
Light mode background
Neon Orange
#ff6b00
Promotional, urgency
Signal Green
#00ff87
Success, availability
Typography

Type Scale

Futura for display and headings — geometric, bold, architectural. Helvetica Neue for body — clean, neutral. Tight tracking throughout.

Display-xl JUST DO IT 96px / 0.9 / -0.04em
Display-lg MOVE TO ZERO 72px / 0.9 / -0.04em
Display Air Max 90 56px / 0.95 / -0.03em
Heading-lg New Arrivals 32px / 1.1 / -0.02em
Heading Featured Collection 24px / 1.2 / -0.01em
Subheading Men's Running Shoes 18px / 1.4 / 0.02em
Body Default body text for readable content 16px / 1.5 / 0.02em
Body-sm Product details, comparison rows 14px / 1.5 / 0.04em
Caption META INFO · LABELS · FOOTER 12px / 1.5 / 0.08em

Fonts

Display Futura 500-700 · 20-26px
Body Helvetica Neue 400-700 · 12-20px
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Compact density. Sharp corners on everything — except buttons. Buttons are always pill-shaped.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

default 0px
cards 0px
input 0px
pill 9999px
buttons 9999px
Elevation

Surfaces

No shadows. No gradients. Pure flat surfaces differentiated only by shade. Four levels of black.

True Black #000000
Obsidian #111111
Charcoal #1a1a1a
Iron #222222
Components

Button Variants

Pill-shaped buttons with bold weight. Primary fills white on black. Ghost outlines in white. Sharp everything else.

Pill Primary Button
Main call to action — highest visual weight
.btn-primary
Pure White (#ffffff) text on True Black (#000000) background. 9999px radius, 14px/36px padding, font-weight 700, uppercase.
Pill Inverted Button
Light context CTAs, secondary actions
.btn-inverted
True Black (#000000) text on Pure White (#ffffff) background. Mirror of primary for light contexts.
Ghost Button
Tertiary actions, navigation
.btn-ghost
Pure White text, transparent background, 1px white border. 9999px radius, 10px/24px padding.
Navigation Bar
Site-wide navigation
.nav
NIKE New Men Women Kids
True Black background, 56px height. Logo in Pure White, nav links uppercase at 12px with 0.06px letter-spacing.
Input Field
Forms, search
input
Email
Search
Bottom border only. 0px radius. Focus state changes border to Pure White. Labels uppercase with wide tracking.
Guidelines

Do's & Don'ts

Do — Embrace
  • True Black (#000000) as primary background
  • Pure White (#ffffff) for all primary text and CTAs
  • Pill-shaped (9999px) buttons exclusively
  • Sharp 0px corners on cards, inputs, containers
  • Tight letter-spacing on headings (-0.02 to -0.04)
  • Uppercase with wide tracking for labels and nav
  • Maximum contrast at all times
  • Generous negative space — let content breathe
Don't — Avoid
  • Colored backgrounds — strictly black, white, grays
  • Rounded corners on non-button elements
  • Decorative shadows, gradients, or effects
  • Light or thin font weights for headings
  • Reduced contrast between text and background
  • Cluttered layouts — every element earns its place
  • Body copy in uppercase — reserve for labels only
  • Drop shadows on cards or elevated elements