Why Build a Custom System?

Every mature product eventually outgrows utility-first CSS used ad-hoc. The moment you have more than 3 pages, inconsistency creeps in.

A design system provides:

• Consistency same spacing, colors, and typography everywhere
• Speed new components are assembled, not designed from scratch
• Constraints fewer choices = faster decisions = better results

My Approach

1. Define Tokens First

Before writing any component CSS:

@theme {
  --color-bg-primary: #09090b;
  --color-bg-secondary: #18181b;
  --color-text-primary: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-accent: #38bdf8;
}

2. 4px Grid System

Every spacing value is a multiple of 4px. No exceptions. This eliminates the "should this be 14px or 16px?" decision fatigue.

3. Typography Scale

Fixed modular scale: 12, 13, 14, 16, 18, 20, 24, 30px. That's it. If a size isn't on this list, it doesn't exist in the system.

Results

Development speed increased noticeably after the first week. New pages take 30-40% less time because design decisions are pre-made.

Tradeoff

The upfront investment is real, 2-3 hours defining tokens before writing any visible UI. Worth it for anything beyond a single page.