Export · #415

Tokens, read from the stylesheet

14 colours, 5 radii and 0 font stacks, parsed out of the @theme block this site compiles. Values are passed through unmodified — an export that normalises hex to HSL is an export you cannot diff against the source.

Download tokens.json ← All exports

The colours, as shipped

--color-bg#06070b
--color-panel#0b0d14
--color-raised#10131d
--color-edgergba(255, 255, 255, 0.08)
--color-edge-strongrgba(255, 255, 255, 0.16)
--color-ink#edf0f7
--color-ink-dim#9aa3b5
--color-ink-faint#747b87
--color-accent#8b5cf6
--color-accent-2#22d3ee
--color-accent-3#f472b6
--color-mint#34d399
--color-amber#fbbf24
--color-danger#f87171

The file this endpoint returns (1.6 KB, first 60 lines)

{
  "$description": "Motif UI design tokens, generated from the stylesheet this site compiles.",
  "$extensions": {
    "com.motif.source": "src/app/globals.css @theme block"
  },
  "color": {
    "bg": {
      "$type": "color",
      "$value": "#06070b"
    },
    "panel": {
      "$type": "color",
      "$value": "#0b0d14"
    },
    "raised": {
      "$type": "color",
      "$value": "#10131d"
    },
    "edge": {
      "$type": "color",
      "$value": "rgba(255, 255, 255, 0.08)"
    },
    "edge-strong": {
      "$type": "color",
      "$value": "rgba(255, 255, 255, 0.16)"
    },
    "ink": {
      "$type": "color",
      "$value": "#edf0f7"
    },
    "ink-dim": {
      "$type": "color",
      "$value": "#9aa3b5"
    },
    "ink-faint": {
      "$type": "color",
      "$value": "#747b87"
    },
    "accent": {
      "$type": "color",
      "$value": "#8b5cf6"
    },
    "accent-2": {
      "$type": "color",
      "$value": "#22d3ee"
    },
    "accent-3": {
      "$type": "color",
      "$value": "#f472b6"
    },
    "mint": {
      "$type": "color",
      "$value": "#34d399"
    },
    "amber": {
      "$type": "color",
      "$value": "#fbbf24"
    },
    "danger": {
      "$type": "color",

What the format commits to

The W3C design-token format uses $type and $value keys, which is what Figma, Style Dictionary and Tokens Studio read. A colour is a colour, a radius is a dimension, and a font stack is an array — the shapes the standard defines, not a shape of our choosing.

What it does not include

Component-level tokens. The catalog stores each component's metadata and its demo key, not its source, so a component's private variables are not in the file — exporting them would mean inventing them. The five exports that do exist are listed on the integrations page, alongside the bridges that are deliberately missing.

13 exports are live in this build. The endpoint is a plain route handler, so it reports what the code computes and carries a five-minute shared cache rather than a build artefact nobody re-checks.