Skip to content

Design System Thoughts

01Foundations

1.1Neutral and brand colors
1.2Building color scales with OKLCH
1.3Surface hierarchy: AlignUI, Geist, and Kumo
1.4Aligning type, numbers, and icons
1.5Spacing, radii, and sizing

02Design tokens

2.1Organizing tokens: AlignUI and Vercel Geist
2.2Naming tokens: roles, emphasis, and states
2.3Using tokens in everyday styling
2.4Choosing colors for dark mode

03Starting points

3.1Finding components in real pages
3.2Information and action hierarchy
3.3Reusable layout conventions
3.4Validating foundations with baseline components

04Components

4.1Shared components and business logic
4.2Predictable public APIs
4.3Structure and state in compound components
4.4Styling variants and interaction states
4.5Contextual CSS and escape hatches
4.6Recipes, documentation, and reuse

05Interaction

5.1Feedback throughout an operation
5.2Choosing feedback and confirmation
5.3Keyboard, focus, and pointer interaction
5.4Motion that serves interaction
5.5Writing for actions and states
5.6Brand expression in interaction

06Quality

6.1Making conventions executable with lint
6.2Testing component behavior
6.3Testing keyboard, focus, and state transitions
6.4Useful visual regression tests
6.5Testing composition and consumption
6.6Checks in development and CI

Overview/Foundations

Surface hierarchy: AlignUI, Geist, and Kumo

This article is still in the works.

Loading count…

PreviousBuilding color scales with OKLCH NextAligning type, numbers, and icons