Designguide · version 1 · oktober 2026

Designguide

Sådan bruges designet på bechster.dk: logo, farver, typografi, komponenter, bevægelse, lyd og billeder, og til sidst hvordan det samme system oversættes til papir.

01 · Principper

Fire regler

Neon med måde

Glød, chrome og gradienter er krydderi. Brug dem på titler, logo, knapper og scenen i toppen, aldrig på brødtekst.

Læsbarhed før glød

Al tekst skal have mindst AA-kontrast (4,5:1) i både lys og mørk tilstand. Effekter må aldrig være den eneste bærer af information.

Let som en kassette

Ingen webfonte, ingen frameworks. CSS og JS fylder omkring 11 kB komprimeret. Nye elementer skal bygges med de tokens, der findes.

Dag og nat

Alt designes i begge tilstande. Lys tilstand er «Miami-daggry», mørk tilstand er «midnat». Farver skrives altid som tokens med light-dark().

02 · Logo

Solen og ordet

Logoet består af den stribede sol og ordmærket «Bechster» sat i chrome. Solen kan stå alene som ikon, f.eks. som favicon eller avatar. Ordmærket står aldrig uden solen.

BechsterLys tilstand

BechsterMørk tilstand

Den stiplede ramme viser frirummet: mindst en halv soldiameter hele vejen rundt. Mindste størrelse er en sol på 1,25rem (20px) på skærm og 8 mm på tryk.

Gør

Brug SVG'en inline, så farverne følger temaet.
Brug logo-sol.svg (faste farver) uden for sitet.
Placér logoet på rolige flader: baggrundsgradienten, mørk nat eller hvid.

Undgå

At strække, rotere fast eller skygge solen på nye måder.
At fjerne eller flytte striberne.
At give solen andre farver end --sun1–--sun3.
At lægge logoet direkte på uroligt foto uden en mørk eller lys plade.

03 · Farver

Palet

Hvert felt viser lys tilstand til venstre og mørk til højre. Farverne er defineret som CSS-variabler i :root i main.css og skifter automatisk med temaet.

--bg0: Baggrund, top; Lys #ffd8c2 · Mørk #0f0420

--bg1: Baggrund, midte; Lys #ffc2d9 · Mørk #1b0636

--bg2: Baggrund, bund; Lys #e3cdfb · Mørk #2a0845

--ink: Brødtekst, overskrifter; Lys #2a0845 · Mørk #f6ecff

--muted: Metadata, sekundær tekst; Lys #5a2370 · Mørk #cdb8ee

--mag: Primær accent, links, knapper; Lys #b0127a · Mørk #ff2bd6

--cyan: Sekundær accent, ghost-knapper; Lys #005c5c · Mørk #00f0ff

--orange: Gradienter, foto-kategori; Lys #a13d00 · Mørk #ff8a3d

--yellow: Grafisk design-kategori, mærkater; Lys #7a5200 · Mørk #ffe66d

--sun1: Sol og logo, top; Lys #ffef9e · Mørk #ffe66d

--sun2: Sol og logo, midte; Lys #ff9c5b · Mørk #ff8a3d

--sun3: Sol og logo, bund + glød; Lys #e43d93 · Mørk #ff2bd6

Kontrast: --ink og --muted må bruges til al tekst. --mag, --cyan, --orange og --yellow må bruges til tekst i begge tilstande, men kun som accent: links, metadata og etiketter. Faste signalfarver, der ikke skifter med temaet (glitch, stjerner, mærkater), ligger som --k-*-tokens.

04 · Typografi

Skrift

Overskrifter: Neo-Grotesque

Inter, system-ui, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif

Vægt 900, ingen kursiv, stram spatiering (−0,025em til −0,045em). Inter, hvor den er installeret, ellers platformens egen font (system-ui), som har en ægte Black-vægt på Apple, Windows og Android. Variabel: --f-head.

Brødtekst og UI: Monospace Code

ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace

Al brødtekst, metadata, knapper og etiketter. Labels i versaler med 0,1–0,14em spatiering. Variabler: --f-body og --f-mono.

--t-4
Hero-titel · clamp(2.9rem → 8rem)

Hej, jeg er Morten.

--t-3
Sektionstitel · clamp(2rem → 3.6rem)

Udvalgte projekter

--t-2
Mellemrubrik · clamp(1.45rem → 2.1rem)

Seneste fra bloggen

--t-1
Korttitel, ingress · clamp(1.2rem → 1.5rem)

Valgkort 2025

--t-0
Brødtekst (mono) · clamp(1rem → 1.18rem)

Frontendudvikler og designer med en bibliotekars trang til orden.

--t--1
Metadata, knapper, chips · clamp(.78rem → .86rem)

13. JANUAR 2026 · 7 MIN LÆSNING

Chrome-titler

Klassen .chrome bruges kun på sidetitler (h1), sektionstitler, logoet og store nøgletal. Gradienten gentages én gang pr. linje med horisonten ved 60 % af linjehøjden. Outline (1px) og 3D-skygge følger automatisk med.

Brødtekst

Maks. linjelængde 58–68 tegn (ch). Linjehøjde 1,65–1,75. Brug text-wrap: pretty på afsnit og balance på overskrifter.

05 · Komponenter

Byggeklodser

Knapper

Primær Sekundær Tertiær

Én primær knap pr. visning. Knapper er skrå (−10°) med lige tekst. Tekst i versaler, kort og handlingsorienteret.

Kategori-chips

WebGrafisk designKunstFotoNoterLinks

Farven følger kategorien via data-cat. Samme farvekode bruges i filtre, kort og tags.

Sektionshoved

03 · Signaler

