DESIGN

Skiltdata — Designrationale

Gratis norsk regnr-oppslagstjeneste. Konkurrent til skiltnummer.no. Designretning: “Vegskilt” — hentet direkte fra norsk vegskilting (Statens vegvesen), ikke fra generisk SaaS-/AI-estetikk.

1. Designfilosofi

Tjenesten selger én ting: tillit til myndighetsdata, levert på sekunder. Alt i designet tjener det. I stedet for å oppfinne et visuelt språk, låner vi det brukeren allerede stoler på blindt hver dag: det norske vegskiltet og bilskiltet.

Tre bærende prinsipper:

Skiltet er interaksjonen. Søkefeltet ER et norsk kjennemerke — hvit plate, blå EU-stripe med norsk flagg + «N», svarte tegn. Ingen forklaring nødvendig; nordmenn vet umiddelbart hva de skal skrive.
Signalfarger, ikke merkevarefarger. Vegvesen-blå bygger tillit, signalgul (samme gul som fareskilt/vegarbeid) styrer blikket til det ene som haster: EU-kontroll-fristen.
Data som skilt. Resultatene leses som en informasjonstavle — tydelig hierarki, store tall, tabulære siffer, ingen pynt som konkurrerer med fakta.

Bevisst unngått (per brief): lilla gradienter, cream+terrakotta, Inter-default, stock-foto-hero + 3 like kort. Ingen av delene finnes her.

2. Palett (hex)

Fargene er trukket fra norsk skiltmanual: motorvegtavle-blå + fareskilt-gul.

Lyst tema

Rolle	Hex	Bruk
`--bg`	`#eef1f5`	Kjølig papirgrå bakgrunn
`--surface`	`#ffffff`	Kort
`--surface-2`	`#f6f9fc`	Nedfelte felt / tabellstriper
`--border`	`#dbe2ec`	Hårfine rammer
`--ink`	`#111820`	Primærtekst (aldri ren svart)
`--ink-2`	`#4c5a6b`	Sekundærtekst
`--ink-3`	`#7d8a9a`	Etiketter/muted
`--blue` (Skiltblå)	`#0b4a93`	Merkevare, EU-stripe-slekt, lenker
`--blue-soft`	`#e7f0fb`	Blå chip-bakgrunn
`--yellow` (Vegvesengul)	`#ffce00`	ÉN aksent: haster-signal, understreking
`--green`	`#1f9d55`	EU-kontroll godkjent / god tid
`--amber`	`#e08600`	«Frist nærmer seg»
`--red`	`#d64027`	«Frist utløpt»

Mørkt tema

Rolle	Hex
`--bg`	`#0a1017` (dyp blånatt, ikke ren svart)
`--surface`	`#131c27`
`--border`	`#24313f`
`--ink`	`#eef3f8`
`--blue`	`#3d8be0` (lysnet for kontrast)
`--yellow`	`#ffd426`
`--green` / `--amber` / `--red`	`#34c176` / `#f0a532` / `#f2664b`

Konstant på tvers av tema (autentisitet)

Selve skiltet holder seg hvitt i begge tema — ekte norske kjennemerker er alltid hvite. EU-stripa har fast skiltblå #0b3fa0. Dette er en bevisst detalj: platen skal se ut som en fysisk plate, ikke som en UI-komponent som bytter farge.

3. Typografi

Ingen webfonter (selvstendig fil, null eksterne kall). Vi lener oss på en sign-grotesk-stack som ekko av Trafikkalfabetet: humanistisk/nøytral grotesk lik Helvetica/Frutiger, som norsk skilting faktisk bygger på.

font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

Karakter skapes uten fonter — gjennom stram tracking, tunge vekter og versal-etiketter:

