[Kolofon]
Sådan er siden lavet
Den her side er bygget af det samme studie som bygger siderne til kunderne, med de samme valg og de samme begrænsninger. Så her står hvad den er lavet af.
[01] Skrift
Tre snit, ingen flere
Archivo bruges kun som arkitektur — de store ord der holder en komposition sammen. Geist er til alt der skal læses. Geist Mono bærer al småtekst: labels, sektionsmarkører, specs og billedtekster.
- Display
- Archivo Variable, bredde-akse sat til 118
- Brødtekst
- Geist
- Mono
- Geist Mono
- Hvorfor variabel
- Bredde-aksen giver den strakte plakat-form uden at hente et ekstra snit ned.
[02] Farve
Orange er territorie, ikke tekst
#ff7a3d måler omkring 1,9:1 mod papirbaggrunden. Det er ikke læsbart, og derfor bruges det aldrig til brødtekst på lys bund. I stedet ejer det hele felter: et bånd, en knap, en streg.
- Papir
- #dbdbd8 — sidens grund
- Blæk
- #0d0d0c
- Ember
- #ff7a3d — låst, brandfarven
- Grunde
- Tre: paper, ink, ember. Et bånd skifter grund, og alle tokens skifter med. Ingen dark:-varianter nogen steder.
[03] Teknik
Custom kode, ingen builder
Samme stak som studiet bygger kundeprojekter i, når projektet har brug for mere end en skabelon.
- Framework
- Next.js 16, App Router
- UI
- React 19, TypeScript
- Styling
- Tailwind CSS v4 med @theme og egne tokens
- Bevægelse
- Motion, plus Lenis til vægtet scroll
- Sideskift
- Browserens egen View Transitions API
[04] Bevægelse
Altid til at slå fra
Bevægelse er pynt her, aldrig information. Ingenting på siden kræver at du ser en animation for at forstå den.
- Reduceret bevægelse
- prefers-reduced-motion slår både Lenis og alle reveals fra
- Touch
- Lenis kører ikke på touch — der er systemets egen scroll bedre
- Ankre
- anchors: false, så browserens spring til #id stadig virker
[05] Målt
Efterprøvet, ikke påstået
Sitet blev redesignet fra bunden med 138 URL'er i luften. For ikke at tabe noget undervejs blev der bygget et værktøj der tager et øjebliksbillede af hver enkelt side og sammenligner det med den gamle version.
- Ruter i tjekket
- 138
- Hvad der sammenlignes
- titel, metabeskrivelse, canonical, hreflang, hvert JSON-LD-felt, hver H1
- Bevidste ændringer
- skal skrives ned med en begrundelse, ellers fejler tjekket
- Resultat
- 0 tab
[Videre]
Vil du vide hvordan det samme bliver til dit projekt, er processen skrevet ned trin for trin.