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
xs — 0.75rem / line 1.3
Den snabba bruna räven hoppade över den lata hunden.
sm — 0.875rem / line 1.4
Den snabba bruna räven hoppade över den lata hunden.
base — 1rem / line 1.5
Den snabba bruna räven hoppade över den lata hunden.
md — 1.25rem / line 1.4
Den snabba bruna räven hoppade över den lata hunden.
lg — 1.5rem / line 1.3
Den snabba bruna räven hoppade över den lata hunden.
xl — 2rem / line 1.2
Den snabba bruna räven hoppade över den lata hunden.
xxl — 2.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
Info: neutralt meddelande
Attention: något uppmärksammas
Success: något lyckades
Error: något gick fel
Ytor & märkning
Default card
Beige card (fill)
PrimarySecondaryNeutral