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.
Prova själv
Samma komponenter, ett tema i taget.
Exemplet här är riktiga komponenter ur biblioteket: kort, knappar, flikar, nyckeltal och diagram. Välj ett tema så byter de utseende, och tabellen under visar exakt vilka värden som ändrades. Ingen komponent skrivs om.
Gäller tills du stänger fliken. Bara du ser det.
Grundpaketet i NIT.UI med NIT-blått. Här börjar alla våra appar.
Kontrast för brödtext: 17,7:1. Dämpad text: 4,8:1.
Veckans leveranser
AktivTre order väntar på packning. Nästa bil går klockan två.
Allt som hör till projektet, på ett ställe.
Sparat
Ändringen syns direkt.Det här ändrades 136 värden
Källa: NIT.UI-norinit-theme packages/themes/nit/tokens.css @ 374831e
| Namn | Norin IT | NIT |
|---|---|---|
--accent | #35312c | #f4f4f5 |
--accent-foreground | #ede6db | #18181b |
--background | #0f0d0b | #ffffff |
--border | #75564e | #e4e4e7 |
--card | #282420 | #ffffff |
--card-foreground | #ede6db | #18181b |
--chart-1 | #f97316 | #3b82f6 |
--chart-2 | #86b6dc | #14b8a6 |
--chart-3 | #e8b04a | #f59e0b |
--chart-4 | #7cc48f | #8b5cf6 |
--chart-5 | #c79ab8 | #ec4899 |
--chart-6 | #827b72 | #64748b |
--chart-axis | #c4bbae | #71717a |
--chart-cat-1 | #f97316 | #3b82f6 |
--chart-cat-10 | #7cc48f | #8b5cf6 |
--chart-cat-2 | #86b6dc | #14b8a6 |
--chart-cat-3 | #e8b04a | #f59e0b |
--chart-cat-4 | #7cc48f | #8b5cf6 |
--chart-cat-5 | #c79ab8 | #ec4899 |
--chart-cat-6 | #827b72 | #64748b |
--chart-cat-7 | #f97316 | #3b82f6 |
--chart-cat-8 | #86b6dc | #14b8a6 |
--chart-cat-9 | #e8b04a | #f59e0b |
--chart-current | #f97316 | #3771d1 |
--chart-exempt | #6b655e | #aeaeb4 |
--chart-grid | #75564e | #e4e4e7 |
--chart-negative | #f2735f | #dc2626 |
--chart-other | #d0d0d0 | #373737 |
--chart-positive | #7cc48f | #16a34a |
--chart-previous | #6d6d6d | #8a8a8a |
--chart-projected | #6e391a | #a7c9ff |
--chart-rank-1 | #422516 | #cee1ff |
--chart-rank-2 | #5e3119 | #b5d1ff |
--chart-rank-3 | #7a3e1c | #9ec3ff |
--chart-rank-4 | #994b1d | #85b3fd |
--chart-rank-5 | #b7581d | #6ea3fb |
--chart-rank-6 | #d9661b | #5492f9 |
--chart-rank-7 | #f97316 | #3b82f6 |
--chart-ref-line | #c4bbae | #71717a |
--chart-seq-1 | #422516 | #cee1ff |
--chart-seq-2 | #6c381b | #a9caff |
--chart-seq-3 | #994b1d | #85b3fd |
--chart-seq-4 | #c75e1c | #629cfa |
--chart-seq-5 | #f97316 | #3b82f6 |
--chart-text | #c4bbae | #71717a |
--chart-volume | #86b6dc | #14b8a6 |
--destructive | #f2735f | #dc2626 |
--destructive-foreground | #0f0d0b | #ffffff |
--destructive-soft-foreground | #f2735f | #dc2626 |
--foreground | #ede6db | #18181b |
--info | #86b6dc | #3b82f6 |
--info-foreground | #0f0d0b | #ffffff |
--info-soft-foreground | #86b6dc | #3b82f6 |
--input | #827b72 | #e4e4e7 |
--muted | #191614 | #f4f4f5 |
--muted-foreground | #c4bbae | #71717a |
--muted-foreground-subtle | #c4bbae | #71717a |
--popover | #282420 | #f4f4f5 |
--popover-foreground | #ede6db | #18181b |
--primary | #9a3412 | #1c69e3 |
--primary-foreground | #ede6db | #f8f8f8 |
--primary-soft-foreground | #f97316 | #1c69e3 |
--ring | #f97316 | #1c69e3 |
--secondary | #35312c | #33548c |
--secondary-foreground | #ede6db | #f8f8f8 |
--state-tile-bad-bg | #450a0a | #fef2f2 |
--state-tile-bad-foreground | #fca5a5 | #991b1b |
--state-tile-brand-bg | #1e120e | #edf4fe |
--state-tile-brand-foreground | #f97316 | #1c69e3 |
--state-tile-good-bg | #052e16 | #f0fdf4 |
--state-tile-good-foreground | #86efac | #166534 |
--state-tile-info-bg | #172554 | #eff6ff |
--state-tile-info-foreground | #93c5fd | #1e40af |
--state-tile-neutral-bg | #191614 | #f4f4f5 |
--state-tile-neutral-foreground | #c4bbae | #71717a |
--state-tile-warning-bg | #451a03 | #fffbeb |
--state-tile-warning-foreground | #fcd34d | #92400e |
--state-tint-bad | #f2735f | #dc2626 |
--state-tint-brand | #9a3412 | #1c69e3 |
--state-tint-good | #7cc48f | #16a34a |
--state-tint-info | #86b6dc | #3b82f6 |
--state-tint-neutral | #c4bbae | #71717a |
--state-tint-warning | #e8b04a | #f59e0b |
--success | #7cc48f | #16a34a |
--success-foreground | #0f0d0b | #ffffff |
--success-soft-foreground | #7cc48f | #16a34a |
--warning | #e8b04a | #f59e0b |
--warning-foreground | #0f0d0b | #18181b |
--warning-soft-foreground | #e8b04a | #18181b |
--font-family-display | 'Newsreader Display', 'Newsreader Fallback', 'Georgia', serif | ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' |
--font-family-mono | ui-monospace, 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', monospace | ui-monospace, 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace |
--font-family-sans | 'Inter', 'Inter Fallback', sans-serif | ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' |
--font-family-special | 'Inter', 'Inter Fallback', sans-serif | ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' |
--radius-alert | 0 | 0.375rem |
--radius-avatar | 0 | 9999px |
--radius-badge | 0 | 9999px |
--radius-btn | 0 | 0.25rem |
--radius-btn-pill | 0 | 9999px |
--radius-card | 0 | 0.375rem |
--radius-checkbox | 0 | 0.125rem |
--radius-chip | 0 | 0.125rem |
--radius-chip-pill | 0 | 9999px |
--radius-input | 0 | 0.25rem |
--radius-lg | 0 | 0.375rem |
--radius-md | 0 | 0.25rem |
--radius-modal | 0 | 0.375rem |
--radius-popover | 0 | 0.375rem |
--radius-progress | 0 | 9999px |
--radius-sm | 0 | 0.125rem |
--radius-switch | 0 | 9999px |
--radius-tooltip | 0 | 0.25rem |
--radius-xl | 0 | 0.5rem |
--radius-2xl | 0 | 1rem |
--duration-fast | 0.2s | 0.1s |
--duration-normal | 0.3s | 0.15s |
--duration-slow | 0.5s | 0.3s |
--gradient-brand | linear-gradient(rgb(154, 52, 18), rgb(154, 52, 18)) | linear-gradient(oklch(0.55 0.2 260), oklch(0.55 0.2 260)) |
--hover-lift | 0 | -2px |
--hover-scale | 1 | 1.02 |
--shadow-2xl | rgba(8, 6, 4, 0.65) 0px 32px 64px -20px | rgba(0, 0, 0, 0.25) 0px 25px 50px -12px |
--shadow-lg | rgba(8, 6, 4, 0.55) 0px 12px 32px -12px | rgba(0, 0, 0, 0.1) 0px 10px 15px -3px |
--shadow-md | none | rgba(0, 0, 0, 0.1) 0px 4px 6px -1px |
--shadow-sm | none | rgba(0, 0, 0, 0.05) 0px 1px 2px 0px |
--shadow-xl | rgba(8, 6, 4, 0.6) 0px 24px 48px -16px | rgba(0, 0, 0, 0.1) 0px 20px 25px -5px |
--norinit-brand-ink | #f97316 | #1c69e3 |
--norinit-brand-hover | #b0400f | #1c69e3 |
--norinit-brand-faint | #9a341226 | #1c69e326 |
--norinit-brand-soft | #9a341266 | #1c69e366 |
--norinit-brand-strong | #9a3412a6 | #1c69e3a6 |
--norinit-surface-low | #35312c | #f4f4f5 |
--norinit-outline | #aa8984 | #e4e4e7 |
--norinit-outline-dim | #75564e | #e4e4e7 |
--norinit-credit-color | #f973168c | #1c69e38c |
--norinit-logo-shape | #6e6e6e | #71717a |
--norinit-logo-shape-hover | #8a8a8a | #45454b |
--norinit-logo-dot | #4d4c4c | #b8b8bd |
Värdena kommer ur de riktiga temafilerna. Norin IT, NIT och Nexus är våra egna; CE Formula, Polarstigen, GnosjöBo och Gislatorp är kunders, visade med deras tillstånd.
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
