Foundations
14 pagesThe decisions everything else is built on.
Every page follows the same nine sections in the same order — live preview first, then anatomy, tokens, sizes, do, don’t, accessibility, code, notes. Learn the shape once and you can find anything in seconds.
Design TokensThe three-tier token architecture and the rules for extending it.ColorsRamps, semantic roles, contrast, and when colour is allowed to mean something.TypographyThe type scale, the four units, measure, rhythm, and the sizes nothing goes under.Also called Text, Heading, Type ScaleSpacingThe 4px grid, proximity, and how to space things so groups are obvious.Grid & LayoutColumns, gutters, containers, and the widths that keep text readable.Also called Container, Stack, FlexRadiusThe radius scale and the nesting rule that stops corners pinching.ElevationSix levels, what each one means, and why dark mode lightens instead of shadows.IconsSizes, stroke weight, optical alignment, and labelling.Also called Icon, Glyph, PictogramMotionDuration and easing tokens, and the physics they are imitating.AnimationNamed animation patterns — enter, exit, attention, and continuity.BreakpointsWhere the layout changes and why those numbers.AccessibilityThe non-negotiables: contrast, focus, keyboard, semantics, motion.Dark ThemeWhy dark mode is not an inversion, and the rules that make it work.Light ThemeElevation by shadow, hairlines, and keeping brand colour legible on white.