Jeg ville at første skjermbilde skulle føles som kart og arbeidsbord, ikke som et SaaS-dashboard. Tokens, typografi og én ærlig hero. Ikke kortstokk, ikke statistikk-stripe, ikke «premium glow».
Sti-notatet ditt
Du har brief, stakk og hello-world lokalt. Denne delen legger til: CSS-variabler (tokens) og en hero som følger briefens tone, synlig i nettleseren.
Mangler lokal side? Få npm run dev opp først. Design uten forhåndsvisning blir gjetning.
Historie
Standardmalen møtte meg med generisk font, flat bakgrunn og tre kort under folden. Det så ut som alle andre «AI-landingssider». Briefen min sa noe annet: rolig, jordnær, merke først.
Jeg ba ikke om «et komplett design system». Jeg ba om variabler for farge og tekst, én display-font som ikke var Inter, og en hero som fylte flaten: merke, én overskrift, én setning, én CTA. Resten kunne vente.
Da jeg fjernet dashboard-reflekser (kort, badges, pills), begynte siden å ligne briefen. Ikke ferdig merkevare. Men retning.
Prinsipp
Første viewport er én komposisjon: merke, budskap, CTA, flate. Ikke et dashboard.
Hvis noen fjerner navigasjonen og siden kunne hørt til hvem som helst, er brandingen for svak.
Hvordan
Jobb lokalt. Hold deg til det synlige minimumet:
-
Tokens — CSS-variabler for bakgrunn, tekst, aksent, linje. Gi dem navn du forstår (
--bg-deep,--text-primary,--accent). - Typografi — én expressiv display-font til merke/hero, én lesbar sans til brød. Unngå standard Inter/Roboto/Arial som «identitet».
- Hero-regler — full bredde (full-bleed), ikke innfelt bildekort. Merke synlig som hero-signal. Én headline. Én støttesetning. Én CTA-gruppe. Ingen stats, badges eller kort oppå bildet.
- Anti-mål fra briefen — sjekk at de faktisk er synlige valg (ingen card-grid i hero, ingen hype-pills).
Prinsippene speiler docs/DESIGNPLAN.md for Digitalt kompass. Du trenger ikke kopiere hele paletten. Du trenger dine tokens + en hero som følger samme logikk: kart, ikke oracle.
Forklar mer Tokens og hero uten jargon-tåke
Tokens = navngitte verdier (farger, fontstørrelser) du gjenbruker. Endrer du --accent, følger knapper og lenker med.
Hero = første synlige flate på siden. Den skal gjøre én jobb: si hvem dette er, hva det handler om, og hva du kan gjøre.
Full-bleed = flaten går kant til kant. Ikke et avrundet bilde i en kolonne som «dekor».
Se forskjellen i praksis:
Vagt
«Få det til å se profesjonelt ut.»
Skarpt
«Tokens i :root. Display-font på merket. Hero: merke + én H1 + én setning + én CTA, full bredde, ingen kort.»
Vanlig felle
Å bygge «feature-kort» og pill-rader før merket sitter. Eller å be AI om «moderne SaaS-UI». Da får du dashboard-følelse med en gang. Be om kart. Sjekk mot anti-mål.
Slik så det ut hos meg
Digitalt kompass bruker mørkt blekk, papir til lesing, teal som aksent, Source Serif til merke og Source Sans til brød. Hero uten kortstokk. Detaljene står i designplanen. Poenget her: tokens først, hero først, resten senere.
Resultatet hos meg: lokal forhåndsvisning der første viewport allerede sa «dette er oss», ikke «generisk produkt».
Med AI
Åpne prosjektet i Cursor. Lim inn brief + dette:
Tekst du kan lime inn i AI
Jeg har et Vite+React-prosjekt som kjører lokalt. Brief: [lim inn mål, tone, CTA, anti-mål] Oppgave i dag (ikke mer): 1) Legg CSS-variabler (tokens) for bakgrunn, tekst, aksent 2) Sett display-font + brødfont (ikke Inter/Roboto/Arial som merkevare) 3) Bygg én full-bleed hero: merke, én headline, én setning, én CTA 4) Ingen kort, badges, stats eller pill-clusters i første viewport Følg ånden i en designplan for «kart / arbeidsbord», ikke SaaS-dashboard. Vis meg filene du endrer. Én ting om gangen hvis jeg ber om det. Tone: rolig, ærlig, ingen guru-språk.
Godkjenn visuelt i nettleseren. Stryk det som bryter anti-mål.
I dag (under 20 min)
Få tokens og hero live lokalt. Skriv i sti-notatet: «Tokens: ja. Hero: ja.» Ta gjerne et skjermbilde til deg selv.
Ser det 80 % riktig ut? Stopp. Finpuss i morgen. Det er greit.
Sjekk før du går videre
- Nå: tokens + hero synlig lokalt
- Neste (Del 6): innhold først: sider og IA, ikke «features»
Du har en flate som føles som deg. Neste steg er å bestemme hvilke sider som finnes: landing, hub, artikkel. Uten det kartet blir meny og CTA gjetning, uansett hvor pen heroen er.