Case / Designsystem för soda

Eget bolag · Designsystem och kod

Designsystem för soda

Vi är två i soda, ett bolag för design och kod. Identiteten skulle leva på en sajt, i en tidsapp och i mallar för offerter och sociala medier. En stilguide som PDF hade blivit inaktuell första veckan.

Därför är systemet byggt så att Figma bestämmer och koden speglar. Samma namn i alla led och en regel för kontrast som ingen behöver komma ihåg.

Typ: Eget bolag
Roll: Designsystem, UI och kod
Verktyg: Figma-variabler, Astro, CSS, TypeScript, SwiftUI
Tid: Oktober 2026

Variablerna i Figma bredvid samma tokens i kod

01Caset på 30 sekunder

Utmaningen

En identitet på tre ställen.

En sajt i Astro, en tidsapp i SwiftUI och mallar i Figma.

Greppet

Figma bestämmer, koden speglar.

Tre lager och samma namn hela vägen.

Resultatet

Ett färgbyte är ett värde.

22 semantiska färger i två lägen. Kontrastregeln går inte att bryta av misstag.

02Tre lager

Komponenter pratar bara med semantiken.

01
Primitiv
tomat/500,
02
Semantik
color/bg/accent. Vad den gör, med ett värde per läge.
03
Komponent
Knapp, Accent. Var den används.

I Figma

Fyra samlingar för primitiver, färg, storlek och typografi. 21 primitiver och 22 semantiska färger.

Varför

Byts en färg ändras ett värde och inte fyrtio ramar. Mörkt läge är ett andra värde på samma namn, inte ett nytt bibliotek.

03Samma namn

Översättningen är en regel, inte ett beslut.

Figma	Webb (CSS)	App (SwiftUI)
color/bg/page	--color-bg-page	Theme.canvas
color/text/primary	--color-text-primary	Theme.text
color/button/primary/bg	--color-button-primary-bg	Theme.buttonPrimary
color/text/on-accent	--color-text-on-accent	onAccent()

Webben följer Figmas namn exakt. Appen följer Swifts namnvana men har samma värden och regler. Varje tokenfil börjar med att säga var källan finns och att ändringar görs i Figma först.

04Kontrasten

Kontrasten bestäms en gång.

Valt

Text på tomat, smör och sardin är alltid oxblod.

4,84:1 på tomat och mer på de ljusare ytorna. Regeln står i variabelns beskrivning i Figma, är en egen token i webben och en modifierare i appen. Där fungerar den i båda lägena eftersom ytorna inte byter färg.

Figma · CSS · SwiftUI

Vägar jag valde bort

Vit text på tomat

2,88:1. Underkänt.

Tomat som textfärg på creme

2,69:1. Underkänt.

Jag mätte alla par innan paletten låstes. Tomat blev en yta och inte en textfärg. Den enda plats där tomat får vara text är på oxblod.

05Komponenterna

Samma namn i Figma och i koden.

Knapp, casekort, tjänstekort, frågerad, processteg och resten finns som komponenter i Figma och som komponenter med samma namn i webben, 19 stycken. Varianterna är desamma, så en mockup går att läsa som en specifikation.

Komponentsidan i Figma med varianter — 01 Komponenterna i Figma med varianter och dokumentation.

Samma komponenter på den byggda sajten — 02 Samma komponenter på sajten.

06Utanför webben

Från Figma till installerad app på två dagar.

Soda Time är en tidsapp vi använder i bolaget. Den gjordes om i Figma med samma variabler och kodades dagen efter. Kontrastregeln följde med utan att skrivas om.

07Resultatet

Ett system, tre ytor.

semantiska färger

Ett värde per läge, ljust och mörkt

4,84:1

lägsta kontrast för text på färg

Oxblod på tomat, godkänt AA

ytor ur samma källa

Sajt, app och mallar

08Det jag inte löst än

Fungerar

Ett färgbyte görs i Figma och i en fil per plattform.

Kontrastregeln går inte att bryta av misstag.

En mockup går att läsa som en specifikation.

Kvar

Mörkt läge är preliminärt och slås inte på av systemet än.

Delningsbilderna har egna kopior av fyra färger i TypeScript. Nästa steg är en tokenfil som både CSS och TypeScript läser från.

Speglingen skrivs för hand. Med fler plattformar ska den genereras ur Figmas variabler.

Nästa case · Eget verktyg · MCP och innehållsflödeBloggkoppling för Claude