Suunnittelujärjestelmä

Neutraaleja harmaita, hiusviivoja, harvennettua pientekstiä, yksi pinkki sävy ja liike, joka ei tule tielle. Jokainen alla oleva arvo luetaan sivuston tyylitiedostoista käännösvaiheessa, ja jokainen komponentti on se oikea, joten sivu ei voi erkaantua sivustosta.

Väri

Kaksi neutraalia palettia ilman sävytystä. Korostus syntyy kontrastista eikä sävystä: --accent on korostustekstin väri, ja valinta kääntää tekstin värit. Tumma on oletus; .theme-dark kiinnittää sen alipuuhun, joten hakudialogi pysyy tummana vaaleassakin teemassa.

Tumma, oletus

--bg-primary #0a0a0a
--bg-secondary #161616
--bg-tertiary #222
--text-primary #ededed 16.9:1
--text-secondary #a3a3a3 7.8:1
--text-tertiary #818181 5.1:1
--text-highlight #fff 19.8:1
--border-primary #262626
--border-secondary #4d4d4d
--surface-hover #ffffff14

Paperi

--bg-primary #f5f5f5
--bg-secondary #e7e7e7
--bg-tertiary #dcdcdc
--text-primary #111 17.3:1
--text-secondary #555 6.8:1
--text-tertiary #666 5.3:1
--text-highlight #000 19.3:1
--border-primary #d9d9d9
--border-secondary #a5a5a5
--surface-hover #00000010

Suhteet: kukin tekstiväri oman --bg-primary-pohjansa päällä (WCAG 2).

Pinkki ja sininen

Käyttöliittymän ainoa sävy: 6 px:n pinkki näyte yläotsikon vieressä, tässä suurennettuna ja oikeassa koossa. Sininen on sen rinnalla vain kolofonissa. Ei koskaan leipätekstinä, ei pintana, ei toisena palettina.

Uusin

Fluoresoiva pinkki --ink #ff48b0
Sininen --ink-offset #0078bf

Typografia

Kolme perhettä, itse isännöitynä Astron fonttiputken kautta, ja vain luetellut leikkaukset ladataan. Otsikot ovat groteskia; antiikva on editoriaalinen aksentti.

PP Neue Montreal --ff-base 350 · 400 · 400 italic · 500 · 600 · 700 Kaikki: teksti, otsikot, nimiöt ja napit.
Instrument Serif --ff-serif 400 · 400 italic Editoriaalinen aksentti: töiden nimet ja lainaukset.
Geist Mono --ff-mono 400 · 500 Pienteksti: erittelyt, kuvatekstit ja numerot.

Lihavuudet

Aa Book 350 --font-weight-book Pitkä teksti
Aa Regular 400 --font-weight-regular Leipäteksti (oletus) ja etusivun otsikko
Aa Italic 400 --font-weight-regular Korostus leipätekstissä
Aa Medium 500 --font-weight-medium Nimiöt ja yläotsikot
Aa SemiBold 600 --font-weight-semibold Korttien otsikot, vahva korostus
Aa Bold 700 --font-weight-bold Otsikot (--font-weight-heading)

Asteikko

--fs-xs clamp(0.72rem, 0.1vi + 0.68rem, 0.76rem) Suunnittelen brändi-ilmeitä, kuvituksia ja verkkosivuja, jotka on helppo ymmärtää, joissa ei ole turhaa ja jotka kestävät aikaa.
--fs-sm clamp(0.9375rem, 0.25vi + 0.74rem, 0.96rem) Suunnittelen brändi-ilmeitä, kuvituksia ja verkkosivuja, jotka on helppo ymmärtää, joissa ei ole turhaa ja jotka kestävät aikaa.
--fs-base clamp(1.125rem, 0.45vi + 0.89rem, 1.25rem) Suunnittelen brändi-ilmeitä, kuvituksia ja verkkosivuja, jotka on helppo ymmärtää, joissa ei ole turhaa ja jotka kestävät aikaa.
--fs-md clamp(1.25rem, 0.76vi + 1.06rem, 1.67rem) Suunnittelen brändi-ilmeitä, kuvituksia ja verkkosivuja, jotka on helppo ymmärtää, joissa ei ole turhaa ja jotka kestävät aikaa.
--fs-lg clamp(1.56rem, 1.2vi + 1.26rem, 2.22rem) Suunnittelen brändi-ilmeitä, kuvituksia ja verkkosivuja, jotka on helppo ymmärtää, joissa ei ole turhaa ja jotka kestävät aikaa.
--fs-xl clamp(1.56rem, 0.9rem + 2.2vi, 2.75rem) Suunnittelen brändi-ilmeitä, kuvituksia ja verkkosivuja, jotka on helppo ymmärtää, joissa ei ole turhaa ja jotka kestävät aikaa.
--fs-prose clamp(1.25rem, 0.875rem + 1.5vi, 1.5rem) Suunnittelen brändi-ilmeitä, kuvituksia ja verkkosivuja, jotka on helppo ymmärtää, joissa ei ole turhaa ja jotka kestävät aikaa.
--fs-prose-lg clamp(1.1875rem, 1rem + 0.8vi, 1.625rem) Suunnittelen brändi-ilmeitä, kuvituksia ja verkkosivuja, jotka on helppo ymmärtää, joissa ei ole turhaa ja jotka kestävät aikaa.

