Independent spaceGeneral availability
Design Systems Studio
Tokens.
Components.
Motion.
A separate learning space for interface consistency, reusable parts, and the token language that keeps a product coherent as it grows.
TokensComponentsMotionArchive
Progress
100%
4 lessons ready of 4
Content tree
1 folders
6 files in content/design-systems
Selected file
Foundations
lessons/foundations.md
Beginner to advanced
Learning pathway
3 stages • 4 lessons
General availability
The course is open now. The archive stays visible so later additions can grow without changing the layout again.
LiveGeneral access
Interactive practice
Token lab
Pick the token set that feels most coherent, then inspect how the palette changes the preview card.
Score
0
Streak
0
Best
0
Token comparisoncolor + surface + border
System preview
Interface surface
This preview uses the selected token set to show how background, surface, border, and accent work together.
Active tokenSurface
BG
oklch(0.11 0.01 250)
Surface
oklch(0.15 0.01 250)
Border
oklch(0.22 0.02 250)
Accent
oklch(0.72 0.16 205)
What this teaches
- • Why semantic tokens beat one-off styling.
- • How surfaces, borders, and accents work together.
- • How a small system can still feel distinctive and coherent.
System rule
The palette should support the content, not compete with it.
Pro path
This can later expand into theme editing, component previews, and state catalog reviews without changing the course shell.
View
Curriculum
Lessons
1/4
Selected file
Foundations
18 min
lessons/foundations.mdMarkdown lessonFoundation
title: "Foundations"
course: "Standalone"
week: 1
type: "lesson"
subtopics:
- "Spacing"
- "Hierarchy"
- "Scale"
Foundations
Goal
Learn how spacing and hierarchy shape every screen before color enters the picture.
What to watch
- keep one dominant action
- use spacing to group related content
- let type scale carry meaning
Practice
Inspect a page and identify the primary, secondary, and tertiary elements.