Skip to content

Foundations

The building blocks of the system and the decisions that belong to no single component but hold for all of them. Each foundation is specified once, owns semantic tokens, carries its own accessibility contract and decision log, and every component following it aliases its tokens instead of describing it again.

From packages/components/specs/foundations/<id>.spec.json and apps/docs/content/foundations/<id>.md. Each page draws the tokens the foundation is built from (palettes, scales, text styles) straight from tokens/, in every mode and platform; the components listed under each foundation are derived from the component tokens; contrast is computed from the resolved tokens in every platform and mode.

All foundations

  • Color draft

    The palettes the system draws from and the mapped color roles every component paints with, in every mode: the Figma library's colors, as they are.

    v3.0.0 707 tokens owned 16 specimens 17 rules contrast 3.28:1 minimum followed by Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox group, Checkbox, Divider, Dropdown, Icon button, Icon, Number field, Pagination, Progress bar, Radio group, Search field, Select, Skeleton, Slider, Spinner, Switch, Text field, Textarea

  • Typography draft

    The font families and their size and weight scales from the Figma library, plus the line heights and letter spacing components set their text with.

    v0.3.1 37 tokens owned 7 specimens 7 rules followed by Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox group, Checkbox, Dropdown, Number field, Pagination, Progress bar, Radio group, Search field, Select, Slider, Spinner, Switch, Text field, Textarea

  • Spacing and sizing draft

    The spacing scale and the element sizes from the Figma library, which components pick their paddings, gaps, heights and icon sizes from.

    v0.2.0 40 tokens owned 2 specimens 6 rules followed by Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox group, Checkbox, Divider, Dropdown, Icon button, Icon, Number field, Pagination, Progress bar, Radio group, Search field, Select, Skeleton, Slider, Spinner, Switch, Text field, Textarea

  • Shape draft

    Corner radii and stroke widths: how round components are and how thick their borders are.

    v0.2.0 14 tokens owned 2 specimens 5 rules followed by Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox group, Checkbox, Divider, Dropdown, Icon button, Number field, Pagination, Progress bar, Radio group, Search field, Select, Skeleton, Slider, Spinner, Switch, Text field, Textarea

  • Elevation and effects draft

    Opacity, blur, drop shadow and shadow colors from the Figma library, and why no component uses them yet.

    v0.2.0 31 tokens owned 4 specimens 6 rules followed by Skeleton, Spinner

  • Motion draft

    Durations and easing curves, the state transitions of controls, and how motion gives way when people ask for less of it.

    v0.2.0 3 tokens owned 2 specimens 6 rules followed by Accordion, Breadcrumb, Button, Checkbox group, Checkbox, Dropdown, Icon button, Number field, Pagination, Progress bar, Radio group, Search field, Select, Skeleton, Slider, Spinner, Switch, Text field, Textarea

  • Iconography draft

    The icon font, the one style every icon is drawn in, its sizes and colors, and when an icon needs a name.

    v0.2.1 5 tokens owned 2 specimens 6 rules followed by Accordion, Alert, Breadcrumb, Button, Dropdown, Icon button, Icon, Pagination, Search field, Select

  • Focus ring draft

    The one visible focus indicator every focusable component shows on keyboard focus.

    v0.2.0 3 tokens owned 7 rules contrast 5.46:1 minimum followed by Accordion, Breadcrumb, Button, Checkbox group, Checkbox, Dropdown, Icon button, Number field, Pagination, Radio group, Search field, Select, Slider, Switch, Text field, Textarea

  • Code draft

    The syntax highlighting colors of code, one per category, and the states of marked lines, readable on every surface in every mode.

    v0.1.1 17 tokens owned 2 specimens 13 rules contrast 4.51:1 minimum no component follows it yet