Designtokens: en enda källa för färg och typografi

Designtokens är namngivna värden för varje designbeslut som ett varumärke upprepar: färger, typsnitt, typstorlekar, avstånd, hörnradier, skuggor och animationstider. I stället för att skriva #5b21b6 i ett formatblad, en Figma-fil och en iOS-app definierar du color.brand.700 en gång, i en fil, och genererar varje plattforms format från den. Ändra tokenen så uppdateras alla produkter tillsammans. Den enda sanningskällan är hela poängen.

Så ser en designtoken ut

En token har ett namn, ett värde och en typ. Formatet som publicerats av W3C Design Tokens Community Group skriver dem som JSON, med egenskaper som börjar med ett dollartecken så att de inte kan krocka med gruppnamn.

{
  "color": {
    "violet": {
      "100": { "$type": "color", "$value": "#ede9fe" },
      "500": { "$type": "color", "$value": "#8b5cf6" },
      "700": { "$type": "color", "$value": "#6d28d9" },
      "900": { "$type": "color", "$value": "#4c1d95" }
    },
    "ink": { "$type": "color", "$value": "#14121f" },
    "paper": { "$type": "color", "$value": "#faf8ff" }
  },
  "font": {
    "heading": { "$type": "fontFamily", "$value": ["Fraunces", "Georgia", "serif"] },
    "body": { "$type": "fontFamily", "$value": ["Inter", "system-ui", "sans-serif"] }
  },
  "radius": {
    "control": { "$type": "dimension", "$value": { "value": 10, "unit": "px" } }
  },
  "duration": {
    "quick": { "$type": "duration", "$value": { "value": 160, "unit": "ms" } }
  }
}

Primitiva, semantiska och komponenttokens

En platt lista med färger är en palett, inte ett system. Strukturen som håller i åratal har tre nivåer, var och en refererar till den under. Komponenter rör aldrig råa värden; de ber om ett syfte.

{
  "color": {
    "action": {
      "primary": { "$type": "color", "$value": "{color.violet.700}" },
      "primary-hover": { "$type": "color", "$value": "{color.violet.900}" }
    },
    "text": {
      "default": { "$type": "color", "$value": "{color.ink}" },
      "on-action": { "$type": "color", "$value": "{color.paper}" }
    },
    "surface": {
      "page": { "$type": "color", "$value": "{color.paper}" },
      "tint": { "$type": "color", "$value": "{color.violet.100}" }
    }
  }
}

Många team stannar vid två nivåer, primitiv och semantisk, och lägger bara till komponenttokens där en komponent verkligen skiljer sig. Det håller filen lagom liten för att förstå.

Namnge designtokens så att de håller

Namn överlever värden. En token som heter color.purple går sönder den dag varumärket blir blågrönt; en token som heter color.action.primary överlever det. Namnge semantiska tokens efter roll, och låt primitiva namn beskriva värdet.

Välj ett mönster, som kategori, sedan roll, sedan variant, sedan tillstånd, och skriv ner det i din varumärkesriktlinje. Konsekvens i namngivningen betyder mer än vilket mönster du väljer.

Från tokenfil till CSS och appar

Tokenfilen levereras inte som den är. Ett byggsteg omvandlar den till vad varje plattform behöver. Style Dictionary är det mest använda öppna verktyget för detta, och andra läser samma format. För webben är utdata oftast anpassade CSS-egenskaper.

:root {
  --color-violet-100: #ede9fe;
  --color-violet-700: #6d28d9;
  --color-violet-900: #4c1d95;
  --color-ink: #14121f;
  --color-paper: #faf8ff;

  --color-action-primary: var(--color-violet-700);
  --color-text-default: var(--color-ink);
  --color-surface-page: var(--color-paper);

  --font-heading: Fraunces, Georgia, serif;
  --radius-control: 10px;
  --duration-quick: 160ms;
}

.button {
  background: var(--color-action-primary);
  color: var(--color-paper);
  border-radius: var(--radius-control);
  transition: background var(--duration-quick) ease;
}

Om du använder Tailwind v4 är @theme-blocket i sig ett tokenlager: varje --color-*-variabel blir verktygsklasser. Tailwind-färger visar hur du kopplar in en tokenramp i det. Samma fil kan också ge Swift-konstanter och Android-resurser, vilket är där tokens lönar sig för team på flera plattformar.

Mörkt läge och flera varumärken

Eftersom komponenter bara läser semantiska tokens är ett tema bara en annan uppsättning värden för det lagret. Mörkt läge omdefinierar color.text.default och color.surface.page; ett andra varumärke omdefinierar color.action.primary. Ingenting i komponenterna ändras.

@media (prefers-color-scheme: dark) {
  :root {
    --color-text-default: #e9e5f5;
    --color-surface-page: #0b0a14;
    --color-action-primary: var(--color-violet-500);
  }
}

[data-brand="harbour"] {
  --color-action-primary: #0f766e;
}

Införa designtokens

1. 1

   Inventera det som finns

   Samla varje färg, typstorlek och avståndsvärde som används. Räkna med dubbletter som skiljer sig med en hexsiffra.

2. 2

   Definiera primitiver

   Reducera dem till tydliga skalor. Att bygga färgramper i OKLCH håller stegen jämna; se OKLCH förklarat.

3. 3

   Lägg till det semantiska lagret

   Namnge roller: text, yta, kant, handling, återkoppling. Peka var och en på en primitiv.

4. 4

   Automatisera bygget

   Generera CSS och appresurser från filen i ditt bygge, aldrig för hand.

5. 5

   Bevaka det

   Lintra efter råa hexvärden i komponenter, så att ny kod använder tokens från dag ett.

Tokens håller produkten konsekvent, men varumärken glider också isär i grafiken som görs utanför den: inlägg, bildspel, banners. Ett Gradiently-varumärkeskit håller samma beslut, dina färgpaletter, rubrik- och brödtypsnitt, logotyper och röst, så att designer gjorda i Studio matchar. Och eftersom Gradiently fungerar inuti ChatGPT, Claude och andra assistenter som stöder MCP-servrar på distans kan en assistent med en begränsad API-nyckel skapa designer i varumärkets stil från samma arbetsyta. Varumärkeskonsekvens går igenom den bredare vanan.