Design System

The future
is bold.

Bold editorial clarity meets tech-forward precision. Black text on white canvas, punctuated by vivid red accents and sharp typographic hierarchy.

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

Color Tokens

High-contrast editorial palette. Ink black on white canvas with Wired Red as the singular brand accent. 15 tokens across surfaces, text, interaction, and decorative gradients.

White Canvas
#ffffff
Primary page background
Ink Black
#000000
Headings, bold statements
Carbon
#1a1a1a
Body text, dense content
Dark Gray
#333333
Captions, tertiary text
Mid Gray
#666666
Placeholders, disabled
Light Gray
#999999
Borders, dividers
Pale Gray
#e6e6e6
Card backgrounds, inputs
Off White
#f5f5f5
Alternating sections
Wired Red
#ff0000
Primary accent, CTAs
Hot Pink
#ff2d6b
Secondary accent, hover
Electric Blue
#0066ff
Links, focus states
Neon Yellow
#e6ff00
Highlight text, badges
Deep Blue
#0a2540
Footer, dark sections
Typography

Type Scale

Arial Narrow for bold editorial headlines in all-caps with tight tracking. Helvetica Neue for clean, readable body text. Sharp typographic contrast between display and body.

Display-xl The future 96px / 0.9 / 0.08em
Display Bold editorial 64px / 0.95 / 0.05em
Heading-lg Section headline 40px / 1.0 / 0.05em
Heading Feature title 32px / 1.05 / 0.05em
Subheading Section subheading text 20px / 1.4 / 0
Body Default body text for readable article content 16px / 1.6 / 0
Body-sm Dense data, UI labels, comparison rows 14px / 1.5 / 0.01em
Caption Meta info · Footer · Labels 12px / 1.5 / 0.05em

Fonts

Display Arial Narrow 700-900 · 32-96px · Headlines only
Body Helvetica Neue 400-700 · 12-24px · All readable text
Mono SFMono-Regular 400-500 · Code and metadata only
Layout

Spacing & Shapes

Base unit 4px. Editorial density with generous whitespace. 14-step spacing scale, 6 border radius values favoring sharp corners.

Spacing Scale (4px base)

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

Border Radius

sharp 0px
subtle 2px
input 4px
buttons 4px
cards 8px
pill 9999px
Elevation

Surfaces

Clean white canvas with subtle off-white alternation. Deep Blue reserved for dark accent sections. 4 distinct surface levels.

White Canvas #ffffff
Off White #f5f5f5
Pale Gray #e6e6e6
Deep Blue #0a2540
Components

Button Variants

Primary (Wired Red), secondary (outlined), and ghost variants. All buttons use uppercase condensed bold with sharp editorial corners.

Primary Button
Main call to action — highest visual weight
.btn-primary
Wired Red (#ff0000) background, white text, 4px radius, uppercase condensed bold 14px. Use exclusively for the single most important action.
Secondary Button
Secondary actions, outlined editorial weight
.btn-secondary
Ink Black text, 1px Ink Black border, 4px radius. For secondary CTAs that need editorial weight without competing with primary.
Ghost Button
Tertiary actions, interactive accents
.btn-ghost
Electric Blue text, 1px Electric Blue border, 4px radius. For tertiary actions and interactive accent moments.
Badge
Category labels, tags, attention markers
.badge
Technology Science Exclusive
Wired Red background, white text, pill shape, uppercase sans 11px with 0.06em tracking. For category tags and attention-grabbing labels.
Pull Quote
Editorial emphasis, dramatic statements
.pull-quote
The future belongs to those who build it.
Condensed Bold 32px, Ink Black, 4px Wired Red left border, 24px left padding. For editorial pull quotes and dramatic typographic statements.
Guidelines

Do's & Don'ts

Do — Embrace
  • White Canvas (#ffffff) as primary background
  • Ink Black (#000000) for headings and bold statements
  • Wired Red (#ff0000) exclusively for CTAs and badges
  • Electric Blue (#0066ff) for all links and focus states
  • Condensed Bold in all-caps for headlines
  • Generous whitespace with 48px+ section gaps
  • Sharp corners (0px) for editorial feel
Don't — Avoid
  • Wired Red for body text or large fills
  • Rounded corners (16px+) on primary elements
  • Mixing Condensed Bold with body text
  • Decorative gradients on text
  • Dense content packing without whitespace
  • Light Gray for primary text
  • Neon Yellow as a background color