// blog / article

Building a Design System from Scratch

2026.03.05 / 2 min read
design-systemcssastro

Why Build a Design System?

A design system isn’t just a collection of components — it’s a shared language between design and development. When I set out to build the Neo-Wire design system, I wanted something that felt intentional, systematic, and easy to maintain.

The Core Principles

  1. Consistency over creativity — Every decision should serve the system
  2. Simplicity first — Start minimal and add complexity only when needed
  3. Developer experience matters — If it’s hard to use, it won’t be used

CSS Custom Properties as the Foundation

The entire system is built on CSS custom properties:

:root {
  --nw-bg: #F5F0E8;
  --nw-ink: #1A1A1A;
  --nw-accent: #C45D2C;
  --nw-muted: #8C8577;
}

This makes theming trivial and keeps the system flexible.

Typography

We use two typefaces:

  • IBM Plex Mono for headings, labels, and code
  • DM Sans for body text

The monospace-first approach gives the interface a technical, blueprint-like quality that aligns with the Neo-Wire aesthetic.

Component Patterns

Every component follows a simple pattern:

---
interface Props {
  variant?: 'default' | 'accent';
}

const { variant = 'default' } = Astro.props;
---

<div class:list={['component', variant]}>
  <slot />
</div>

Lessons Learned

  • Start with spacing and typography before building components
  • Use border and box-shadow instead of background for visual weight
  • Dashed lines create a “blueprint” feel without being heavy
  • Test in both light and dark contexts early

The best design system is the one your team actually uses.

What’s Next

In the next post, I’ll dive deeper into the component architecture and how we handle responsive design with minimal media queries.

← back to blog