Hoppa till innehåll
Designsystem

Designsystem

Tokens och komponenter. Sanningskälla: docs/design/DESIGN.md. Ändra tokens där, kör npm run design:build, uppdateras här.

Färger

action

default
#40775E
hover
#305A47
active
#254637
tint
#AFD4C4

brand

primary
#A33662
deep
#7E2A4C

ink

default
#383D42
muted
#4D545C
disabled
#A1A9B2
inverse
#FFFFFF

border

default
#CFD7DD
strong
#383D42

surface

canvas
#FFFFFF
beige
#F9F6F1
beige-hover
#F6F1E9
disabled
#EDF1F5

status

info
{"border":"#1775D3","bg":"#F6FAFE"}
attention
{"border":"#BD7100","bg":"#FFFBF2"}
success
{"border":"#297A54","bg":"#F6FEFB"}
error
{"border":"#BB2F1C","bg":"#FFF8F7"}

Spacing

1
0.25rem
2
0.5rem
3
0.75rem
4
1rem
5
1.5rem
6
2rem
7
3rem
8
4rem

Radius

sm
0.125rem
md
0.25rem
lg
0.5rem
full
9999px

Shadows

elevated-1
elevated-2

Typografi

xs0.75rem / line 1.3
Den snabba bruna räven hoppade över den lata hunden.
sm0.875rem / line 1.4
Den snabba bruna räven hoppade över den lata hunden.
base1rem / line 1.5
Den snabba bruna räven hoppade över den lata hunden.
md1.25rem / line 1.4
Den snabba bruna räven hoppade över den lata hunden.
lg1.5rem / line 1.3
Den snabba bruna räven hoppade över den lata hunden.
xl2rem / line 1.2
Den snabba bruna räven hoppade över den lata hunden.
xxl2.5rem / line 1.15
Den snabba bruna räven hoppade över den lata hunden.

Focus

Mörkgrå outline, 0.125rem, offset 0.125rem. Kontra grön (handling): fokus ska vara tydligt distinkt från handling.

Komponenter

Button

Formulär

Status / Alert

Ytor & märkning

Default card
Beige card (fill)
PrimarySecondaryNeutral