Design System

Bold editorial,
tech-forward,
unmistakably loud.

Bright white surfaces meet a punchy red-orange accent that screams urgency. Typography is the hero — bold, confident, unapologetically editorial.

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

Color Tokens

Clean whites with a punchy red accent. 16 tokens across surfaces, text hierarchy, interactive elements, and category colors.

White
#ffffff
Primary page background
Bone
#f5f5f5
Section alternation, depth
Paper
#fafafa
Card backgrounds
Smoke
#e5e5e5
Borders, dividers
Ash
#cccccc
Inactive states
Iron
#999999
Secondary text, captions
Ink
#333333
Body text
Midnight
#1a1a1a
Headings, bold text
Void
#000000
Maximum contrast
Red Hot
#FA4B2A
Primary accent, CTAs
Red Glow
#ff6b4a
Hover states
Red Deep
#d43d1a
Press states
Category Blue
#0055ff
Science, space
Category Green
#00a569
Climate, health
Category Purple
#7b61ff
Culture, entertainment

Gradients

gradient-red
Hero sections, featured content
gradient-dark
Dark headers, video backgrounds
Typography

Type Scale

Bold editorial typography. FK Roman for articles, Manuka for dramatic headlines, PolySans for UI. Sharp, confident, unmistakable.

Display-xl BREAKING 80px / 0.9 / −0.03em
Display-lg The future is here 64px / 0.95 / −0.03em
Display Hero headline 48px / 1.0 / −0.03em
Heading-lg Featured article title 32px / 1.2 / −0.02em
Heading Section heading 24px / 1.3 / −0.02em
Body Default body text for readable content 16px / 1.5 / −0.01em
Caption Meta info · Timestamps · Labels 12px / 1.5 / 0.02em

Fonts

Editorial FK Roman Standard 400–700 · 16–32px · Georgia fallback
Display Manuka 700–900 · 32–80px · Impact fallback
UI PolySans 400–700 · 12–24px · Helvetica fallback
Mono PolySans Mono 400–500 · 12–16px · Code only
Layout

Spacing & Shapes

Base unit 4px. Editorial density with generous breathing room. Sharp corners throughout — no-nonsense, confident.

Spacing Scale (4px base)

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

Border Radius

sharp 0px
sm 4px
md 8px
lg 12px
xl 16px
pill 9999px
Elevation

Depth & Surfaces

Flat, clean surfaces. No drop shadows — separation through borders and subtle background shifts. 4 distinct surface levels.

Depth Levels

White
Base page background — the canvas
Level 0
Paper
Card backgrounds, elevated content
Level 1
Bone
Section alternation, sidebar backgrounds
Level 2
Smoke
Borders, dividers, subtle separation
Level 3

Surface System

White #ffffff
Paper #fafafa
Bone #f5f5f5
Smoke #e5e5e5
Components

Button Variants

Red Hot primary, ghost secondary, and dark-mode ghost variants. Sharp corners, bold weight, editorial confidence.

Primary CTA Button
Main call to action — highest visual weight
.btn-primary
Red Hot (#FA4B2A) background, white text, 0px radius. Sharp, confident, editorial. Use for the single most important action.
Breaking News Badge
Urgent content, live updates
.badge-breaking
Breaking Live Exclusive
Red Hot background, white text, pill radius, compact padding. Bold uppercase at 11px. Signals immediate attention.
Ghost Button
Secondary actions, download links
.btn-ghost
Transparent background, white text, subtle white border. For secondary actions on dark backgrounds.
Category Tag
Content classification, section labels
.category-tag
Tech Science Climate Culture
Category-specific color text, 0px radius, 2px bottom border. 11px uppercase bold, letter-spacing 0.08px.
Article Card
Content previews, feed items
.article-card
Tech Apple announces new M5 chip with breakthrough AI capabilities The new processor promises 3x faster machine learning performance while maintaining all-day battery life. By Sarah Chen · 2 hours ago
White background, 0px radius, 16px padding, 1px Smoke bottom border. FK Roman for title, PolySans for metadata.
Input Field
Search, newsletter signup
input
Transparent background, 0px radius, Smoke border. Focus state uses Red Hot border. Clean, editorial.
Guidelines

Do's & Don'ts

Do — Embrace
  • White (#ffffff) as primary canvas — let content breathe
  • Red Hot (#FA4B2A) exclusively for accent and CTAs
  • Sharp corners (0px radius) for editorial confidence
  • Manuka for dramatic hero headlines — go big, go bold
  • FK Roman for long-form reading — warm and inviting
  • Generous spacing — editorial layouts need breathing room
  • Category colors for section identity
Don't — Avoid
  • Rounded corners on primary elements
  • Red Hot for large background areas
  • Manuka for body text — display only
  • Heavy drop shadows — flat and clean
  • More than two typefaces per component
  • Dense, cramped layouts
  • Generic blues for interactive elements