Design System
27 Oct 2026
8 min read

SpaceZero Design System: A Deep Dive into Constrained Styling

Explore how SpaceZero's design system uses Tailwind CSS with strict constraints to maintain consistency across micro-apps.

SpaceZero Design System: A Deep Dive

SpaceZero's design system is built on a simple principle: constraints create consistency.

The Constraint Philosophy

Instead of allowing arbitrary values, SpaceZero defines a limited set of design tokens:

  • Scaling (spacing + sizing): 0, 1, 2, 3, 5, 9, 12, 16, 48, 96, lg, 7xl, full, auto, px
  • Border Radius: 0, 5, full
  • Font Sizes: xs, base, lg, 5xl (standard Tailwind classes, no overrides)
  • Font Weight: semibold (600) only
  • Colors: Semantic tokens (surface, layer, action, regular, accent, etc.)

Single Source of Truth

All tokens live in src/index.css as CSS custom properties:

css

:root {

--scaling-5: 1.25rem;

--action: #006198;

}

Tailwind config is a thin mapping layer that references the tokens via var():

js

spacing: {

5: 'var(--scaling-5)',

}

Font sizes are intentionally not overridden — they use the standard Tailwind classes listed above.

Component Architecture

Components are built as TSX sub-components that encapsulate all styling:

tsx

// Button.tsx

const BASE_BTN = 'inline-flex items-center justify-center py-3 ...';

Pages compose components only — no inline Tailwind classes.

Benefits

  1. Consistency: Impossible to create inconsistent scaling/colors
  2. Maintainability: Change one token, update everywhere
  3. AI-Friendly: Agents can't "go off the rails" with styling
  4. Performance: Smaller CSS bundle, no unused utilities

Customization

To customize for your app, only edit src/index.css:

css

:root {

--action: #8b5cf6; /* Your brand color */

--surface: #0f172a; /* Your background */

}

That's it — your entire app reflects the new brand.