Titel i chrome

Kicker med //-præfiks, nummer og emne, derefter titlen. Evt. «Se alle →» til højre.

Web2025

Kort: projekt eller indlæg

Billede i 3:2, metadata, titel og en linjes resumé. Hele kortet gløder ved hover, og billedet får et kort VHS-glitch.

Gentagne mønstre

Kort: portefølje, blog, relaterede indlæg.
Feeds: Mastodon-opslag og Pixelfed-polaroids.
Paginering, filtre og forrige/næste har samme opbygning overalt.
Klassenavne følger WordPress, hvor det giver mening (.entry-title, .entry-meta), så de kan mappes direkte til skabeloner.

06 · Bevægelse og lyd

Tempo

Bevægelse

Easing: --ease (cubic-bezier .2, .8, .2, 1), 0,25–0,6 s for UI.
Scenen i toppen: solen går langsomt ned, gulvet kører uendeligt.
Temaskift: dag stiger op fra bunden, nat falder ned fra toppen.
Titler animeres ikke.
Alt slås fra ved prefers-reduced-motion.

Lyd

Cuelume med temaet «bubble». Slået fra som standard.
Biblioteket (~9 kB) hentes først, når brugeren slår lyd til, og det leveres fra dette site.
Lyd på klik, navigation og skift, aldrig på hover eller scroll.

CRT-scanlinjer

Valgfrit lag med vandrette linjer, slået til med knappen i headeren. Det er dekoration og må aldrig gøre tekst sværere at læse.

07 · Billeder og tone

Indhold

Billeder

Formater: 3:2 til kort og hero, 1:1 til Pixelfed, 4:5 til portræt.
Fotos vises i deres egne farver. Neon kommer fra rammen og gløden, ikke fra filtre på billedet.
Altid width/height, loading="lazy" og en meningsfuld alt-tekst på dansk.

Tone

Personlig, nysgerrig, tør humor.
Korte sætninger. Ingen overdreven selvros.
80'er-referencer i mikrotekster (Player 1, side A/B, high score) med måde: højst én pr. visning.

08 · Print

På papir

Systemet kan bruges til plakater, flyers, visitkort og zines. Tokens, skrifttyper og logo oversættes direkte, men neon og glød skal oversættes: skærmens lys findes ikke på papir.

Lys eller mørk?

Lys tilstand er udgangspunktet for print, fordi papiret er lyst og teksten bliver skarpest. Mørk tilstand egner sig til plakater og flyers med fuld udfaldende baggrund, hvor neonfarverne kommer bedst til deres ret.

Skrift

Systemfonte kan ikke indlejres pålideligt i trykfiler. Brug i stedet de frie fonte Inter (overskrifter, 900) og Source Code Pro eller JetBrains Mono (brødtekst). Alle tre har SIL Open Font License. Brødtekst i mono mindst 9 pt med 1,4 i linjeafstand.

Chrome og glød

Chrome-gradienten trykkes som vektorgradient i CMYK med outline og 3D-skygge som solide flader. Glød kan ikke trykkes. Erstat den med en lys aura i baggrundsfarven, eller drop den. Til særtryk kan titler og logo trykkes i sølvfolie eller metallisk Pantone for ægte chrome.

Farver til tryk

Token	Skærm	CMYK (vejledende)	Spotfarve-forslag
--mag (mørk)	#ff2bd6	0 · 85 · 15 · 0	Pantone 806 C (fluorescerende pink)
--cyan (mørk)	#00f0ff	100 · 5 · 0 · 0	Pantone 801 C (fluorescerende blå)
--orange (mørk)	#ff8a3d	0 · 45 · 75 · 0	Pantone 804 C (fluorescerende orange)
--yellow (mørk)	#ffe66d	0 · 10 · 55 · 0	Pantone 803 C (fluorescerende gul)
--mag (lys)	#b0127a	0 · 90 · 30 · 30	Proces-CMYK
--ink (lys)	#2a0845	40 · 90 · 0 · 75	Proces-CMYK
--bg0 (mørk)	#0f0420	55 · 90 · 0 · 85	Rig sort med lilla undertone
--bg0 (lys)	#ffd8c2	0 · 15 · 25 · 0	Proces-CMYK, eller farvet papir

Neonfarverne ligger uden for det, CMYK kan gengive, og bliver mattere på papir. CMYK-værdierne er en direkte omregning og kun et udgangspunkt. Bestil altid et prøvetryk, og tjek spotfarverne i en Pantone-guide. Risograf og serigrafi med fluorescerende farver kommer tættest på skærmen.

Mål og opsætning

Basisenhed: 1rem ≈ 12 pt. Typeskalaen bruges som den er, med den største værdi i hver clamp().
Margen mindst 12 mm, beskæring (bleed) 3 mm.
Billeder i 300 ppi ved 100 % størrelse.
Grid-gulv og scanlinjer som vektormønstre, stregtykkelse mindst 0,25 pt.

Logo på tryk

Eksportér solen fra logo-sol.svg til PDF som vektor.
Mindste størrelse: 8 mm sol.
Ét-farvet version: hele solen i --ink eller hvid, striberne bevares som udsparinger.

Udskrift af websiden

Temaet har et print-stylesheet (assets/css/print.css, indlæst med media="print"): A4, altid lys palet, uden scene, stjerner, scanlinjer, glød, navigation, filtre, knapper, feeds og relaterede indlæg. Chrome-titler, logo, farvefelter og færdighedsbjælker beholder farverne (print-color-adjust: exact), eksterne links får adressen efter linkteksten, kort printes i tre kolonner uden sideskift inde i dem, og kolofonen slutter med »Udskrevet fra …«.