Kari Sabine

← Tilbake

Design system

Styleguide

Magasin-palett og semantiske farger fra globals.css, typografi og mønstre som på forsiden (HomeLanding). Varmskalaen beholdes for eldre komponenter.

Magasin-palett

Tailwind: ink, cream, paper, rust, sage, gold, blush, muted. Semantikk: background, foreground.

ink#1a1208
creamBakgrunn (lys)
paperKort / papir
rustAksent
sageGrønn
goldGull
blushRosa/beige
mutedDempet tekst

bg-background / text-foreground

Brødtekst bruker semantiske tokens. I lys modus er bakgrunn cream og tekst ink; i mørk modus byttes de.

bg-ink / text-cream

Invertert stripe som på «Utvalgte artikler»-seksjonen på forsiden.

Varmskala (legacy)

Definert i @theme inline i globals.css — brukes fortsatt noen steder.

warm-50
warm-100
warm-200
warm-300
warm-400
warm-500
warm-600
warm-700
warm-800
warm-900
warm-950

Typografi

Fra tailwind.config.ts — kroppstekst på siden er DM Mono som standard (font-sans).

font-displayFraunces — titler
font-sansDM Mono — knapper, UI
font-monoDM Mono — kode
font-serifNoto Serif
font-articleHedvig Letters Serif — artikler
font-handwrittenJust Another Hand

Animasjoner

Registrert i tailwind.config.ts under keyframes / animation.

  • animate-marquee

    Marquee på forsiden (tags)

  • animate-fade-up

    fade-up 0.9s — hero-inngang

  • animate-scan-line

    Scan-linje under «Rull ned»

  • animate-pulse-dot

    Puls på featured-kort

animate-scan-line
pulse-dot

UI-mønstre (som forsiden)

Eyebrow + display-tittel

Tekster · Refleksjon · Design

Lese & skrive.
Tegne.

Brødtekst

Dette er sekundær brødtekst som på forsiden (mindre størrelse, dempet farge). Semantisk brødtekst: text-foreground på vanlig avsnitt.

Primær / sekundær CTA

Les teksterUtforsk temaer →

Featured-kort (papir + skygge)

Utvalgt tekst

Eksempeltittel

Kort med paper-bakgrunn og offset-skygge som hero-kortet på forsiden.

Separator

Tag / badge

featured