Narrowed, not exhaustive
Every lesson teaches one idea and ends with a default you can use today. One path through, that holds up in real products.
Not an encyclopedia of options. The values, the connections, and the defaults you take with you.
Foundations
The mental model and the token engine. One path through, then you have the whole shape.
- What a design system isThe difference between a system and a folder of components.1 min
- PrimitivesThe raw values you name once and build everything from.1 min
- Semantic tokensChange one value, watch the whole system move.1 min
- Component tokensWhere the system finally meets the component.1 min
- Naming & structureNames that survive the second engineer.1 min
The foundations you tokenize
One category per lesson. Color and typography defer readability theory to Grade.
- ColorOne ramp, every state, no random hex codes.1 min
- TypographyA type scale instead of forty font sizes.1 min
- SpacingWhy your layout feels off by a few pixels.1 min
- Radius & shapeOne radius decision, applied everywhere.1 min
- Elevation & shadowsDepth you can reuse instead of guess.1 min
- MotionTiming that feels intentional, not random.1 min
- Borders, breakpoints, z-indexThe tokens everyone forgets until they collide.1 min
- Icons, focus & a11y tokensThe system parts that keep it usable.1 min
Making it real
Shipping, theming, code, and keeping the system alive once other people touch it.
- Anatomy, variants, and statesOne component, every state accounted for.1 min
- Theming without duplicationA new theme without touching a single component.1 min
- DocumentationDocs that write themselves from the system.1 min
- Token-to-codeFrom tokens to a registry your team can install.1 min
- Versioning & governanceKeeping the system from drifting back into chaos.1 min
The break, already painted
Most guides describe the rules. Cascade shows the break already painted, then the same specimen on tokens.
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.
The rest of the system
Cascade starts after type. Grade is the step before: measure, contrast, scale, and the defaults for readable text.