Docs · 24 pages
Foundations
The language every part is written in: the finishes and volumes, the lamps, the materials and the light, colour, type, spacing and voice, and the states, motion and access every part keeps.
- Finishes and themesFinishes in families of two, a light one and a dark one, switched by one attribute on any element.
- Tune it to your brandThree optional knobs for the people who ship the kit: a brand colour, a tone for the greys, and the four status colours.
- VolumesTwo amounts of depth for the same parts.
- Lamps and auroraThe only colour in the kit is light: a lamp that is on, or a display that is lit.
- MaterialsEvery surface is a material with a job.
- Light and depthOne lamp, high and to the left.
- ColourThere is no brand colour.
- TypeThe panel is printed, not decorated.
- SpacingA 4px grid.
- StackA column of things with one gap between them.
- GridCSS grid on the 4px scale.
- ContainerHow wide a page, a column of text and a part may be, and how a part answers to the space it is in rather than to the screen.
- Voice and copyWrite like the manual of a good radio: plain, specific, calm.
- AccessibilityAccessible as a rule, not a pass: native elements, printed contrast measured in aluminium and graphite, a keyboard route to every value, and motion that can stop.
- StatesEvery interactive part has the same set of states, and each looks like something physical.
- MotionMechanical, short, and only when something changed.
- HeadingPrinted headings in a fixed scale, four steps from the page title down, with an eyebrow label above and nothing stacked over them.
- TextBody, lead and small, set in the kit’s one typeface with the measure and the leading fixed, so a paragraph reads the same in every finish.
- ProseA long-read container that sets headings, lists, links, quotes, code, tables and figures without a class on any of them.
- QuoteA pulled quotation ruled off by a groove cut down its left edge, the source printed small beneath.
- Printed listOrdered and unordered lists with engraved markers in place of the browser’s bullets: a small sunk dot, or a printed step number.
- Inline codeA word of code in a small recessed plate, in the display face, that wraps cleanly inside a sentence.
- MarkA highlighted phrase as a lit strip behind the words: the amber lamp turned low, for search hits and the one thing a sentence must not lose.
- CaptionA printed legend under a figure, a table or an image, numbered like a plate in a manual.