Design System

Build what
matters,
faster.

Playful developer analytics. Dark surfaces, bold green actions, punchy orange accents. Serious data, friendly interface.

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

Color Tokens

Dark neutrals with a green/orange accent duo. 18 tokens across surfaces, text, interaction, and decorative washes.

Charcoal
#1D1D1D
Primary page background
Deep Night
#111111
Elevated surfaces, code blocks
Slate
#232429
Cards, panels, content areas
Graphite
#2C2C2C
Borders, dividers
Iron
#3A3A3A
Inactive states, hints
Snow
#FFFFFF
Primary text, icons
Mist
#E5E5E5
Secondary text
Ash
#919191
Placeholders, labels
Smoke
#6B6B6B
Helper text, captions
Hedgehog Green
#1DB954
Primary CTA, success states
Bright Green
#27DE6A
Hover state, highlights
Blaze Orange
#F54E00
Accent, warnings, secondary CTA
Ember
#FF7A3D
Orange hover, soft accent
Link Blue
#1D9BF0
Links, info indicators
Lavender
#B295F0
Decorative accents
Honey
#FFC940
Badges, playful callouts

Washes & Gradients

mint-wash
Success card fills, green tinted backgrounds
orange-wash
Warning card fills, orange tinted backgrounds
green-glow
Hero background glow
orange-pulse
Accent highlight orb
Typography

Type Scale

Inter as primary typeface. JetBrains Mono for code and metrics. Clean, technical, highly legible.

Display-xl Analytics for engineers 48px / 1.0 / -0.03em
Display Ship faster 40px / 1.1 / -0.03em
Heading-lg Product analytics 32px / 1.2 / -0.02em
Heading Section heading 24px / 1.3 / -0.02em
Heading-sm Subsection heading 20px / 1.4 / -0.01em
Body Default body text for readable content 15px / 1.6 / 0
Body-sm Dense data, comparison rows 14px / 1.6 / 0
Caption Meta info · Labels · Timestamps 13px / 1.5 / 0.02em

Fonts

Primary Inter 400-700 · 13-48px
Mono JetBrains Mono 400-700 · Code & metrics
Fallback system-ui System stack fallback
Layout

Spacing & Shapes

Base unit 4px. Comfortable density. 12-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

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

Border Radius

sm 4px
md 6px
lg 8px
xl / cards 12px
pill 100px
Elevation

Surfaces

4 surface levels from deep black to card-ready slate. Borders use Graphite consistently.

Deep Night #111111
Charcoal #1D1D1D
Slate #232429
Graphite #2C2C2C
Components

Buttons & Elements

Green primary, orange accent, and ghost variants. Each serves a distinct interaction hierarchy.

Primary Action Button
Main call to action — highest visual weight
.btn-primary
Hedgehog Green (#1DB954) background, Snow text, 6px radius. Use for the single most important action.
Orange Accent Button
Secondary CTA, attention-grabbing
.btn-orange
Blaze Orange (#F54E00) background, Snow text. Use for secondary CTAs that need to pop.
Ghost Button
Tertiary actions, navigation
.btn-ghost
Snow text, Graphite border. For less prominent actions that still need visual presence.
Pill Tag
Filters, badges, metadata
.pill-tag
Active Warning Beta Pro
Pill-shaped (100px radius), 4px/12px padding. Semantic coloring for status and metadata.

Metric Cards

Monthly Active Users
24,891
+12.4% vs last month
Events Tracked
1.2M
+8.1% vs last month
Churn Rate
3.2%
+0.4% vs last month

Code Block

// Track an event with PostHog import posthog from 'posthog-js' posthog.init('phc_abc123', { api_host: 'https://app.posthog.com', autocapture: true, }) posthog.capture('user_signed_up', { plan: 'free', referral: 'hackernews', })

Input Field

Transparent background, 8px radius. Focus shifts border to Hedgehog Green (#1DB954).
Guidelines

Do's & Don'ts

Do — Embrace
  • Charcoal (#1D1D1D) as default page background
  • Hedgehog Green (#1DB954) for primary CTAs and success
  • Blaze Orange (#F54E00) sparingly for accent punch
  • JetBrains Mono for all metrics, code, and data
  • 4px-based spacing with 12px element gaps
  • 12px radius for cards, 6px for buttons
  • Let green/orange duo create visual rhythm
Don't — Avoid
  • Orange for surfaces larger than buttons/tags
  • Bright saturated backgrounds
  • Serif or decorative fonts
  • Hard 0px corners on interactive elements
  • Generic blue (#0000FF) for links
  • Green and orange in the same element
  • Dense packing without breathing room