Stil	Størrelse	Vekt / tracking	Bruk
Display	clamp(2.1–3.4rem)	800 / `-0.03em` / leading 1.05	Hero-H1
Platetegn	clamp(1.6–2.6rem)	800 / `+0.06em`	Selve søkeplaten
Kort-tall	1.75–2.25rem	800 / tabular-nums	Nøkkelverdier (dager, vekt)
Seksjonstittel	1.15rem	700 / `-0.01em`	Korttitler
Brødtekst	0.95rem	400 / leading 1.6	Beskrivelser
Etikett	0.72rem	700 / `+0.08em` VERSAL	Feltetiketter, «ANNONSE»

Alle tallverdier bruker font-variant-numeric: tabular-nums slik at data står i kolonne som på en tavle.

4. Layoutkonsept

Mobil-først (majoriteten slår opp regnr på mobil): alt stables i én kolonne, platen er full bredde og tcommanderer skjermen. Fra lg åpner asymmetri seg.

Hero / søk

Sentrert, luftig. Rekkefølge: liten tillitspille → H1 → undertittel → den store platen → eksempel-chips → tillitsrad (kilde: Statens vegvesen · gratis · sikker). Platen er scenens midtpunkt; ingenting konkurrerer.

Resultat — asymmetrisk innhold + annonserail

Ikke et rutenett med 4 like kort. Hierarki:

Sammendrag-panel (full bredde) — mørk blå gradient, stor plate + merke/modell/år + statuspille. Resultatets «hero».
EU-kontroll-banner (full bredde, aksentuert) — dominerende. Sirkulær nedtellingsmåler (dager til frist) + tidslinje + status. Dette er det brukeren egentlig kom for.
3-kolonners rad (ulik vekt): Motor & drivstoff · Vekt & mål · Registrering.
Native ANNONSE in-feed.

På desktop ligger dette i venstre hovedkolonne (1fr); høyre annonserail (300px) holder to diskrete ANNONSE-plassholdere (300×250 + sticky skyskraper) og et lite tips-kort. Rutenettet kollapser rent til én kolonne på mobil, annonsene blir in-feed.

Annonseplasser (streket «ANNONSE»-plassholder)

Leaderboard under hero · rail-rektangel + skyskraper på desktop · én native in-feed i resultatstrømmen. Alltid streket ramme, dempet, tydelig merket — aldri forkledd som data.

5. Komponentliste

Plate-søk — interaktiv: auto-formaterer input (VERSAL, mellomrom etter 2 bokstaver), norsk flagg tegnet i ren CSS-gradient, «Slå opp»-knapp. Enter/klikk → resultat.
Eksempel-chips — ferdige regnr som gir kuraterte biler (EL/diesel/hybrid-variasjon).
Sammendrag-panel — gradient, plate-render, status «Registrert», hurtigfakta-chips.
EU-kontroll-måler — SVG-ring med stroke-dashoffset-animasjon, fargekodet (grønn/gul/rød) etter dager igjen; regnes dynamisk fra første reg. (4 år, så hvert 2. år).
Datakort — etikett/verdi-rader med tabulære tall og hårfin skillelinje.
Statuspille — glødende prikk + tekst (god tid / frist nærmer seg / utløpt).
Tema-bytter — sol/måne, prefers-color-scheme som default + data-theme-override.
Annonseplassholder — streket, «ANNONSE»-etikett, tre formater.
Skjelett/tomtilstand — kort shimmer-lasting før resultat vises.
Footer — kilde/ansvarsfraskrivelse, personvern, kontakt.

6. Bevegelse

Diskret og myndighetsverdig — ingen sprett i selve dataen. - Hero-plate: fadeInUp 700ms ease-out-expo, stagger på undertekst/chips. - Resultatkort: stagger fadeInUp (60ms/kort) ved hvert oppslag. - EU-ring: stroke-dashoffset teller opp fra tom → mål (900ms), gir nedtellingsfølelse. - Knapp/kort/chip: hover-løft + fargeskift, alltid ≥150ms; fokus-ring for tastatur. - prefers-reduced-motion respekteres.

7. Filer

DESIGN.md — dette dokumentet.
mockup.html — selvstendig, interaktiv (skriv regnr → oppslag), lyst+mørkt tema.