Designguide · v1
Visuel identitet

Moderne skandinavisk — energi uden science fiction.

Nordisk natur, varmt papir og ét energisk grønt pift der signalerer strøm og elbiler. Roligt, jordnært og til at stole på — ikke neon, ikke Tron.

01

Principper

Fire pejlemærker for alle designvalg.

🌾
Varme frem for kuldeVarmt off-white papir frem for kølig grå. Det føles venligt, dansk og imødekommende.
⚡
Ét energisk piftDen grønne lade-accent bruges sparsomt og bevidst — så betyder den noget hver gang.
🔢
Tal er æstetikPriser og kWh sættes i mono som aflæsninger på en måler. Data bliver en del af udtrykket.
🍃
Ro og luftGenerøs whitespace, blød geometri, ingen larm. Brugeren skal kunne tænke.

✕ Undgå (anti-Tron)

  • Sorte flader med glødende neon-cyan/magenta
  • Tunge gradient-glows, lasergitre, HUD-effekter
  • Futuristiske, tekniske display-fonte
  • Blinkende eller "elektriske" animationer

✓ Gør i stedet

  • Papir-baggrund, naturgrøn og blød skygge
  • Karakterfuld men varm typografi (serif + grotesk)
  • Lynet som enkelt, geometrisk mærke — aldrig glødende
  • Rolige, bløde entré-animationer
02

Farver

Varme neutraler, brand-grønne, ét accent-pift og dæmpede funktionsfarver.

Neutraler — varm canvas

#F3F0E8
Canvas--canvas
#FAF8F2
Surface--surface
#E9E4D8
Surface sunk--surface-sunk
border .14
Border--border

Brand-grønne

#15241D
Ink--ink
#1E3A2E
Pine--pine
#3A6B57
Pine soft--pine-soft
#5C6B62
Text muted--text-muted

Accent — lade-energi

#C2ED4B
Volt--volt
#8FBF1E
Volt deep--volt-deep
#C9683F
Clay (varm sek.)--clay
#E4A93A
Amber (tertiær)--amber

Funktionelle

#2F8F5B
Success--success
#E4A93A
Warning--warning
#C2452F
Danger--danger
#3F6F8F
Info--info
03

Accent-retning

Det ene pift definerer identiteten. Vælg — lime er min anbefaling.

★ Anbefalet
Volt-lime#C2ED4B
Energisk, "opladning", men naturlig.
Signal-grøn#7BD389
Blødere, mere afdæmpet.
Rav/amber#E4A93A
Varm, solenergi-følelse.
Dæmpet blå#5B86A8
Rolig, tillid — mindre "el".
04

Typografi

Varm serif til display, ren grotesk til UI, mono til tal.

Fraunces — Displayweight 600 · overskrifter
Find din billigste ladeaftale
Hanken Grotesk — UI & brødtekst400 / 500 / 600 / 700
Du behøver ikke vide noget om strøm, afgifter eller biler. Vi har sat fornuftige standardværdier — du retter bare til hvis du vil.
DM Mono — tal & måler-labelspriser · kWh · kicker
7.799 kr/år · 2.700 kWh · 180 Wh/km
Type-skalaklikbar reference
display-xlAaFraunces 600 · clamp(40–76)
displayAaFraunces 600 · clamp(28–44)
h3AaHanken 700 · 21px
bodyAaHanken 400 · 16px · lh 1.5
captionAaDM Mono 500 · 12px · uppercase
05

Komponenter

Knapper, badges, formfelter og kort — bygget på samme tokens.

Knapper
Badges & tags
★ Bedst for dig
Spot + tillæg⚡ inkluderet6 mdrv2026
Funktionsfarver
Besparelse Advarsel Fejl Info
Formfelter
180 Wh/km
Resultat-kort ("bedst")
Clever All-in-one ★ Bedst for dig
Spot + tillæg⚡ inkluderet6 mdr
7.799
kr / år
↓ spar 740 kr
06

Bevægelse & ikoner

Roligt og blødt. Aldrig blink eller glød.

🎞️
BevægelseEasing cubic-bezier(.2,.8,.2,1). Én velorkestreret entré pr. skærm (staggered). Hover = blødt løft 2px. Respektér prefers-reduced-motion.
✒️
IkonerLine-style, 1.5px streg, runde joins. Geometriske og rolige. Lynet er brand-motivet — enkelt og fyldt med volt, aldrig glødende.