Färger
Varje färg har ett namn (token) och en hexkod. I kod använder du namnet, t.ex. bg-vinter – då uppdateras hela webbplatsen automatiskt om en nyans ändras. Hexkoden är till för designverktyg och tryck. Texten i varje ruta visar vilken textfärg som hör ihop med bakgrunden, så att du ser att den är lätt att läsa. Kontrastkvoten visar hur väl texten syns enligt WCAG: minst 4.5:1 (AA) för vanlig text, 3:1 för stor text och 7:1 för högsta nivån (AAA).
Primära färger
De tre färgerna som bär varumärket.
bg-vinter#1E5358Text #FAF9F5 · Godkänd för all text
Primär text och mörk yta
bg-sno#FAF9F5Text #1E5358 · Godkänd för all text
Sidans bakgrund
bg-var#F9BD9BText #1E5358 · Godkänd för all text
Varm accentyta
Sekundära färger
Komplement för status, sektioner och accenter.
bg-sommar#AABD8EText #1E5358 · Endast rubriker och text över 24px
Positiv status
bg-dagg#C9E5D8Text #1E5358 · Godkänd för all text
Informationsyta
bg-host#D47006Text #FAF9F5 · Endast rubriker och text över 24px
Knappar och call to action
bg-morgon#FEECE1Text #1E5358 · Godkänd för all text
Mjuk sektionsbakgrund
Semantiska roller
Så här mappas paletten till användning i gränssnittet.
bg-primary / text-primary-foreground#1E5358Text #FAF9F5 · Godkänd för all text
Primär åtgärd
bg-accent / text-accent-foreground#D47006Text #FAF9F5 · Endast rubriker och text över 24px
Standardknapp
bg-surface / text-foreground#FFFFFFText #1E5358 · Godkänd för all text
Kort och paneler
bg-surface-muted / text-foreground#FEECE1Text #1E5358 · Godkänd för all text
Dämpad sektion
bg-info / text-info-foreground#C9E5D8Text #1E5358 · Godkänd för all text
Meddelanden
bg-success / text-success-foreground#AABD8EText #1E5358 · Endast rubriker och text över 24px
Bekräftelser
bg-danger / text-danger-foreground#B3261EText #FAF9F5 · Godkänd för all text
Fel och varningar
border-border#DCDCD2Text #1E5358 · Godkänd för all text
Linjer och avgränsare