KlonKaffe Brand Guide

Farver, typografi, knapper, spacing og komponenter samlet ét sted.

Farver

Primære farver

KlonKaffe Gul#EEC643Primær baggrund, CTA-accenter
Magenta#DA70D6Sekundær baggrund, accent, links
Sort#1A1A1ATekst, overskrifter
Hvid#FFFFFFSurface, kort, modaler

Støttefarver

Off-white#FFF8E7Elevated baggrund, input-felter
Mørk plomme#2D1A2EFooter, aktive knapper, overskrifter
Muted tekst#555555Sekundær tekst, undertitler
Footer tekst#F5F0F5Lys tekst på mørk plomme-baggrund

Sektionsfarver

section--yellowPrimær sektionsbaggrund
section--magentaSekundær sektionsbaggrund
FooterMørk plomme-baggrund

Typografi

Heading font

Archivo Black

'Archivo Black', 'Arial Black', sans-serif
Body font

Archivo

'Archivo', 'Arial', sans-serif
heading-xlKLON KAFFEclamp(2.5rem, 6vw, 4.5rem) · uppercase
heading-lgVores Kaffeclamp(1.8rem, 4vw, 3rem) · uppercase
heading-mdKaffedetaljerclamp(1.3rem, 3vw, 2rem) · uppercase
heading-smBryggetipclamp(1rem, 2vw, 1.25rem) · Archivo 700 · uppercase
body-textFriskristet specialkaffe fra Svendborgclamp(0.95rem, 1.5vw, 1.1rem) · Archivo 500
body-boldLeveret til din dør hver månedclamp(0.95rem, 1.5vw, 1.1rem) · Archivo 700

Knapper

PrimaryMagenta baggrund, hvid tekst
OutlineTransparent, sort kant + tekst
Hero / LightHvid baggrund, sort tekst
Active / DarkMørk plomme, hvid tekst
Inactive chipOff-white baggrund, ingen kant
Disabled50% opacity, no-pointer

Spacing

$spacing-xs
0.25rem (4px)
$spacing-sm
0.5rem (8px)
$spacing-md
1rem (16px)
$spacing-lg
2rem (32px)
$spacing-xl
3rem (48px)
$spacing-2xl
5rem (80px)
$spacing-3xl
8rem (128px)

Border Radius

sm · 4px
md · 8px
lg · 16px
round

Skygger

shadow-sm0 1px 3px rgba(0,0,0,0.12)
shadow-md0 4px 12px rgba(0,0,0,0.15)
shadow-lg0 8px 30px rgba(0,0,0,0.2)

Breakpoints

mobile< 768px@include mobile
tablet768px – 1023px@include tablet
tablet-up≥ 768px@include tablet-up
desktop≥ 1024px@include desktop
wide≥ 1280px@include wide

Transitions

Hover mig
$transition-fast · 150ms ease
Hover mig
$transition-base · 300ms ease
Hover mig
$transition-slow · 500ms ease

Designregler

  • Ingen grå kanter. Brug transparent borders eller solide farver fra paletten.
  • Overskrifter er altid uppercase og bruger Archivo Black.
  • Brødtekst bruger Archivo i vægt 500 (normal) eller 700 (bold).
  • Sektioner alternerer mellem gul og magenta baggrund med wave-dividers imellem.
  • Footer bruger mørk plomme (#2D1A2E) med lys tekst.
  • Knapper har aldrig kanter i inaktiv tilstand – brug baggrundsfarve til at signalere klikbarhed.
  • Kun light mode. Dark mode er deaktiveret.
  • Sprog: Dansk. Altid.
  • Billeder bruger border-radius: 16px og hover-zoom (scale 1.05).
  • Kort/cards har shadow-md og lift (-4px) ved hover.