Design Systems in the AI Era

The Paradox of AI-Generated UI

AI can now generate beautiful UI components in seconds. But here's the paradox: the faster you can generate UI, the more important a design system becomes.

Without constraints, AI produces infinite variation. Each component looks fine in isolation, but together they create visual chaos. A design system provides the guardrails that make AI-generated UI coherent.

Our Approach: Design System as SSOT

At Bakke & Co, we treat the design system as the Single Source of Truth (SSOT). Every project starts with a design-system.jsonc file that defines:

• Colors — semantic tokens, not raw values
• Typography — font families, scales, weights
• Spacing — consistent rhythm
• Components — reusable patterns with variants
• Shadows — depth system
• Motion — animation principles

The Three-Font System

After experimenting with dozens of combinations, we settled on a three-font system:

1. JetBrains Mono — Display, brand, code. The technical DNA.
2. Space Grotesk — Headings. Modern, geometric, bold.
3. Inter — Body text. Maximum readability.

This isn't arbitrary. Each font serves a specific semantic purpose. When AI generates a component, it knows which font to use based on the element's role.

Token-Based Architecture

Raw values are banned. Every visual property references a token:

:root {
  --accent: #39FF85;
  --bg-primary: #070B14;
  --text-primary: #F0F2F5;
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
}

This means:

• Theme switching is trivial (swap token values)
• Consistency is enforced (can't accidentally use #39FF86)
• AI assistants produce consistent output (they reference tokens)

Component Patterns

We use utility classes that compose into complex patterns:

.ds-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.ds-card-glow:hover::before {
  /* Gradient border glow effect */
  opacity: 0.3;
}

The Result

With a proper design system:

• AI generates consistent UI — within the system's constraints
• Theme switching works — dark/light mode is just token swapping
• New pages take hours, not days — components compose predictably
• Design reviews are faster — "does it follow the system?" is a quick check

Without a design system, AI generates beautiful chaos. With one, it generates beautiful consistency.

---

This approach is used across all Bakke & Co projects, including davidbakke.no, EventRipple, and client work.