Demo project

A drop-in design system. One globals.css, components as you need them.

Foundation

Components

How to use

Drop in one globals.css (reset, focus ring, and all tokens), then reference with var(--…). Add a component's CSS as you need it, in plain HTML or via the typed React version each component ships.

@import url("globals.css");

.panel {
  background: var(--background-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-24);
}