Vores object styles
Vores object styles sætter rammerne for, hvordan vi former og fremhæver UI-elementer gennem corner radius, borders og shadows.
Border radius
Border radius (eller radii) er de afrundede hjørner på vores elementer. De giver et imødekommende udtryk, der afspejler vores brands personlighed.
Principper
Let afrunding
Vi undgår skarpe hjørner og arbejder altid med en let afrundet corner radius for et udtryk, der føles venligt uden at blive hverken for blødt eller barnagtigt.
Proportionel skalering
Vi vælger corner radius ud fra elementets størrelse og placering i layoutet. Større elementer bruger større værdier, mens mindre bruger mindre, så proportionerne opleves naturlige.
Tilpasset indlejring
Når vi placerer afrundede elementer inde i hinanden, justerer vi altid den indre corner radius ét trin ned, så hierarkiet står klart og afrundingerne føles naturlige i forhold til hinanden.
Border radius værdier
Vi arbejder med fem corner radius værdier, som bestemmes af elementtyper og deres størrelse. Alle vores komponenter er allerede opsat med en foruddefineret corner radius, men herunder giver vi et indblik i, hvordan vi vælger de værdi.
Borders
Borders bruger vi kun i særlige tilfælde. I stedet skaber vi afgrænsning og fremhævelse med spacing og baggrundskontrast for et helt enkelt udtryk.
Shadows
Shadows bruges sparsomt og kun, hvor de tilfører tydelig værdi. I stedet skaber vi separation og dybde med spacing og baggrundskontrast
Eksempler på forkert brug
