Avrunding
Felles, stram radius-skala for hjørneavrunding: liten for kontroller, middels for kort og overlays, og pilleform for kapsler.
lmfaole.party / designsystem / tokens
10 token-kategorier fra designsystem/tokens/. Hver kategori sin egen side har full dokumentasjon (formål, egnethet, hele tokentabellen).
Felles, stram radius-skala for hjørneavrunding: liten for kontroller, middels for kort og overlays, og pilleform for kapsler.
Korte overgangsvarigheter for hover, fokus og enkle fades, med innebygd støtte for prefers-reduced-motion.
Samlet fargekategori for hele nettstedet (/, turer/ og slides/), bygget rundt én delt aksentfamilie i oklch() og tema-nøytrale flate- og tekstfarger med light-dark().
To nærliggende, men semantisk ulike gjennomsiktighetsnivåer - pluss én svært restriktiv blur-token for de få faste/flytende flatene der litt gjennomskinn faktisk hjelper lesbarheten.
Standard tykkelse for vanlige kantlinjer på hele nettstedet, holdt som egen token selv om verdien foreløpig er konstant.
En bevisst liten z-indeks-skala for faste og flytende elementer, begrenset til to overlay-nivåer fordi nettstedet ikke trenger mer.
Delt avstandsskala for gap, padding og margin i UI-krom, bevisst uttrykt i relative em- og lh-enheter.
Skalaer for skriftstørrelse, vekt, linjehøyde og bokstavavstand, pluss syv ferdige font-shorthands for brødtekst, overskrifter (title-1/title-2/font-overskrift), en semibold headline-rolle, liten tekst og kode.
Én reell skygge (--shadow-elevated) for flytende flater, bygget med color-mix() mellom --color-surface-text og transparent så den følger temaet uten egen mørk-modusvariant.
Fysiske minstemål for interaktive kontroller, hentet fra Apples Human Interface Guidelines-krav om minimum 44x44pt tappbart areal - se designsystem/regler/index.html#kompleksitetsgrenser.