# 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.

Docs · 24 pages · https://tactileui.dev/docs/foundations

Every page here is Markdown too: add .md to its address. The whole library as JSON: https://tactileui.dev/catalog.json

- [Finishes and themes](https://tactileui.dev/docs/foundations/finishes): Finishes in families of two, a light one and a dark one, switched by one attribute on any element.
- [Tune it to your brand](https://tactileui.dev/docs/foundations/brand): Three optional knobs for the people who ship the kit: a brand colour, a tone for the greys, and the four status colours.
- [Volumes](https://tactileui.dev/docs/foundations/volumes): Two amounts of depth for the same parts.
- [Lamps and aurora](https://tactileui.dev/docs/foundations/lamps): The only colour in the kit is light: a lamp that is on, or a display that is lit.
- [Materials](https://tactileui.dev/docs/foundations/materials): Every surface is a material with a job.
- [Light and depth](https://tactileui.dev/docs/foundations/light): One lamp, high and to the left.
- [Colour](https://tactileui.dev/docs/foundations/colour): There is no brand colour.
- [Type](https://tactileui.dev/docs/foundations/type): The panel is printed, not decorated.
- [Spacing](https://tactileui.dev/docs/foundations/spacing): A 4px grid.
- [Stack](https://tactileui.dev/docs/foundations/stack): A column of things with one gap between them.
- [Grid](https://tactileui.dev/docs/foundations/grid): CSS grid on the 4px scale.
- [Container](https://tactileui.dev/docs/foundations/container): How 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 copy](https://tactileui.dev/docs/foundations/voice): Write like the manual of a good radio: plain, specific, calm.
- [Accessibility](https://tactileui.dev/docs/foundations/accessibility): Accessible 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.
- [States](https://tactileui.dev/docs/foundations/states): Every interactive part has the same set of states, and each looks like something physical.
- [Motion](https://tactileui.dev/docs/foundations/motion): Mechanical, short, and only when something changed.
- [Heading](https://tactileui.dev/docs/foundations/heading): Printed headings in a fixed scale, four steps from the page title down, with an eyebrow label above and nothing stacked over them.
- [Text](https://tactileui.dev/docs/foundations/text): Body, 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.
- [Prose](https://tactileui.dev/docs/foundations/prose): A long-read container that sets headings, lists, links, quotes, code, tables and figures without a class on any of them.
- [Quote](https://tactileui.dev/docs/foundations/blockquote): A pulled quotation ruled off by a groove cut down its left edge, the source printed small beneath.
- [Printed list](https://tactileui.dev/docs/foundations/bullet-list): Ordered and unordered lists with engraved markers in place of the browser’s bullets: a small sunk dot, or a printed step number.
- [Inline code](https://tactileui.dev/docs/foundations/inline-code): A word of code in a small recessed plate, in the display face, that wraps cleanly inside a sentence.
- [Mark](https://tactileui.dev/docs/foundations/mark): A 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.
- [Caption](https://tactileui.dev/docs/foundations/caption): A printed legend under a figure, a table or an image, numbered like a plate in a manual.