TÀllÀ portfoliolla on tarkoituksellisesti kosketeltava, editoriaalinen tuntuma: ohuet reunat, pillerimuotoiset labelit, VT323-versaalit aksentteina ja liike, joka tukee (ei korvaa) sisÀltöÀ. TÀmÀ sivu dokumentoi tokenit ja primitiivit tuon tunnelman takana.
VĂ€ritokenit
Background primary
--bg-primary
Background secondary
--bg-secondary
Background tertiary
--bg-tertiary
Text primary
--text-primary
Text secondary
--text-secondary
Text tertiary
--text-tertiary
Border primary
--border-primary
Border secondary
--border-secondary
Accent
--accent
Typografia
PP Neue Montreal seitsemÀllÀ leikkauksella. Semanttiset tokenit varmistavat yhtenÀisen painotuksen koko sivustolla.
Aa
Aa
Aa
Aa
Skaalat ja mitat
| Tokenin nimi | Kuvaus | Arvo | Esikatselu |
|---|---|---|---|
--space-4xs | Space 4xs | ||
--space-3xs | Space 3xs | ||
--space-2xs | Space 2xs | ||
--space-xs | Space xs | ||
--space-s | Space s | ||
--space-m | Space m | ||
--space-l | Space l | ||
--space-xl | Space xl | ||
--space-2xl | Space 2xl | ||
--border-width-hairline | Border hairline | ||
--border-width-strong | Border strong | ||
--radius-card | Radius card | ||
--radius-pill | Radius pill | ||
--lift-distance | Hover lift |
Komponenttiprimitiivit
SuunnittelusÀÀnnöt
Vuorovaikutus
- NÀppÀimistö ensin: TÀysi WAI-ARIA-tuki. NÀkyvÀt fokuskehykset ovat pakollisia.
- Kosketusalueet: VÀhintÀÀn 44px mobiilissa, 24px työpöydÀllÀ.
- Palaute: Lataustilojen on sÀilytettÀvÀ teksti. Tuhoavat toiminnot vaativat vahvistuksen.
Typografia ja asettelu
- Optinen tasaus: SÀÀdÀ ±1px kun havainto voittaa geometrian.
- Tekstiliima: KÀytÀ sitovia vÀlilyöntejÀ termeissÀ kuten 10 MB, Vercel SDK.
- RivivÀli: Tiivis otsikoissa (1.1), vÀljÀ leipÀtekstissÀ (1.5).
Saavutettavuus
- Kontrasti: APCA-standardien mukainen. Vahvempi validointi hover- ja fokustiloissa.
- Liike: Kunnioita `prefers-reduced-motion`-asetusta. Animoi vain transform/opacity.
- Semantiikka: KÀytÀ natiivielementtejÀ (`button`, `a`, `dialog`) ennen ARIAa.