Joustavat koot, joilla on alaraja: pienteksti ei koskaan alle 11,5 px, pieni teksti ei alle 15 px. Oikea sarake näyttää koon tässä näkymässä.

--font-weight-heading: 700
--line-height-heading: 1.1
--letter-spacing-heading: -0.02em
--line-height-base: calc(2ex + 6px)

Tila ja asettelu

Kiinteä askelasteikko komponenttien sisällä, joustava sivun rytmiin. Sivumarginaali ei koskaan jää näytön loven alle.

Askeleet

--space-4xs 0.125rem · 2px
--space-3xs 0.25rem · 4px
--space-2xs 0.375rem · 6px
--space-xs 0.5rem · 8px
--space-s 0.75rem · 12px
--space-m 1rem · 16px
--space-l 1.5rem · 24px
--space-xl 2rem · 32px
--space-2xl 3rem · 48px

Joustavat

--space-fluid-2xs clamp(0.375rem, 0.3182rem + 0.2424vi, 0.5rem)
--space-fluid-s clamp(0.75rem, 0.6364rem + 0.4848vi, 1rem)
--space-fluid-l clamp(1.5rem, 1.2727rem + 0.9697vi, 2rem)
--space-fluid-2xl clamp(3rem, 2.3182rem + 2.9091vi, 4.5rem)

Asettelu

--gutter: max(clamp(1.25rem, 3vw, 2.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))
--page-width: 2048px
--dock-clearance: 6.75rem

Pyöristys ja viivat

Kaksi pyöristystä ja pilleri. Painike on askeleen korttiaan pienempi, joten pari pysyy samankeskisenä.

--radius-sm 6px
--radius-md 0.5rem
--radius-pill 9999px
6 + 2 = 8 Samankeskinen --radius-card · --space-4xs

--radius-card: var(--radius-md)
--button-radius: var(--radius-sm)

Reunat

--border-width-hairline 1px
--border-width-strong 2px

Liike

Lyhyet, tavalliset siirtymät käyttöliittymään; muotoillut käyrät vain, kun jokin liikkuu matkan. Toista-painike ajaa kaikki rivit kerralla. Kun liikettä on vähennetty, mikään ei liiku.

Kestot

--duration-instant 100ms
--duration-fast 150ms
--duration-base 200ms
--duration-moderate 250ms
--duration-slow 300ms
--duration-slower 400ms
--duration-slowest 500ms

Käyrät

--ease-default ease
--ease-in ease-in
--ease-out ease-out
--ease-in-out ease-in-out
--ease-standard cubic-bezier(0.4, 0, 0.2, 1)
--ease-accelerate cubic-bezier(0.4, 0, 1, 1)
--ease-out-quad cubic-bezier(0.25, 0.46, 0.45, 0.94)
--ease-out-quint cubic-bezier(0.22, 1, 0.36, 1)
--ease-out-expo cubic-bezier(0.16, 1, 0.3, 1)
--ease-out-back cubic-bezier(0.175, 0.885, 0.32, 1.275)
--ease-sheet cubic-bezier(0.32, 0.72, 0, 1)
--ease-in-out-strong cubic-bezier(0.8, 0.01, 0.11, 0.98)

Lyhenteet

--transition-fast: var(--duration-fast) var(--ease-default)
--transition-base: var(--duration-base) var(--ease-default)
--lift-distance: -10px

Kerrokset

