Design Language

A systematic approach to visual design, built on a three-tier token architecture that enables consistent theming, dark mode, and density scaling across every component.

Three-Tier Token Architecture

Tessera UI’s design system is built on a strict token hierarchy. Each tier serves a specific purpose, creating a clear path from raw values to themed component styles.

Tier 1

Reference Tokens

Raw palette values. Immutable across themes. Never used directly by components.

—ts-ref-primary-600: #1a73e8

Tier 2

Semantic Tokens

Purpose-driven aliases to reference tokens. These are what components consume. Remapped in dark mode.

—ts-color-interactive-primary: var(—ts-ref-primary-600)

Tier 3

Component Tokens

Per-component overrides defined on :host. Consumers can customize individual component styles.

—ts-button-bg: var(—ts-color-interactive-primary)

This separation means:

Themes only need to remap semantic tokens (Tier 2). Reference tokens stay fixed.
Customization can happen at any level — override a reference token to change the entire palette, a semantic token to adjust one role, or a component token for surgical precision.
Dark mode remaps semantic tokens via [data-theme="dark"]. No component CSS changes are needed.

Foundations

Explore each foundation of the design system in depth.

Color

Reference palettes, semantic roles, containers, state layers, and theme previews.

AgPlus Jakarta Sans

Typography

Type scale, font families, weights, and M3-aligned role specimens.

Layout

Spacing scale, density modes, grid system, and breakpoints.

Shapes

Radius scale, shape families, frosted glass, and z-index scale.

Elevation

Shadow scale, dark mode tint levels, layering model, and transition patterns.

Motion

Duration tokens, easing curves, loading animations, and staggered entrances.

Global Configuration

Tessera UI uses data-* HTML attributes for global configuration — no JavaScript config objects required.

Attribute	Values	Purpose
`data-theme`	`light` (default), `dark`, `high-contrast`	Theme selection
`data-density`	`comfortable` (default), `compact`, `spacious`	Spacing density
`data-icons`	`lucide` (default)	Icon set selection
`dir`	`ltr` (default), `rtl`	Text direction

<!-- Example: dark theme with compact density -->
<html data-theme="dark" data-density="compact">
  <body>
    <ts-button variant="filled">Save Changes</ts-button>
  </body>
</html>