Stilbog

Sidens farver, streger og skrift — samlet ét sted.

Her kan du se alt det, sidens udtryk bygger på. Vil du ændre en farve eller en skrift, så skriv til mig, hvad der skal laves om — eller ret værdien det sted, der står under hver ting.

Alle farver og skrifter står samlet i filen src/styles.css. Ændrer du en værdi dér, skifter den samme sted på hele siden.

Farver

Navnet under hver farve er den værdi, der skal rettes.

Baggrund (creme)

Sidens grundfarve

--background: #fbf6ec

Tekst (varm kul)

Al brødtekst og overskrifter

--foreground: #2a2320

Rust (primær)

Links, knapper, fremhævede titler

--primary: #7a3b24

Papir

Rolige felter og kort

--papir: #f3ebdc

Streg

Alle tynde linjer og rammer

--border: #ddcfb8

Dæmpet tekst

Noter, bylines, småtekst

--muted-foreground: #6a5a4c

Jord

Håndskrevne linjer under overskrifter

--jord: oklch(0.375 0.05 50)

Okker

Små accenter og understregninger

--okker: oklch(0.72 0.13 78)

Sand

Markering og bløde streger

--sand: oklch(0.8 0.058 74)

Mint

Statusmærke: under udvikling

--mint: oklch(0.87 0.035 150)

Himmel

Statusmærke: projekt

--himmel: oklch(0.78 0.05 210)

Fersken

Reserveret accent

--fersken: oklch(0.85 0.068 38)

Salvie

Reserveret accent

--salvie: oklch(0.55 0.05 120)

Lavendel

Reserveret accent

--lavendel: oklch(0.87 0.032 300)

Typografi

Overskrifter · Source Serif 4 · --font-serif

Små handlinger. Store forskelle.

Bruges til h1–h4 og citater. Vægt 600–700, tæt linjeafstand.

Brødtekst · Source Sans 3 · --font-sans

Dette er den almindelige tekst. Den er sat i 17 px med luftig linjeafstand, så den er rolig at læse på både telefon og computer.

Størrelse og linjeafstand står under body i stilfilen.

Håndskrift · Dancing Script · --font-hand

Nogle idéer er bøger. Andre nægter at være det.

Bruges til slogan, korte linjer under overskrifter og noter. Aldrig til lange afsnit.

Størrelser

Sidetitel

Afsnitsoverskrift

Underoverskrift

Brødtekst

Småtekst og noter

Etiket i versaler

Streger og tykkelser

Hårfin

Sidens afslutning, små skillelinjer

Normal ramme (1 px)

Kort, tabeller, sektionslinjer

Markeret (2 px)

Links med streg under, statusmærker

Kraftig (3 px)

Bruges sjældent — kun til stærk vægt

Hjørner er skarpe overalt — ingen runde kanter. Det er værdien --radius: 0rem.

Elementer

Knap

Skriv til mig →

Link med streg

Læs mere

Statusmærker

Under udviklingPå vejUdviklingsprojekt

Blyantsmarkering

Et ord kan markeres med okker.

Vil du ændre noget?

Skriv fx “gør rustfarven mørkere” eller “jeg vil have en anden overskriftsskrift”, så retter jeg det ét sted, og det slår igennem på alle sider.