Tokens

Tokens and skins

A skin is one value for each of the 15 theme tokens. They are the Kit Harness Protocol's: a host sends them in ui/initialize and ui/theme, and every kit that follows the protocol takes the skin. Make one below.

Skin workshop

Start from

Primary colour

Control radius 8px

Card radius 12px

Clipboard

Arrange

Quarterly planDraft · edited 2 minutes ago

Published Shared

Snap to grid

Autosaved

Your changes are kept as you work.

Contrast AA

Text on the surface17.4 / 4.5
Muted text on the surface6.8 / 4.5
Text on panels16.7 / 4.5
Text on the primary6.6 / 4.5
Primary as text or a focus ring6.6 / 3
Danger on the surface4.5 / 3

What a host sends

{
  "theme": {
    "colorScheme": "light",
    "tokens": {
      "--kit-font-sans": "Inter, system-ui, -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', sans-serif",
      "--kit-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "--kit-surface": "#ffffff",
      "--kit-surface-muted": "#fafaf9",
      "--kit-canvas": "#f6f5f4",
      "--kit-text": "#1a1a1a",
      "--kit-text-muted": "#5d5b54",
      "--kit-border": "#e5e3df",
      "--kit-primary": "#5645d4",
      "--kit-primary-text": "#ffffff",
      "--kit-primary-soft": "rgba(86, 69, 212, 0.1)",
      "--kit-danger": "#e03131",
      "--kit-radius-control": "8px",
      "--kit-radius-card": "12px",
      "--kit-shadow-card": "0 1px 2px rgba(15, 15, 15, 0.06), 0 4px 16px rgba(15, 15, 15, 0.06)"
    }
  }
}

Theme tokens

Sent by hosts. Values are those of the Paper skin, the one this page wears; click a token to copy it.

Component tokens

Tessera's own: sizes of the editor chrome, and the colours of meters and charts in each colour scheme.