Kiinteät elementit takaa eteen. Puhelimessa alahäivytys on telakan alla ja ylähäivytys sen päällä; leveämmällä näytöllä niiden paikan vie yläpalkki. Valikko on kaikkien yläpuolella. Ohituslinkki, teemanvaihdon kuva ja kursori voittavat aina.

10000 --z-cursor
9999 --z-theme-transition
2000 --z-skip-link
1002 --z-menu-toggle
1001 --z-menu
1000 --z-fade-top
999 --z-masthead
999 --z-dock
900 --z-fade-bottom

Kosketusalueet

24 px on alaraja kaikkialla ja --tap-target-size karkealla osoittimella. Osuma-alue kasvaa; piirretty muoto ja rivivälit eivät liiku.

Ruudukko

Tekstinappi yltää 24 px:iin täytteellä, joka ei liikuta riviä; kosketuksella näkymätön ::after kasvattaa osuma-alueen 44 px:iin.
Somelinkit käyttävät samaa kaistaa ::before-elementtinä, ja 28 px:n videopainike kasvaa 44 px:iin.
Pienet erilliset linkit saavat 4 px täytettä ja −4 px marginaalia: isompi kohde, sama asettelu.

Komponentit

Toimivina, sivuston omilla komponenteilla ja luokilla.

Linkit

Tekstilinkki, jonka ohut alleviivaus vahvistuu hoverissa ja fokuksessa. Nykyisen sivun linkissä alleviivausta ei ole.

Työt Takomo Suunnittelujärjestelmä

Hakemisto

Töiden linssit tekstirivinä, kunkin lukumäärä Geist Monolla versaalikorkeudella. Valittu näkyy korostusvärillä ja alleviivattuna; ruudukon ja luettelon vaihto käyttää samoja tekstinappeja pienessä koossa.

Somelinkit

Hillityt versaalit ja ↗ ulkoisille linkeille. Sähköpostiosoite on ensimmäisenä ja kokonaan näkyvissä; napsautus kopioi sen ja kertoo siitä.

Pienteksti

Yläotsikot, erittelyt ja kuvatekstit kokoa --fs-xs värillä --text-tertiary, harvennettuina versaaleina tai Geist Monolla.

Valikoidut

Kirjaimet: PP Neue Montreal, Instrument Serif, Geist Mono
Korostusvärit: Fluoresoiva pinkki ja sininen

Kuva 1 Astro (sivut) + Contentful (sisällönhallinta)

Video

Mykät silmukat latautuvat lähellä näkymää. Yksi painike pysäyttää kaikki sivuston silmukat ja muistaa valinnan; kun liikettä on vähennetty, julistekuva jää.

Haku

Natiivi dialogi, joka on tumma molemmissa teemoissa ja kelluu tumman verhon päällä. ⌘ K avaa sen mistä tahansa.

⌘ K

Kursorilinssi

Tarkalla osoittimella on oma kursori. ”Katso”- ja ”Lue”-kohdissa se muuttuu himmeäksi linssiksi, sivuston ainoaksi lasipinnaksi.

Osoita tähän

Telakka

Puhelimessa kelluva palkki jokaisen sivun alareunassa. Leveämmässä ikkunassa sen linkit nousevat yläpalkkiin ja yhteystiedot siirtyvät sivun loppuun. --dock-clearance pitää sisällön ja näppäimistöfokuksen palkin yläpuolella.

--z-dock: 999
--dock-clearance: 6.75rem

Säännöt

Vuorovaikutus

Näppäimistö ensin: Täysi WAI-ARIA-tuki. Näkyvät fokuskehykset ovat pakollisia.
Kosketusalueet: Vähintään 24 px, kosketuksella 44 px.
Palaute: Tilaviestit luetaan kohteliaasti. Lataustila säilyttää tekstinsä.

Typografia ja asettelu

Optinen tasaus: Säädä ±1 px, kun havainto voittaa geometrian.
Tekstiliima: Käytä sitovia välilyöntejä termeissä, kuten 10 MB ja ⌘ K.
Riviväli: Otsikot 1.1; leipäteksti calc(2ex + 6px), joka seuraa x-korkeutta.

Saavutettavuus

Kontrasti: Täytä APCA-kontrastivaatimus ja vahvista kontrastia hoverissa ja fokuksessa.
Liike: Kunnioita prefers-reduced-motion-asetusta. Animoi vain transformia ja opacityä.
Semantiikka: Käytä natiivielementtejä (`button`, `a`, `dialog`) ennen ARIAa.