Guia d’estil
Darrera actualització
Guia d’estil 1.0
El sistema darrere d’aitormurillo.com. Cada valor surt del codi a 1 d’octubre de 2026 (frontend/, Nuxt 4 + Tailwind v4).
Per a dissenyadors i desenvolupadors front-end. Cada regla dona primer el valor de disseny i, quan existeix, el token, la utilitat o el component Vue que l’implementa, en Mute.
Principis
Una mida, un pes.
La jerarquia surt de la posició a la retícula, les majúscules i el color, mai de l’escala.
El text és la interfície.
Cada control és una paraula: sense botons amb farciment o vora, sense icones. Els únics signes són + (girat 45° per a Tancar), ×, ↗, ↑, ⌘K.
Clar, amb el color dels projectes.
Fons blanc, text negre, un gris, un blau i un gris de filet. La resta del color ve de les imatges dels projectes.
Tot comença a la vora d’una columna.
Els cinc blocs de la capçalera són les columnes mestres de tot el web.
El moviment té dues corbes.
Reveal, per a màscares i diapositives; settle, per a entrades i zoom.
El hover és una millora.
Els efectes de hover només existeixen en dispositius que poden fer hover; el focus del teclat els replica on aporten significat.
Tipografia
Aitor Murillo
Geist Mono Regular, 12/16, a tot arreu. La jerarquia surt de la posició, les majúscules i el color.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 àáçèéíïòóúüñ ·,.:;!?¿¡()“”‘’
Ŀŀ ı Œœ € ™ + × ↗ ↑ ← → ⌘K
Text corregut · CommonTextContent
Cada control és una paraula. Els paràgrafs estan a 16px i la mesura és de quatre columnes, uns 45–60 caràcters.
- Les llistes fan servir un disc,
- amb un sagnat de 2ch.
Els enllaços dins del text estan sempre subratllats, perquè el blau sol s’assembla massa al negre.
Família
Geist Mono, regular, allotjada al web i reduïda (llatí, Latin-1, Ŀŀ ıŒœ €™ i fletxes)
--font-primary · /fonts/GeistMono-Regular.woff2, preload, font-display: swap
Mida / interlineat
12px / 16px, a tot arreu
--text-base / --text-base--line-height
Pes / espaiat
400 / 0
Tall de línia
text-wrap: pretty a tot
body
Alternativa
ui-monospace, monospace (també cobreix els signes fora del subset, com el japonès)
--font-primary
MAJÚSCULES
El logo, els noms de projecte (sempre: llista, targetes, peu, títol del projecte al mòbil), els codis d’idioma i la pàgina d’error.
Tipus frase
Tota la resta: textos de la capçalera, cos, etiquetes, crèdits i controls.
Salts de línia
Es respecten on el camp del CMS els permet: lema, adreça i stack.
whitespace-pre-line
Retall
UNA SOLA LÍNIA I PUNTS SUSPENSIUS A LA LLISTA
Noms i crèdits de les files de la llista a l’escriptori, i noms de les targetes. El crèdit que apareix en passar per sobre d’una targeta es mostra sencer.
Color
Fons
#FFFFFF
--color-white
Sobre negre 21:1
Tinta
#000000
--color-black
Sobre blanc 21:1
Mute
#767676
--color-gray
4,54:1 sobre blanc, 4,6:1 sobre negre (AA)
Enllaç / actiu
#0000EE
--color-blue
9,4:1 sobre blanc, 2,2:1 sobre negre: mai text sobre negre
Filet
#E6E6E6
--color-gray-light
Línies i fons d’imatge, mai text
Actiu
Blau: la pàgina actual al menú principal, l’idioma actiu i la paraula activa del canvi de vista de l’Arxiu. A la home l’idioma actiu es queda en blanc.
Inactiu
Mute: idiomes inactius, la paraula de vista inactiva i la resta de pàgines al menú mòbil. Mai es fa servir opacitat per als estats inactius.
Inactiu → hover
Passa al color del text que l’envolta: negre sobre blanc, blanc a la home. Els botons de text passen de Mute a negre.
Atenuat
Opacitat 0,2, només per enviar el context al fons: les files de la llista que no són en hover, i la pàgina del projecte i el bloc 2 de la capçalera darrere de Més projectes.
Imatge absent
Un bloc negre. Tot marc d’imatge té fons negre.
Selecció
Fons blau, text blanc.
Fons
Home: negre. La resta de pàgines: blanc. El fons canvia de color durant la transició de pàgina, mai de cop.
Sobre imatge
Només a la home. Degradat superior de 180px, rgba(0,0,0,.32) → transparent. Degradat inferior de 200px, transparent → rgba(0,0,0,.36). Les etiquetes sobre imatge de la resta del web fan servir un bloc blanc darrere del text negre, mai un vel.
Retícula, espaiat i maquetació
12 columnes a l’escriptori i 6 per sota de 768px (el md de Tailwind). Marge lateral de 20px i separació de 10px a totes les mides. Les maquetacions niades reutilitzen les pistes del pare amb grid-cols-subgrid, així que una columna niada sempre cau sobre una columna de la pàgina.
container + main-grid · main-gap
1 · Logo
1–2
2 · Text de cada pàgina
3–6, l’únic bloc que canvia
3 · Menú principal
7–8
4 · Menú secundari, idiomes
9–10
5 · Rellotge
11–12, a la dreta
Espaiat, en múltiples de la unitat de 4px
4
Farciment horitzontal d’una etiqueta blanca sobre imatge
px-1
8
Farciment vertical de les files de taules i llistes
py-2
10
Separació de columnes; marge de l’etiqueta a les targetes; separació de la galeria; farciment superior de les files al mòbil
2.5
16
Separació entre paràgrafs i entre files del bàner
4
20
Marge lateral; farciment i separació entre files de la capçalera; distància dels elements fixos a la vora
5
24
Separació entre grups a la columna de text del projecte
6
32
Separació entre files del peu al mòbil
8
40
Separació entre grups del menú mòbil; del text del projecte a la seva URL
10
48
Separació entre seccions al mòbil (Sobre mi); del títol al text a les legals i al projecte
12
96
Separació entre seccions a l’escriptori (Sobre mi); entre files del peu a l’escriptori
24
120
Espai sota el contingut abans del peu
pb-30
On comença el contingut (totes les pàgines menys la home)
Escriptori
32vh
Mòbil
172px (la capçalera de dues files de l’Arxiu + 48px)
--page-content-top. pt-page-content resta la --header-height mesurada. La columna fixa del projecte a l’escriptori fa servir --page-content-top directament. Aquesta pàgina comença a 32vh.
Capes
50
Bàner de galetes
10
Capçalera; botó i carrusel de Més projectes; peu de la home
5
Degradats de la home
3
Fila de la llista en hover, sobre la vista prèvia
2
Capa de la vista prèvia de la llista; diapositiva actual de la home
1
Diapositiva anterior de la home durant la cortina; la vista prèvia mostrada
Capçalera
Fixa a dalt, a tot l’ample, amb 20px de farciment vertical i 20px entre files. La seva alçada es mesura i es publica com a --header-height abans del primer pintat. La capçalera d’aquesta pàgina és la variant Legal.
CommonHeader
Home · transparent, text blanc, lema al bloc 2
Lema del web des de Site Global, en dues línies.
- Arxiu
- Sobre mi
Sobre mi · blanca, adreça al bloc 2, pàgina actual en blau
Adreça des dels ajustos 08000 Barcelona
- Arxiu
- Sobre mi
Projecte · transparent, títol i Tancar al bloc 2, Tancar alineat a dalt amb el logo i el títol, blocs 3–5 ocults. El bloc 2 s’atenua a 0,2 (500ms) mentre Més projectes està obert.
Mòbil · logo 1–3, Menú 4–6 a la dreta. Només l’Arxiu afegeix una segona fila. El menú és un diàleg modal; la pàgina del darrere es desenfoca 8px, sense vel gris.
Canvia la vista de llistaa quadrícula
Cerca
Lema del web des de Site Global, en dues línies.
- Inici
- Arxiu
- Sobre mi
Adreça des dels ajustos 08000 Barcelona
Rellotge
Dues línies, hora de Barcelona (Europe/Madrid), amb el format de l’idioma actiu, actualitzada cada minut.
CommonHeaderClock
Menú mòbil
Contingut des de 24vh. Qualsevol enllaç el tanca, i també es tanca quan la finestra supera els 768px. En obrir-se, el focus va a Tancar.
CommonHeaderMenu · --spacing-content-top
h1
A la home, el nom del web és l’h1 de la pàgina; a la resta és un enllaç.
Components
Enllaç de text
Negre → blau en hover. Pàgina actual en blau. Els enllaços externs s’obren en una altra pestanya; als menús del peu porten ↗ a la dreta.
CommonLink · CommonHeaderNavLink
Enllaç dins del text
Blau i sempre subratllat dins del text corregut. Els enllaços blaus solts (la URL del projecte, “Veure programa ↗”) només se subratllen en hover.
CommonContentLink
Botó de text
Mute → negre en hover, 200ms. La paraula de vista inactiva, “× Esborra” i “Esborra la cerca”.
CommonTextButton
Tancar
+ girat 45° i “Tancar”. Negre, blau en hover. Projecte, menú mòbil, Més projectes i ajustos de galetes.
CommonCloseLabel
Selector d’idioma
En majúscules, separats per un espai. Actiu en blau (blanc a la home), inactiu en Mute, en hover passa al color que l’envolta. Cada enllaç porta lang i hreflang.
I18nSwitcher
Crèdits
Disseny de Aitor Murillo / amb Studio Norte
A la pàgina del projecte, “en col·laboració amb Y” va en una línia pròpia. Els col·laboradors amb web hi enllacen (Mute → blau, en una altra pestanya). Les categories es llegeixen “Tipus, Sector”. Els camps buits s’ometen, mai se substitueixen per un guió.
ProjectCollaborators
Fila de taula
Filet d’1px a dalt i 8px de farciment vertical. Sobre mi (serveis, col·laboradors, docència) i els menús del peu. Cada fila d’aquesta pàgina n’és una.
Controls de l’Arxiu, files de la llista i targetes · interactiu. Passa per sobre d’una fila o una targeta i prova la cerca (⌘K).
Arxiu complet, 8 projectes.
Canvia la vista de quadrícula a
- Arxiu
- Sobre mi
- Atlas EditorialDisseny de Aitor Murillo
- ObradorDisseny de Aitor Murillo / amb Studio Norte
- Mare NostrumDisseny de Aitor Murillo
- HalcyonDisseny de Aitor Murillo / amb Estudi Pla
- VermellDisseny de Aitor Murillo
- Lumen FundacióDisseny de Aitor Murillo / amb Studio Norte
- Cal SastreDisseny de Aitor Murillo
- Ona RecordsDisseny de Aitor Murillo
Controls de l’Arxiu
El recompte s’anuncia amb aria-live. Canvi de vista: la vista actual en blau i l’altra com a botó de text; per defecte, quadrícula. Cerca: sense vora, màxim 320px, cursor blau, sense contorn de focus; la pista ⌘K passa a Esc amb el focus, i a × Esborra quan hi ha text. En directe, sense distingir accents, totes les paraules han de coincidir, en nom, any, disseny, col·laboració, tipus i sector. La cerca i la vista duren tota la visita i no van a la URL.
ArchiveControls
Fila de la llista
Any 1–2 · NOM 3–6 · Disseny 7–9 · Tipus, Sector 10–12. Mòbil: any a la columna 1 i la resta apilada a 2–6, amb 10px de farciment a dalt i 12px a baix. En hover o amb el focus, la resta de files s’atenuen a 0,2 (250ms), la fila perd el filet, les seves paraules reben un bloc blanc i la primera imatge de la galeria apareix fixa al centre de la pantalla, a les columnes 4–9, sense retallar.
ArchiveProjectList
Targeta
El marc de la galeria del projecte: 4:3 sobre negre, la primera imatge de la galeria al 66% d’ample i en la seva proporció original sobre una còpia desenfocada. NOM en una etiqueta blanca a 10px de la cantonada inferior esquerra. 4 columnes d’ample a l’escriptori (3 per fila) i tot l’ample al mòbil. En repòs, la imatge en escala de grisos sobre un fons gris clar; el hover o el focus fan aparèixer el desenfocament i tornen el color juntament amb el zoom; en color i amb desenfocament a les pantalles tàctils. El carrusel de Més projectes fa servir la mateixa targeta. En hover o amb el focus, la imatge s’amplia a 1,06 sobre el desenfocament, que no es mou (500ms, settle) i l’etiqueta creix per mostrar el crèdit (450ms, settle). Les altres no s’atenuen. Al mòbil només es veu l’etiqueta amb el NOM.
ArchiveProjectGrid · ProjectCard
Bàner de galetes · interactiu. Al web va fix a baix; aquí es mostra al seu lloc.
Cookies
Text des de Site Global → Cookie Banner Text, amb un enllaç a la política de galetes.
Bàner de galetes
A tot l’ample amb els marges de 20px, blanc, filet a dalt, 20px de farciment vertical i sense ombra. L’interruptor d’analítiques està en No per defecte; la paraula actual va en negre. “Configuració” passa a “× Tancar” i “Accepta” passa a “Desa les preferències” quan canvia l’interruptor. Mai és més alt que la pantalla: només fa scroll la llista d’ajustos, sense barra visible. Mòbil: etiqueta, text i les tres accions a dues columnes cadascuna.
CommonCookieBanner
Peu
Tanca l’Arxiu, Sobre mi i les legals; mai la home ni un projecte. El peu d’aquesta pàgina és l’exemple. Mòbil: tot apilat a 1–6, els dos menús es llegeixen com una sola taula, 32px entre files, “Darrera actualització” a 1–4 i “Amunt ↑” a 5–6.
CommonFooter · CommonLastUpdated
Pàgines
Home
Pantalla completa, sense scroll, fons negre, un projecte destacat per gest. Imatge a tot l’ample de les columnes 3–10 a l’escriptori i 1–6 al mòbil, en la seva proporció original (sense retallar). Darrere, una còpia desenfocada a sang (120%, desenfocament de 60px, brillantor 0,8). Peu a 20px de la vora inferior, en blanc.
HomeFeaturedProjects · HomeProjectCaption · CommonMediaBlur
Arxiu
Els controls al bloc 2 de la capçalera; la quadrícula (per defecte) o la llista. Cerca sense resultats: “Cap projecte coincideix amb “cerca”.” en Mute i després “Esborra la cerca”.
Projecte
A l’escriptori la pàgina no es mou. Text a 3–5: descripció; crèdits, categories (enllaços, una per línia) i stack en Mute; grups a 24px; URL, sense etiqueta, ancorada a baix. Galeria a 7–12, un bucle vertical infinit que es mou amb la roda des de qualsevol punt. Any en Mute sota el NOM. Mòbil: una columna, el NOM i l’any a dalt i la galeria a sota, sense bucle. Tancar torna a l’Arxiu amb la seva cerca i la seva vista.
ProjectGalleryFrame
Més projectes
“+ Més projectes” fix a 20px de la cantonada inferior esquerra (sobre un bloc blanc al mòbil), “+ Tancar” mentre està obert. Carrusel a 52px de la vora inferior: 3 targetes visibles a l’escriptori i 2 al mòbil, en bucle infinit a partir del projecte següent. La pàgina i el bloc 2 s’atenuen a 0,2. Es tanca amb Tancar, Esc o un clic a la pàgina atenuada.
ProjectMoreProjects
Sobre mi
Etiqueta en Mute a 1–2 i el contingut al costat; seccions a 96px (48px al mòbil). Intro a 3–6 i retrat 4:3 a 9–12. Les files de serveis alternen 4 i 6 columnes d’ample. Col·laboració: tots els col·laboradors, per ordre alfabètic, en 4 columnes, amb un recompte de dues xifres en Mute que enllaça a l’Arxiu filtrat; els que no tenen projectes van en Mute, sense enllaç. Biografia a 3–6. Docència: una taula de definicions i després “Veure programa ↗”. Contacte a 3–6 i l’adreça en Mute a 9–10.
Legals
Text corregut a 3–6: només paràgrafs, llistes i enllaços dins del text. Escriptori: títol i “Darrera actualització” al bloc 2 de la capçalera. Mòbil: obren el contingut i el text va 48px per sota.
Error
Sense capçalera ni peu. Centrat i en majúscules. L’enllaç manté l’idioma de la visita. Altres errors: “Ho sentim, alguna cosa ha fallat. Torna-ho a provar més tard.”
404
No s’ha trobat la pàgina.
Imatge i vídeo
Marc de la home · la proporció de la imatge
8 de 12 columnes / tot l’ample
Vista prèvia de la llista · el marc de galeria
6 de 12 columnes; la imatge, 2/3
Marc de galeria · 4:3, imatge en la seva proporció original (sense retallar) i 66% d’ample, sobre una còpia desenfocada (40px)
2/3 de 6 columnes / 2/3 de l’ample; també la targeta de projecte de la quadrícula de l’arxiu i de Més projectes, 4 de 12 columnes. Un vídeo va sobre el fons gris.
Retrat de Sobre mi · 4:3
4 de 12 columnes / tot l’ample
Portada
Cap: la primera imatge de la galeria en fa les funcions a la home, la llista i la quadrícula de l’arxiu, Més projectes i com a imatge en compartir si el SEO del projecte no en té.
Imatges
CDN de Sanity, srcset de 320–2400px, mai més ample que l’original. Cada ús declara el seu ample a sizes. Càrrega diferida per defecte; la primera diapositiva de la home i la primera imatge de cada projecte carreguen amb prioritat alta.
CommonMediaImage
Vídeo
Sense so, en bucle, en línia, sense controls, object-fit: cover i al mateix marc que la imatge. La imatge de sota fa de pòster i porta el text alternatiu; el vídeo s’amaga a les tecnologies de suport. Les targetes només es reprodueixen mentre són a la vista.
CommonMediaLoop · VideoLoop
Imatge absent
Deixa a la vista el fons negre del marc.
Imatge per compartir
1200×630, retallada al voltant del hotspot del CMS.
Moviment
Reveal
--ease-reveal
cubic-bezier(0.76, 0, 0.24, 1)
Màscares (cortines) i diapositives
Cortina de 1200ms de baix a dalt + zoom 1,14 → 1 en 1800ms
2026
ATLAS EDITORIAL
Disseny de Aitor Murillo
Settle
--ease-settle
cubic-bezier(0.2, 0.7, 0.2, 1)
Entrades, zoom i etiquetes que apareixen
Peu de la home: puja 8px i apareix en 600ms
Durades
--page-transition-duration 300ms: la fosa de pàgina i cada color que canvia amb ella. El valor per defecte de Tailwind, 150ms i cubic-bezier(0.4, 0, 0.2, 1), per al color dels enllaços sense durada explícita.
Màscares
Cortines amb clip-path: inset(). clip-to-top → clip-none descobreix de dalt a baix des de la vora superior; clip-to-bottom → clip-none, de baix a dalt des de la vora inferior.
utils/wipe.js · wipeIn, wipeOut, zoomIn
Canvi de pàgina
La pàgina que surt es fon en 300ms i la nova apareix en 300ms
El fons i el color del text de la capçalera i el fons de la pàgina canvien amb la fosa de sortida. L’alçada de la capçalera es manté mentre la pàgina surt.
Diapositiva de la home
Cortina de 1200ms reveal; la imatge passa d’1,14 a 1 en 1800ms; el fons desenfocat es fon en 1400ms
Endavant, de baix a dalt; enrere, de dalt a baix. El peu surt en 180ms ease-in; el nou puja 8px i apareix en 600ms settle, des dels 450ms. No s’accepten gestos durant la cortina.
Entrada de l’Arxiu
Els elements pugen i apareixen per torns (settle). Llista: 650ms, pas de 30ms, 8px. Quadrícula: 900ms, pas de 60ms, 16px
La primera pantalla, en CSS des del primer pintat i a cada canvi de vista; la resta puja en entrar a la pantalla amb l’scroll, cada tanda per torns. Retard màxim de 1000ms per tanda. Filtrar no la repeteix.
Entrada de les pàgines
Els blocs pugen i apareixen per torns (settle). 900ms, pas de 60ms, 16px, com la quadrícula de l’Arxiu
About, Legal i la guia d’estil, cada títol i bloc de text; el retrat d’About manté la seva cortina. Primera pantalla i scroll com a l’Arxiu.
Vista prèvia de la llista
Entrada: cortina de 620ms reveal + zoom 1,1 → 1 en 1000ms. Sortida: cortina de dalt a baix en 520ms
En baixar per la llista descobreix cap amunt, i en pujar, cap avall. Espera de 110ms; una cortina cada vegada. Les imatges sense descodificar esperen fins a 400ms. Atenuació de files: 250ms.
Hover de targeta
Imatge 1 → 1,06, 500ms settle; fila del crèdit 0fr → 1fr, 450ms settle
La mida del marc mai canvia.
Més projectes
Les targetes pugen des de fora de la pantalla, 800ms cubic-bezier(.7,0,.2,1), pas de 70ms
En tancar cauen en ordre invers a 35ms. Les 8 primeres s’escalonen. Atenuació de la pàgina: 500ms.
Retrat de Sobre mi
Cortina de baix a dalt de 1200ms reveal + zoom 1,14 → 1 en 1800ms
Quan la imatge ha carregat o ha fallat.
Menú mòbil
El panell es descobreix de dalt a baix en 700ms reveal; al revés en tancar
El desenfocament del darrere es fon en els mateixos 700ms.
Bàner de galetes
Es descobreix cap amunt des de la vora inferior en 700ms reveal; torna avall en tancar-se
També la primera vegada que apareix.
Ajustos de galetes
La fila creix de 0fr a 1fr mentre la llista es descobreix de dalt a baix, 700ms reveal
La resta del bàner puja amb ella.
Hover de color
150ms per defecte; 200ms als botons de text i les files del peu
Moviment reduït
Amb prefers-reduced-motion: reduce s’ometen totes les cortines, zooms, escalonats, pujades, animacions del carrusel i scrolls suaus: tot apareix i desapareix al seu lloc. Les foses de color es mantenen.
Interacció
Home
Un projecte per gest: roda o lliscament vertical de més de 30px (el gest acaba després de 160ms de pausa), o ↑ ↓ ← →.
Arxiu
⌘K / Ctrl+K porta el focus a la cerca (no si hi ha un diàleg obert); Esc l’esborra i en surt.
Projecte
La roda mou la galeria des de qualsevol punt (escriptori). Esc tanca Més projectes i després el projecte.
Més projectes
La roda vertical mou el carrusel en horitzontal. En obrir, el focus va a la primera targeta real, i en tancar torna al botó.
Tàctil / sense hover
Sense atenuació ni vista prèvia a la llista, sense zoom ni crèdit a les targetes.
URLs
/, /archive/, /about/, /archive/{slug}/, /legal/{slug}/, traduïdes sota /es/ i /ca/ (per exemple, /ca/arxiu/). La cerca i la vista no van a la URL; el botó Enrere funciona.
Enllaços creuats
Una categoria en un projecte, o un col·laborador a Sobre mi, obre l’Arxiu amb la cerca posada.
Accessibilitat
Contrast
Tot el text compleix WCAG AA (Mute 4,54:1 sobre blanc i 4,6:1 sobre negre). El blau mai és text sobre negre. El gris de filet mai és text.
Enllaços
Els enllaços dins del text van subratllats; dins del text corregut el color mai és l’única pista.
Semàntica
nav per als menús, dialog per al menú mòbil, time amb datetime per a anys i dates, dl per a la docència i role="switch" per als interruptors de galetes.
Encapçalaments
Un h1 per pàgina: el nom del web a la home, amagat visualment on la capçalera ja mostra el títol.
Amagat però present
La interfície plegada o fora de pantalla és inert (els ajustos de galetes i el carrusel tancats). Les imatges decoratives porten alt="" o aria-hidden. Els peus amagats de la home continuen sent llegibles.
Text alternatiu
Des del CMS; si no n’hi ha, el títol del projecte a les galeries i la home, el nom al retrat d’About i, en últim cas, el nom de l’arxiu.
Focus
El menú mòbil enfoca Tancar; els ajustos de galetes, el primer interruptor (sense fer scroll); Més projectes, la seva primera targeta; Torna amunt, el primer enllaç.
Regions vives
El recompte de l’Arxiu s’anuncia a mesura que canvia la cerca.
Paritat amb el teclat
Les vistes prèvies de la llista i les targetes reaccionen al focus igual que al hover.
Idioma
<html lang> segueix l’idioma; els enllaços d’idioma porten lang i hreflang.
Pendent
No hi ha anell de focus visible: :focus-visible fa servir un contorn transparent, que el mode de colors forçats sí que dibuixa.
Encara per fer
Pendent
No hi ha enllaç per “saltar al contingut”.
Encara per fer
Implementació
Tokens i utilitats
--font-primary
font
Geist Mono, ui-monospace, monospace
--text-base, --text-base--line-height
tipografia
12px / 16px
--color-black · white · gray · gray-light · blue
color
#000 · #FFF · #767676 · #E6E6E6 · #0000EE
--ease-reveal, --ease-settle
corba
cubic-bezier(0.76,0,0.24,1) · cubic-bezier(0.2,0.7,0.2,1)
--page-transition-duration
durada
300ms
--page-content-top
maquetació
172px / 32vh
--header-height
maquetació (en execució)
Alçada mesurada de la capçalera
--spacing-content-top
espaiat
24vh, desplaçament del contingut del menú mòbil
container
utilitat
Ample màxim 100%, 20px de farciment lateral
main-grid
utilitat
6 / 12 columnes, separació de 10px
main-gap
utilitat
Separació de 10px
pt-page-content
utilitat
Inici del contingut menys l’alçada de la capçalera
clip-to-top, clip-to-bottom, clip-none
utilitat
Estats de la màscara
stagger-rise
utilitat
Els fills pugen per torns (--stagger-*; --index o la seva posició entre germans; data-own-entrance els exclou)
scrollbar-none
utilitat
Scroll sense barra visible
scripted:
variant
Només s’aplica quan s’executa JavaScript
can-hover:
variant
Només s’aplica en dispositius amb hover