Tällä portfoliolla on tarkoituksellisesti hiljainen, editoriaalinen tuntuma: ohuet reunat, harkitut versaalilabelit, paperia ja mustetta, yksi ladattu Riso-väri painomerkkinä, 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
Loaded ink (Riso Fluorescent Pink)
--ink
Offset ink (Riso Blue)
--ink-offset
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.