Design System

The canonical UI layer for the STEAM Co ecosystem. All new UI work uses these components and tokens.

17 Greenscale Stops
8 Spacing Values
27 Components
2 Themes

Foundations

Core design tokens that define visual language

ColorsTypographySpacing +3

Components

Reusable UI building blocks

23 stable 0 in progress 4 planned

Patterns

Composed recipes for common UI needs

Page layoutsFormsNavigation +1

Brand Guidelines

Logo, voice, and visual identity

PrinciplesLogo usageColor usage +1

Design Principles

Calm & Precise

Museum-like aesthetic with restrained ornamentation. Every pixel earns its place.

Consistent

All apps share the same visual language through shared tokens and components.

Accessible

WCAG 2.1 AA compliant. Designed for everyone, including users with disabilities.

Scalable

Works across web, desktop, and mobile. Density modes adapt to context.

Usage Guidelines

✓ Do

  • Use components from @steamco/design-system
  • Use semantic tokens (--g-color-bg-surface)
  • Add new components to design system first, then consume
  • Document components with metadata and presets

✗ Don't

  • Hardcode color values in components
  • Create one-off styling in apps
  • Skip documentation for new components
  • Use palette tokens directly in components