Skip to main content
Cascade

Build your first design system.

Start with the values, connect them, and watch one change move through the whole system. Learn it by touching it, then take the defaults with you.

See the cascadeBrowse the lessons

Narrowed, not exhaustive

Every lesson teaches one idea and ends with a default you can use today. Not an encyclopedia of options — one path through, that holds up in real products.

Foundations

The mental model and the token engine. One path through, then you have the whole shape.

  1. 1What a design system isThe difference between a system and a folder of components.4 min
  2. 2PrimitivesThe raw values you name once and build everything from.3 min
  3. 3Semantic tokensChange one value, watch the whole system move.4 min
  4. 4Component tokensWhere the system finally meets the component.3 min
  5. 5Naming & structureNames that survive the second engineer.3 minSoon

The foundations you tokenize

One category per lesson. Color and typography defer readability theory to Grade.

  1. 6ColorOne ramp, every state, no random hex codes.4 min
  2. 7TypographyA type scale instead of forty font sizes.4 min
  3. 8SpacingWhy your layout feels off by a few pixels.3 minSoon
  4. 9Radius & shapeOne radius decision, applied everywhere.3 minSoon
  5. 10Elevation & shadowsDepth you can reuse instead of guess.3 minSoon
  6. 11MotionTiming that feels intentional, not random.3 minSoon
  7. 12Borders, breakpoints, z-indexThe tokens everyone forgets until they collide.3 minSoon
  8. 13Icons, focus & a11y tokensThe system parts that keep it usable.3 minSoon

Making it real

Shipping, theming, code, and keeping the system alive once other people touch it.

  1. 14Anatomy, variants, states, sizesOne component, every state accounted for.4 minSoon
  2. 15Theming without duplicationA new theme without touching a single component.4 min
  3. 16DocumentationDocs that write themselves from the system.3 minSoon
  4. 17Token-to-codeFrom tokens to a registry your team can install.4 minSoon
  5. 18Versioning & governanceKeeping the system from drifting back into chaos.3 minSoon

Demos in the prose

Most guides describe the rules. Cascade lets you feel them. The controls sit inside the lesson — change a value, watch it propagate, keep the result.

Built on the system it teaches

Cascade's own CSS is token-driven. Primitives for the palette, semantics for purpose, component tokens for the chrome. The site is the example.