Designsystem och temaverktyg
Drygt sextio komponenter och ett tema per varumärke. Grunden under våra nya system.
- Kund
- Vi själva
- Status
- Aktiv
- Vi byggde
- Komponentbibliotek, diagram och temaverktyg
Översikt
Systemen vi bygger nu står på samma komponentbibliotek: drygt sextio delar, från knappar och datumväljare till datatabeller och en kommandopalett, byggda en gång och återanvända i Nexus, Formula och fastighetsplattformen.
Utmaningen
Systemen vi bygger ska bära kundens varumärke, och vi ville inte bygga om knappar och tabeller för varje nytt.
Vad vi byggde
Ett komponentbibliotek där hela utseendet kommer från ett tema, med tangentbordsnavigering och minskad rörelse inbyggt, och verktyg för att ta fram och byta teman.
Hur det används i dag
Nexus, Formula och fastighetsplattformen står på det, var och en med sitt eget tema.
Utseendet bor i ett tema, inte i komponenterna. Färger, hörn, skuggor, typsnitt och hur snabbt saker rör sig ligger i en enda temafil, med ljust och mörkt läge. Byt tema så bär samma system ert varumärke, utan att en enda komponent skrivs om. Temafilen är vanlig CSS, så den går till och med att byta medan appen är igång.
För dem som sitter i systemet hela dagarna märks det på andra sätt. Tabellerna går att sortera, filtrera och söka i, diagrammen hämtar sina färger från samma tema som resten, och ett enda värde gör hela gränssnittet tätare, med mindre luft och mindre text, när en dashboard behöver få plats med mer.
Allt går att använda utan mus. Varje komponent har tangentbordsnavigering och synligt fokus, kommandopaletten styrs med pilarna, Home, End och Enter, och skärmläsare får rätt roller och etiketter. Den som har bett datorn om minskad rörelse slipper animationerna.
För er betyder det att ett nytt system inte börjar från noll. Det ser ut som ert från första skärmen, och det fungerar likadant som allt annat vi bygger på biblioteket.
Så byggde vi det
Komponenterna vet ingenting om färger eller typsnitt. Allt sådant läser de från temat, och därför kan samma knapp se ut som Nexus i ett system och som ert varumärke i nästa.
Ett tema styr utseendet
Färger, hörn, skuggor, typsnitt och rörelse är tokens i en temafil, med ljust och mörkt läge. Komponenterna pekar bara på dem, så ett nytt varumärke är en ny temafil och ingenting annat.
Temat byts medan appen körs
Temafilen är vanlig CSS som kan laddas in i drift, utan att något byggs om.
Lokala teman
En del av sidan kan få egna färger, till exempel en modul i sin egen färg.
Tätare när det behövs
Ett enda värde skalar avstånd och textstorlek i hela gränssnittet, eller i bara en del av det. Hörn, skuggor och linjer ligger kvar.
Tangentbordet först
Tangentbordsnavigering, synligt fokus och rätt ARIA-roller i varje komponent, byggt mot WCAG 2.1 AA. Den som har bett om minskad rörelse slipper animationerna.
Tabeller för riktigt arbete
Sortering, filter, sök och sidbyte i datatabellen, och långa listor som rullar utan att hacka.
Diagram som följer temat
Tidsserier, staplade staplar, värmekartor, trädkartor och sparklines hämtar sina färger från samma tokens som allt annat.
Temaverktyget
Det läser temafilerna, tar fram typade färger till koden och räknar ut om texten på varje färg ska vara svart eller vit för att klara kontrastkraven.
- SvelteKit
- TypeScript
- Tailwind CSS
Galleri
Nyckeltal
- Komponenter i biblioteket
- 60+
- Från knappar och datumväljare till datatabeller, en kommandopalett och en knappsats för PIN-koder.
- Temafil per utseende
- 1
- Färger, hörn, skuggor, typsnitt och rörelse, i ljust och mörkt läge.
- Komponenter som skrivs om för ett nytt varumärke
- 0
- Ett nytt varumärke får ett nytt tema. Komponenterna lämnar vi som de är.
Har ni ett system som alla väntar på?
Berätta vad ni vill bygga, så tar vi det därifrån.
Nästa projekt
Tillverkning · Realtidssystem
