Tällä portfoliolla on tarkoituksellisesti hiljainen, editoriaalinen tuntuma: ohuet reunat, harkitut versaalilabelit, pelkkää paperia ja mustetta ilman korostusväriä sekä liike, joka tukee sisältöä eikä korvaa sitä. Tämä sivu dokumentoi tokenit ja primitiivit, joista tuo tunnelma syntyy.
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.