Design System

Colors

Background

Showing dark theme values. Light theme: #fafafa, #ffffff, #f4f4f5, #ffffff

--color-bg-primary
#0a0a0b

--color-bg-secondary
#111113

--color-bg-tertiary
#18181b

--color-bg-elevated
#1f1f23

Text

Primary

#f4f4f5 · 18:1

Secondary

#a1a1aa · 7:1

Tertiary

#71717a · 4.6:1*

*Tertiary passes AA for large text (18px+) only

Accent

--color-accent-primary
#22d3ee

--color-accent-secondary
#06b6d4

--color-accent-warm
#f59e0b

--gradient-accent
135deg cyan

Semantic

--color-success
#10b981

--color-warning
#f59e0b

--color-error
#ef4444

--color-info
#3b82f6

Typography

Font: Fira Code (monospace everywhere)

Scale: Major Third (1.25 ratio)

Weights: 400 regular · 500 medium · 600 semibold · 700 bold

60px Display 700 · 1.2

48px Heading 1 700 · 1.2

36px Heading 2 600 · 1.2

30px Heading 3 600 · 1.4

24px Heading 4 600 · 1.4

17px Body text for paragraphs and descriptions 400 · 1.6

14px Small text and captions 400 · 1.6

12px Label Text 600 · 1 · 0.15em

Spacing

Base unit: 4px

4px

space-1 — icon gaps

8px

space-2 — tight grouping, inline elements

12px

space-3 — button padding, small gaps

16px

space-4 — standard gaps, paragraph spacing

24px

space-6 — card padding, grid gaps

32px

space-8 — page padding, large gaps

48px

space-12 — section padding

64px

space-16 — section breaks

Motion

Base: 50ms · Technical personality = fast, minimal

100ms

--duration-fast

Color changes, opacity

150ms

--duration-normal

Hover states, focus

200ms

--duration-slow

Transforms, shadows

500ms

--duration-slowest

Page animations

Easing

--ease-out cubic-bezier(0, 0, 0.2, 1)

--ease-out-expo cubic-bezier(0.16, 1, 0.3, 1)

--ease-in-out cubic-bezier(0.4, 0, 0.2, 1)

Components

Buttons

Default state

Primary Button Secondary Button

Hover: lift + shadow (primary gets gradient)

Primary Hovered Secondary Hovered

Disabled: reduced opacity, no pointer events

Primary Disabled Secondary Disabled

Links

Links use accent-primary (#22d3ee) by default, switching to accent-warm (#f59e0b) on hover.

In post content: underline with --color-border-accent, full color on hover

Input

Focus: accent border + glow shadow

Cards

Card Title

Card description with secondary text color and comfortable line height for readability.

Meta label

Featured Card

Accent border indicates special status. Hover adds glow + lift + top gradient bar.

Featured

Border Radius

4px

tags, code

6px

buttons, inputs

12px

cards

20px

CTA sections

full

avatars, pills

Elevation

shadow-sm

subtle lift

shadow-md

cards

shadow-lg

hover states

shadow-glow

CTAs, focus

Breakpoints

480px

Mobile

768px

Tablet

1024px

Desktop

1200px

Max container

Principles

Technical identity — Fira Code monospace everywhere reinforces precision
Dark-first — Dark theme default, light theme adapts colors appropriately
4px grid — All spacing derives from 4px base unit for consistency
Accessible — WCAG AA contrast (7:1+ for body text), 44px touch targets
Minimal motion — 50ms base, fast interactions, respects prefers-reduced-motion
Focus visible — 2px accent outline with 2px offset for keyboard navigation