---

title: "Design System Foundations" date: "2025-02-03" description: "Building a consistent design language with Tailwind CSS v4 custom properties, dark-mode-first colors, and a typographic scale that actually works." tags: ["design", "tailwind", "css", "dark-mode"]

Design System Foundations

Before writing any feature code, I spent time building a proper design system. It pays dividends later — consistent spacing, predictable colors, a typographic rhythm that doesn't require tweaking every component by hand.

Here's what I built and why every decision was made deliberately.

Dark Mode as the Default

Most design systems treat dark mode as an afterthought — a prefers-color-scheme media query bolted on at the end. Not here.

The Late Night Project is dark-mode-first. The entire color palette is designed for the dark background. The primary background is #0B0F1A — deep midnight blue. Not pure black (which strains eyes on high-contrast displays), but dark enough to feel intentional.

@theme {
  --color-background: #0b0f1a;
  --color-background-secondary: #111827;
  --color-background-card: #1f2937;
}

Three background levels give depth without reaching for box shadows everywhere.

The Gold Accent

Gold (#D4AF37) is the primary accent color. It reads as "premium" against a dark background without being garish. Hover states shift to a brighter yellow-gold (#FACC15) for a clear interactive signal.

--color-gold: #d4af37;
--color-gold-hover: #facc15;

Green (#4ADE80) is the secondary accent — used for status indicators, success states, and occasionally to break up monotony in longer content.

Typography Scale

I resist the urge to use a font that requires loading a custom web font. System fonts load instantly, look native, and cover 99% of typographic needs.

The scale follows a modular ratio — each step is approximately 1.25x the previous:

| Token | Value | |-------|-------| | xs | 0.75rem | | sm | 0.875rem | | base | 1rem | | lg | 1.125rem | | xl | 1.25rem | | 2xl | 1.5rem | | 3xl | 1.875rem | | 4xl | 2.25rem | | 5xl | 3rem |

Headlines use the 3xl–5xl range. Body copy is base with line-height ~1.7 for comfortable reading.

Spacing Consistency

All spacing uses an 8-point grid (with a 4-point half-step for tight situations). The tokens map directly to Tailwind utilities:

--spacing-xs: 0.25rem;   /* 4px */
--spacing-sm: 0.5rem;    /* 8px */
--spacing-md: 1rem;      /* 16px */
--spacing-lg: 1.5rem;    /* 24px */
--spacing-xl: 2rem;      /* 32px */
--spacing-2xl: 3rem;     /* 48px */
--spacing-3xl: 4rem;     /* 64px */
--spacing-4xl: 6rem;     /* 96px */

When in doubt, reach for md for internal component padding and xl–2xl for section spacing.

What This Unlocks

With the design system in place, every subsequent component gets built faster and more consistently. I don't have to make micro-decisions on every PR — the system makes them for me.

Next up: actually building the component library on top of this foundation. Starting with navigation, then cards, then the typography-heavy components for the build log itself.