Style guide

Designsystem for Bornholm Food Tours – farver, typografi, knapper og komponenter, som de bruges på sitet.

Farver

Brand brown
#292420
--brand-brown
Brand brown light
#342e2a
--brand-brown-light
Brand green
#25bd84
--brand-green
Brand beige (bg)
#e3ddd6
--brand-beige
Brand beige dark
#d4cfc9
--brand-beige-dark
White
#ffffff
--color-white

Fonte

"Right Grotesk Compact" · --font-sans-compact · weight 900 · Display / kategori-overskrifter (UPPERCASE)
SMAG PÅ BORNHOLM
"Alice" · --font-serif · weight 400 · Article / story headings
En kurateret rejse gennem øen
"Plus Jakarta Sans" · --font-sans · weight 100–900 (normal + italic) · Body, UI, navigation
Vi guider dig gennem det nye nordiske køkken.

Overskrifter

Sitet bruger tre heading-systemer. Rå <h1>–<h6> uden klasse arver Plus Jakarta Bold og bruges sjældent direkte – brug i stedet en af klasserne herunder.

Compact (Right Grotesk) – hero & sektioner

.compact-heading-6xl
Right Grotesk · 900
SMAG PÅ BORNHOLM
.compact-heading-5xl
Right Grotesk · 900
SMAG PÅ BORNHOLM
.compact-heading-4xl
Right Grotesk · 900
SMAG PÅ BORNHOLM
.compact-heading-3xl
Right Grotesk · 900
SMAG PÅ BORNHOLM
.compact-heading-2xl
Right Grotesk · 900
SMAG PÅ BORNHOLM

Serif (Alice) – artikler & story-cards

.story-article__title
Alice · 500 · font-size-4xl
Tilbage til naturen: Sjælegaard
.story-card__title
Alice · 500 · font-size-3xl
Hvad du kan forvente på en Bornholm Food Tour

Prose (Plus Jakarta) – artikelindhold

Bruges inde i .prose-wrapper (Markdown-konverteret tekst).

Prose H1 – sjældent brugt

Prose H2 – afsnitsoverskrift

Prose H3 – underafsnit

Prose H4

Typografi-skala

--font-size-5xl
clamp(1.9rem → 4.8rem)
H1 / display
Bornholm Food Tours
--font-size-4xl
clamp(1.4rem → 2.5rem)
H2
Bornholm Food Tours
--font-size-3xl
clamp(1.2rem → 1.8rem)
H3
Bornholm Food Tours
--font-size-2xl
clamp(1.25rem → 1.75rem)
H4
Bornholm Food Tours
--font-size-xl
clamp(1.06rem → 1.375rem)
H5 / lead
Bornholm Food Tours
--font-size-lg
clamp(1rem → 1.125rem)
H6
Bornholm Food Tours
--font-size-base
clamp(0.975rem → 1.09rem)
Body
Bornholm Food Tours
--font-size-sm
0.875rem
Small / meta
Bornholm Food Tours
--font-size-xs
0.75rem
Caption
Bornholm Food Tours

Knapper

Alle knapper bruger basisklassen .btn kombineret med en variant.

Default (.btn)
<a class="btn">
Brown (.btn-brown)
<a class="btn btn-brown">
White (.btn-white)
<a class="btn btn-white">
Beige dark
<a class="btn btn-beige-dark">
Huge brown
<a class="btn btn-huge btn-brown">
Med pil
<a class="btn icon-arrow">

Radius

sm
base
md
lg
xl
2xl (btn)
full

Spacing-skala

--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-8
--space-10
--space-12
--space-16
--space-20
--space-24