What's inside Tessera

A system, not a sticker sheet

Every part is designed to work with the others, from the colour tokens up to complete page patterns.

  • Semantic colour tokens

    Name colours by purpose (surface, muted, primary, destructive) and each one adapts to light and dark mode without extra classes.

  • One type scale

    Headings, labels and body text share a scale tuned for interfaces.

  • Consistent shapes

    Controls, surfaces and pills each have one radius, everywhere.

  • Keyboard first

    Visible focus, logical tab order and arrow-key navigation where people expect it.

  • Dark mode included

    Every component is checked in both themes before it ships.

  • Page patterns

    Settings, empty states and onboarding flows assembled from the same parts.