dofk · Styleguide for web · v1.0 · 15. maj 2026

← Tilbage til forsiden Hent original styleguide (PDF)

Sådan ser dofk
ud på nettet

Web-version af dofk's officielle styleguide. Bygget som arbejdsdokument til prototypen af nye dofk.dk. H1 sættes med Anton (versaler). Citater sættes med Playfair Display Italic.

Logo

Positiv på lyse baggrunde, negativ på sort eller mørke baggrunde. Versionen med payoff bruges hvor der er plads (footer, hero). Versionen uden payoff bruges i top-navigation og små formater hvor payoff-teksten alligevel ikke kan læses. Alle filer ligger i assets/.

Med payoff · positiv

Med payoff · negativ

Uden payoff · positiv

Uden payoff · negativ

Primære farver

Sort + lyserød (DOFK red) som dominerende stemning. DOFK blue som signaturfarve for sektioner, links og rolige flader. Magenta som CTA. Det er det der gør et site dofk's. Navngivning følger den officielle styleguide.

Tekst · header

DOFK sort #1C1C1B

Signaturflade · links · sektioner

DOFK blue #3153A1

Hovedbaggrund

DOFK red — lys #F9E1EF

Sektioner · accent

DOFK red — medium #F5B8D5

Call to action

DOFK red — CTA #E5007D

Sekundære farver

Bruges til sekundære links, citater, badges og DM-relateret indhold (DM blond + DM brown holdes til mesterskaber, kongres-vinkler).

Sek. flader · diagrammer

DOFK blue — lys #9CA7D5

Alt. CTA (RGB only)

CTA blue #2F47F7

DM-indhold

DM blond #F3DCC7

DM-indhold

DM brown #673719

Typografi

H1 i versaler (Mango Grotesque / Anton fallback). H2 og brødtekst i Inter. Citater i serif italic (BentonModDisp / Playfair Display fallback). Versaler bruges KUN på H1.

H1 / EffektfontAnton (fallback for Mango Grotesque Bold) — kun versaler

Brancheorganisationen for selvstændige frisører og kosmetikere

H2Inter Bold

Sådan løfter dofk faget

MellemrubrikInter ExtraBold

Vi går sammen om barberuddannelsen

BrødtekstInter Regular · 17px · 1.6 linjeafstand

Som medlem af dofk er du en del af foreningen for selvstændige frisører og kosmetikere. Vi kæmper for fagets anerkendelse, hjælper dig som arbejdsgiver og giver dig adgang til konkrete fordele i hverdagen — fra rådgivning til rabatordninger og fællesskab i lauget.

Fremhævning boldInter Bold · 17px

Fremhævning i brødtekst — fed

Fremhævning lightInter Light · 17px

Fremhævning i brødtekst — light

BilledtekstInter Italic · 14px

Foto: Anders Brohus. Minna fra Selected Hair, Horsens.

CitatPlayfair Display Italic ExtraBold (fallback for BentonModDisp BlackItalic)

Vi vil bruge mindre på mursten og mere på medlemsværdi.

Knapper

Kun to varianter. Primær (CTA-blå fyld) til hovedhandlinger som “Bliv medlem”. Sekundær (hvid bund, sort tekst, 1px sort kant) til alle andre handlinger. Begge har samme padding, font og højde — det er kun fyld og kant der skifter. Magenta CTA er reserveret som accentfarve i illustrationer og links, ikke som knap.

Bliv medlem Mit dofk

Read-more chip

Lille kant-knap til “Læs mere” inde på kort, artikler og lister. Bruger currentColor så den arver tekstfarven og automatisk tilpasser sig sort/hvid bund.

Læs hele sagen Find dit laug

Eyebrow + sektionstitel

Standard-anslag for alle indholdssektioner. Eyebrow i magenta versaler. Titel i Anton, opdelt i en display-del og en regular-del — begge i samme font og størrelse, men de skiller linjeluften visuelt.

Hvorfor dofk

tre tingvi arbejder for

Det her er kernen i alt det vi laver — og grunden til, at foreningen findes. Vi tror på, at fag-Danmark står stærkere når vi står sammen.

Sektion-rytme

Alle indholdssektioner følger samme vertikale rytme: 96px luft over titlen, 56px luft mellem titel og indhold, 112px luft under indholdet. Det er det der får forsiden til at trække vejret ens hele vejen ned, og det skal gentages på undersider.

96px top-padding

Eyebrow

sektionstitel

Indhold (kort, liste, tekst …)

112px bund-padding

Kort

Standardkort til “Hvorfor”, nyheder, aktiviteter. Foto i 4:3 i toppen, derefter body med 28px 28px 32px padding, 14px gab mellem elementer. Kortene står side om side med 1px lodret skillelinje (--kant) og må gerne forskydes vertikalt for at give liv (margin-top på enkelte kort).

Overskrift på kortet

Kort beskrivelse i light vægt — to-tre linjer. Læg vægt på indhold frem for fyld.

Læs mere

Kort nummer to — lidt forskudt

Forskydningen i højde gør at de tre kort danner en lille editorial-rytme i stedet for at stå som tre stive kasser.

Læs mere

Tredje kort

Brug border-right: 1px solid var(--kant) mellem kortene — ikke skygger eller dobbelte rammer.

Læs mere

Hero — forside

Det første læseren møder på dofk.dk. H1 i versaler, manchet under. Tekst fra hero-tekst.md. Eyebrow ovenfor er valgfri — det er det her dokument, ikke selve forsiden.

DOFK.DK · Forside · Hero

Brancheorganisationen for selvstændige frisører og kosmetikere

Vi arbejder for, at du får de bedste vilkår for at drive virksomhed, og for at skabe respekt om vores fag og vores høje faglige niveau. Uanset om du er salon- eller klinikejer eller arbejder som enkeltstående frisør eller kosmetiker, står du aldrig alene med dine udfordringer.

Bliv medlem Læs om foreningen

Citatkomponent

Bærer en holdning fra formanden eller et medlem. Sættes på DM brown bund med blond tekst — det er foreningens varme, “mesterskabs”-tone. Skal kunne stå alene som SoMe-citat.

Vi vil bruge mindre på mursten og mere på medlemsværdi.

Ole Knudsen Formand, dofk · Kongres 2026

Mørk sektion

Sort baggrund med hvid tekst — bruges fx til “Bliv medlem”-call-out på forsiden eller hero-sektion med mørkt foto. Outline-knappen invertérer automatisk: hvid kant + hvid tekst.

Bliv medlem Læs mere om medlemskabet Til medlemsfordele

CSS-variabler

Drop disse ind i :root-blokken på alle prototype-sider. Skifter man fonts senere, gøres det her — ingen find-og-erstat i hele kodebasen.

:root {
  /* primær */
  --dofk-sort: #1C1C1B;
  --dofk-rosa-lys: #F9E1EF;
  --dofk-rosa-medium: #F5B8D5;
  --dofk-cta: #E5007D;

  /* sekundær */
  --dofk-blaa: #3153A1;
  --dofk-cta-blaa: #2F47F7;
  --dofk-dm-blond: #F3DCC7;
  --dofk-dm-brun: #673719;

  /* baggrund */
  --hvid: #FFFFFF;
  --kant: rgba(28, 28, 27, 0.12);

  /* fonts — første værdi er prototype-fallback,
     anden er den endelige (kommerciel licens) */
  --font-display: 'Anton', 'Mango Grotesque', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-quote: 'Playfair Display', 'BentonModDisp', serif;
}