Erfarenhet
Arbetsförmedlingen
Komponent och dokumentation i ett offentligt designsystem
- Roll
- Frontend/UX Engineer
- Period
- Jan–maj 2025
- Team
- Designteamet
- Status
- Publicerat
Arbetsförmedlingens designsystem samlar de komponenter, färger och riktlinjer som myndighetens digitala tjänster bygger på. Från januari till maj 2025 var Joel Frontend/UX Engineer i designteamet och byggde citatkomponenten digi-quote med dess dokumentationssida, och sidan Webbfärger.
Om designsystemet
Designsystemet, Digi, är publikt. Komponenterna finns som webbkomponenter med paket för Angular och React, och riktlinjen är att tjänsterna använder dem i första hand.
Utgångsläget
Myndigheter omfattas av lagen om tillgänglighet till digital offentlig service. En komponent i designsystemet ska fungera i alla tjänster som använder den, uppfylla tillgänglighetskraven och följa designen i Figma.
Joels roll
Joel byggde digi-quote ensam, från komponent till dokumentation, och byggde sidan Webbfärger för hand utifrån designen i Figma. Teamet granskade koden i pull requests innan den släpptes.
Byggt av Joel
- Citatkomponenten digi-quote
- Komponentens dokumentationssida med live-demo
- Sidan Webbfärger, med färguppsättningen Af-18
Tillsammans med teamet
- Design i Figma
- Kodgranskning i pull requests
- Avstämning med en tillgänglighetsexpert och en lösningsarkitekt
digi-quote
Två varianter
default, i brödtextens typsnitt och med valfri bakgrundsfärg, och highlight, med större text för att lyfta fram ett citat.
Bild där den passar
Bilden kan ligga ovanför, till vänster eller till höger om citatet, eller utelämnas, och justeras inom sin ram.
Tillgänglig från början
Semantisk blockquote, genomtänkt hantering av alt-texter och bakgrundsfärger med godkänd kontrast.
Från kod till dokumentation
Webbkomponent i Stencil med paket för Angular och React, tester och en dokumentationssida med live-demo.
Webbfärger
Hela paletten på en sida
Profilfärger, komplementfärger, neutrala toner och funktionsfärger, med tokennamn och färgvärden.
Kontrast som går att kontrollera
Exempel på godkända och underkända kontrastvärden enligt WCAG, och hur färgerna uppfattas vid färgblindhet.
Ett system för namn
Varje färg har ett namn och en skala från 0 till 1000, som designtokens bygger på.
Byggd för hand
Joel byggde sidan utifrån designen i Figma, med färguppsättningen Af-18.
Tekniken
- Stencil
- Web Components
- Angular
- React
- Design tokens
- Figma
- WCAG
- Komponenten byggdes som en webbkomponent i Stencil, med paket för Angular och React.
- Semantisk blockquote, alt-texter och bakgrundsfärger med godkänd kontrast ingick från början.
- Färgerna på Webbfärger följer designsystemets tokens, med namn och en skala från 0 till 1000.
Samarbete och leverans
Designen togs fram i Figma. Koden granskades av teamet i pull requests innan den släpptes i designsystemet. Tillgängligheten stämdes av med en tillgänglighetsexpert och en lösningsarkitekt.
Resultat
- digi-quote är en del av designsystemet och dokumenterad publikt.
- Webbfärger finns publikt, och Af-18 är färguppsättningen Joel byggde.
Relaterade tjänster
Det är samma arbete Vindictive gör för byråer och produktteam: komponenter som följer designen exakt, med tillgänglighet och dokumentation från början.
Något ambitiöst i tankarna? Vi bygger det.
Köp ett hemsidepaket online redan i dag, eller berätta om mjukvaran, appen eller samarbetet du planerar.
Behöver ni en pålitlig utvecklingspartner? Byråsamarbeten