Designtokenit: yksi lähde väreille ja typografialle

Designtokenit ovat nimettyjä arvoja kaikille brändin toistamille suunnittelupäätöksille: väreille, kirjasintyypeille, tekstiko’oille, väleille, kulmasäteille, varjoille ja animaatioajoituksille. Sen sijaan että kirjoittaisit #5b21b6 tyylitiedostoon, Figma-tiedostoon ja iOS-sovellukseen, määrität color.brand.700 kerran yhteen tiedostoon ja luot siitä alustojen muodot. Muuta tokenia, niin tuotteet päivittyvät yhdessä. Yksi yhteinen lähde on koko asian ydin.

Miltä designtoken näyttää

Tokenilla on nimi, arvo ja tyyppi. W3C Design Tokens Community Groupin julkaisema muoto kirjoittaa ne JSONina. Ominaisuudet alkavat dollarimerkillä, jotta ne eivät sekoitu ryhmänimiin.

{
  "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" } }
  }
}

Perus-, semanttiset ja komponenttitokenit

Pelkkä värilista on paletti, ei järjestelmä. Vuosia kestävä rakenne koostuu kolmesta tasosta, joista kukin viittaa alempaan. Komponentit eivät koske raaka-arvoihin vaan pyytävät tarkoitusta.

{
  "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}" }
    }
  }
}

Monet tiimit pysähtyvät kahteen tasoon, perus- ja semanttiseen, ja lisäävät komponenttitokeneita vain komponentin todella erotessa. Se pitää tiedoston tarpeeksi pienenä ymmärtää.

Nimeä designtokenit kestämään

Nimet elävät arvoja pidempään. color.purple hajoaa brändin muuttuessa petrooliksi, mutta color.action.primary kestää sen. Nimeä semanttiset tokenit roolin mukaan ja perustokenit arvoa kuvaavasti.

Valitse järjestys, esimerkiksi luokka, rooli, muunnelma ja tila, ja kirjaa se brändin tyylioppaaseen. Nimeämisen yhtenäisyys merkitsee valittua mallia enemmän.

Tokenitiedostosta CSS:ään ja sovelluksiin

Tokenitiedostoa ei toimiteta sellaisenaan. Koontivaihe muuntaa sen alustojen tarvitsemaan muotoon. Style Dictionary on yleisimmin käytetty avoimen lähdekoodin työkalu tähän, ja muutkin lukevat samaa muotoa. Verkossa tulos on yleensä CSS:n mukautettuja ominaisuuksia.

: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;
}

Tailwind v4:n @theme-lohko on itsessään tokenitaso: jokainen --color-*-muuttuja luo apuluokkia. Tailwind-värit näyttää väriskaalan kytkemisen siihen. Sama tiedosto voi tuottaa Swift-vakioita ja Android-resursseja. Monialustatiimissä tokenit maksavat silloin itsensä takaisin.

Tumma tila ja useat brändit

Koska komponentit lukevat vain semanttisia tokeneita, teema on tälle tasolle annettu eri arvosarja. Tumma tila määrittelee uudelleen color.text.default- ja color.surface.page-arvot, toinen brändi color.action.primary-arvon. Komponenteissa mikään ei muutu.

@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;
}

Designtokenien käyttöönotto

1. 1

   Kartoita nykyinen tilanne

   Kerää kaikki käytetyt värit, fonttikoot ja välit. Varaudu yhden heksamerkin verran eroaviin kaksoiskappaleisiin.

2. 2

   Määritä perustokenit

   Tiivistä arvot selkeiksi asteikoiksi. OKLCH pitää väriskaalan askeleet tasaisina. Katso OKLCH selitettynä.

3. 3

   Lisää semanttinen taso

   Nimeä roolit: teksti, pinta, reunus, toiminto ja palaute. Osoita jokainen perustokeniin.

4. 4

   Automatisoi koonti

   Luo CSS ja sovellusresurssit tiedostosta koontivaiheessa, älä käsin.

5. 5

   Suojaa järjestelmä

   Tarkista komponenttien raakaheksavärit lintillä, jotta uusi koodi käyttää tokeneita alusta asti.

Tokenit pitävät tuotteen yhtenäisenä, mutta brändit eriytyvät myös sen ulkopuolisissa julkaisuissa, dioissa ja bannereissa. Gradientlyn brändipaketti säilyttää samat päätökset: väripaletit, otsikko- ja leipätekstifontit, logot ja äänensävyn, jotta Studion suunnitelmat sopivat yhteen. Gradiently toimii ChatGPT:ssä, Claudessa ja muissa etä-MCP-palvelimia tukevissa avustajissa. Rajatulla API-avaimella avustaja voi luoda brändin mukaisia suunnitelmia samasta työtilasta. Brändin yhtenäisyys käsittelee laajempaa käytäntöä.