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