# Utformade ett designsystem i stil med ”Liquid Glass” från iOS 26 och en kanonisk komponentförteckning som lintregler upprätthåller för att förhindra att gränssnittet spretar. 2025 **Situation.** Ett gränssnitt utan ett gemensamt visuellt språk och en fast uppsättning komponenter glider isär, och det går fort. Varje ny skärm uppfinner sina egna knappar, märken och kort, alla lite olika, och de små inkonsekvenserna hopar sig tills produkten ser osammanhängande ut och varje ändring innebär att fem skräddarsydda versioner av samma sak måste röras. **Uppgift.** Designsystemet behövde vara tillräckligt sammanhängande för att se avsiktligt ut och tillräckligt lätt att upprätthålla för att inte vittra sönder så fort teamet hade mycket att göra. **Handling.** Det visuella språket och komponentsystemet utformades som en helhet. Språket är en look i stil med ”Liquid Glass” i iOS 26 — genomskinliga paneler med bakgrundsoskärpa, skikt av skuggor, lite ljusbrytning, fjäderanimationer — uppbyggd av Tailwind‑verktygsklasser. Ovanpå den ligger en kanonisk uppsättning komponenter som varje skärm är tänkt att byggas av: Card, Label, Button, GlassIconButton, DirectoryGrid och resten. Det som får det att fastna är lintningen: regler som avvisar ett handbyggt märke eller chip och pekar dig mot den kanoniska komponenten i stället, så att systemet hålls uppe av verktyg och inte av att den som granskar just den dagen kommer ihåg att bry sig. Och dokumentationen kompletteras med konkreta anteckningar som går från misstag till lösning, så att vägledningen är ”så här gör man fel och så här gör man rätt” och inte en abstrakt princip. **Resultat.** Gränssnittet förblir konsekvent och troget varumärket, och de engångskomponenter som annars skulle sprida sig fångas innan de hinner göra det. Visuell konsekvens slutade vara en fråga om allas disciplin och blev något som verktygen står vakt om, vilket är den enda versionen av det som överlever en deadline. --- - Roll: Designsystemingenjör - Kategorier: [Frontendutveckling](https://engineer.company/sv/categories/frontend/), [Designsystem och UI](https://engineer.company/sv/categories/design-systems/), [UX/UI‑design](https://engineer.company/sv/categories/ux-ui/), [Dokumentation](https://engineer.company/sv/categories/documentation/) - Tjänster: [Frontendutveckling](https://engineer.company/sv/services/frontend-development/), [UI/UX‑design och designsystem](https://engineer.company/sv/services/ui-ux-design/)