# Designtokens: en enda källa för färg och typografi [Canonical HTML page](https://gradiently.design/sv/guide/design-tokens) En varumärkesfärg som finns i fyrtio filer kommer att glida isär. En token bor på ett ställe och varje plattform läser från den. Så strukturerar du designtokens, namnger dem så att de håller och levererar dem till kod och designverktyg. ## The short version - Designtokens är namngivna, plattformsneutrala värden för designbeslut som färger, typsnittsfamiljer, storlekar, avstånd, radier, skuggor och rörelsetider. - De flesta tokensystem använder tre nivåer: primitiva tokens håller råa värden, semantiska tokens beskriver ett syfte och komponenttokens tillämpar syften på specifika delar. - Formatet från W3C Design Tokens Community Group lagrar tokens som JSON med egenskaperna $value och $type och refererar till andra tokens med klammerparenteser. - Verktyg som Style Dictionary omvandlar en tokenfil till anpassade CSS-egenskaper, JavaScript samt resurser för iOS och Android. - Mörkt läge och flera varumärken blir en fråga om att byta värdena bakom semantiska tokens, medan komponenterna förblir oförändrade. **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](https://www.w3.org/community/design-tokens/) skriver dem som JSON, med egenskaper som börjar med ett dollartecken så att de inte kan krocka med gruppnamn. ```json { "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 tokens i communitygruppens format. Grupper kan nästlas fritt; sökvägen, som color.violet.700, blir tokenens namn. - color.violet.100: #ede9fe - color.violet.500: #8b5cf6 - color.violet.700: #6d28d9 - color.violet.900: #4c1d95 - color.ink: #14121f - color.paper: #faf8ff Färgtokensen ovan som färgrutor. Det här är råa ingredienser: ingenting säger ännu vilken som är en knapp eller en rubrik. ## 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. | Nivå | Exempelnamn | Värde | Ändras när | | --- | --- | --- | --- | | Primitiv | `color.violet.700` | `#6d28d9` | Paletten designas om | | Semantisk | `color.action.primary` | `{color.violet.700}` | En roll flyttas till en annan färg | | Semantisk | `color.text.default` | `{color.ink}` | Mörkt läge, ett nytt varumärke | | Komponent | `button.primary.background` | `{color.action.primary}` | En komponent behöver ett undantag | Referenser i klammerparenteser är alias. Ändra color.violet.700 så följer varje token som pekar på den. ```json { "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}" } } } } ``` Semantiska tokens beskriver vad en färg är till för. Det är nivån designers och utvecklare bör prata på. 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. ### Namn som åldras dåligt - `color.purple` som används för knappar - `text.dark`, som är ljus i mörkt läge - `spacing.16` som används som layoutregel - `blue2`, `blueNew`, `blueFinal` - `hero.gradient.lisa` uppkallad efter en person ### Namn som håller - `color.action.primary` - `color.text.default` - `space.section` som pekar på `{space.16}` - En numrerad skala som `blue.100` till `blue.900` - `gradient.hero` med sina stopp som tokens Välj ett mönster, som kategori, sedan roll, sedan variant, sedan tillstånd, och skriv ner det i din [varumärkesriktlinje](https://gradiently.design/sv/guide/brand-style-guide). 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. ```css :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; } ``` Genererad utdata. Alias blir var()-referenser, så det semantiska lagret överlever in i webbläsaren. Se [CSS-variabler för teman](https://gradiently.design/sv/guide/css-custom-properties-theming). Om du använder Tailwind v4 är `@theme`-blocket i sig ett tokenlager: varje `--color-*`-variabel blir verktygsklasser. [Tailwind-färger](https://gradiently.design/sv/guide/tailwind-colors) 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. ```css @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; } ``` Två åsidosättningar, inga komponentändringar. Gradienter förtjänar också egna mörka värden; [gradienter i mörkt läge](https://gradiently.design/sv/guide/dark-mode-gradients) förklarar hur du trimmar dem. > **Tokens i designverktyg** Figma Variables stöder samlingar och lägen, som passar snyggt mot primitiva och semantiska tokens och ljusa och mörka teman. Behåll tokenfilen som källa och synka in i designverktyget, inte tvärtom, annars är de oense inom en månad. ## Införa designtokens 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. **Definiera primitiver** Reducera dem till tydliga skalor. Att bygga färgramper i OKLCH håller stegen jämna; se [OKLCH förklarat](https://gradiently.design/sv/guide/oklch-explained). 3. **Lägg till det semantiska lagret** Namnge roller: text, yta, kant, handling, återkoppling. Peka var och en på en primitiv. 4. **Automatisera bygget** Generera CSS och appresurser från filen i ditt bygge, aldrig för hand. 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](https://gradiently.design/sv/guide/brand-consistency) går igenom den bredare vanan. ## FAQ ### Vad är designtokens? Namngivna värden för designbeslut som färger, typsnitt, avstånd, radier och rörelse, lagrade i en plattformsneutral fil och omvandlade till CSS, appkod och variabler i designverktyg. ### Vad är skillnaden mellan primitiva och semantiska tokens? Primitiva tokens håller råa värden, som `color.violet.700`. Semantiska tokens beskriver ett syfte, som `color.action.primary`, och pekar på en primitiv. ### Är designtokens samma sak som CSS-variabler? Nej. Tokens är källan, lagrad i ett neutralt format som JSON; anpassade CSS-egenskaper är en utdata som genereras från dem, vid sidan av utdata för andra plattformar. ### Finns det ett standardformat för designtokens? W3C Design Tokens Community Group publicerar ett JSON-format som använder $value, $type och alias med klammerparenteser, som verktyg som Style Dictionary kan läsa. ### Hur hanterar designtokens mörkt läge? Komponenter läser semantiska tokens, och ett mörkt tema ger andra värden för de tokens, så komponenterna behöver inga ändringar.