Designsystem
Stilguide til Elementor v4
Alle farver, typografi, spacing og komponenter på ét sted — klar til at blive overført til WordPress og bygget som Atomic Widgets i Elementor v4. Hvert token vises med sit CSS-variabelnavn, så det kan kopieres direkte ind i Site Settings → Global Styles.
01 — Farver
Brand-palette
Background
Sidens primære baggrund
oklch(0.985 0.008 85)
Foreground / Ink
Brødtekst, overskrifter, mørke knapper
oklch(0.18 0.015 60)
Cream
Sektionsbaggrund, kort, formularer
oklch(0.96 0.018 80)
Stone
Skillelinjer, sekundære borders
oklch(0.88 0.012 75)
Ochre
Dekorative accenter, badges
oklch(0.72 0.13 75)
Ochre Deep (Accent)
Hover, links, accent-knapper
oklch(0.5 0.12 65)
Forest
Sekundær accent / natur-tema
oklch(0.32 0.04 145)
Muted
Disabled / subtile flader
oklch(0.94 0.012 80)
Muted Foreground
Sekundær brødtekst, captions
oklch(0.38 0.018 60)
Border
Inputs, kort-borders
oklch(0.9 0.012 75)
02 — Typografi
Skrifter & skala
Display
Mad, hygge og natur
"Cormorant Garamond", serif
Body
The quick brown fox jumps over the lazy dog
"Inter", system-ui, sans-serif
Display
6rem
Mad, hygge og natur
H1
4.5rem
Mad, hygge og natur
H2
3rem
Mad, hygge og natur
H3
2rem
Mad, hygge og natur
H4
1.5rem
Mad, hygge og natur
Body Large
1.125rem
Mad, hygge og natur
Body
1rem
Mad, hygge og natur
Body Small
0.875rem
Mad, hygge og natur
Eyebrow
0.6875rem
Mad, hygge og natur
03 — Knapper
Atomic Buttons
Primary (Ink)
Secondary (Ochre)
Underline link
Ghost
On dark — outline-light
04 — Spacing
Skala
1
0.25rem
2
0.5rem
3
0.75rem
4
1rem
6
1.5rem
8
2rem
12
3rem
16
4rem
24
6rem
32
8rem
05 — Border radius
Hjørne-radius
None
0px
SM
2px
MD
4px
LG
6px
XL
10px
2XL
14px
3XL
20px
06 — Shadows
Box shadows
SM
MD
LG
XL
07 — Blocks
Genbrugelige byggeklodser
Hver blok herunder svarer 1:1 til en Elementor v4 Container med Atomic Widgets indeni. Strukturen kan kopieres direkte.
Block — Section Heading
02 — Eksempel
Drevet af Per & Sabrine siden 1987
Lad Dem rive med af historiens vingesus, i perfekte omgivelser uanset årstiden.
Elementor: Container (Flex column) → Heading (small) + Heading (h2) + Paragraph
Block — Image + Text
04 — Ophold
Bliv natten over.
Hyggelige værelser få skridt fra restauranten.
Elementor: Grid Container (2 cols) → Image | Container (Heading + Paragraph + Button)
Block — CTA Card
Reservér
Klar til en uforglemmelig aften?
Vi glæder os til at byde Dem velkommen.
Elementor: Container (bg=Ink) → Heading + Paragraph + Button
08 — Eksport
Tag designet med til Elementor
Klik på et token-navn ovenfor for at kopiere variablen. Eller eksportér hele systemet som JSON og importér det i jeres workflow.