Skandinavisk, editorial och läs-först. Newsreader för rubriker, Archivo för gränssnitt, IBM Plex Mono för etiketter — varm svartvit palett med en enda accent i djupgrön. Allt nedan är temastyrt och fungerar i både ljust och mörkt läge.
Färg · Tokens
Alla färger är CSS-variabler. Mörkt läge byter värdena till varma bruna toner; komponenter rör aldrig råa hex-värden.
--base
--paper
--panel
--surface-dark
--ink
--ink-dim
--muted
--muted2
--line
--line2
--line-strong
--accent
--poll-tint
--ph1
--ph2
Typografi · Skala
Tre familjer, en semantisk skala. Rubriker och brödtext i serif, gränssnitt i sans, etiketter och siffror i mono.
Display XL · Veckans siffra 84px · 700
Debrief — Det nordiska teknikmagasinet
Display L · heroes 64px · 700
Debrief — Det nordiska teknikmagasinet
Display M · article H1 50px · 700
Debrief — Det nordiska teknikmagasinet
H1 · dashboard 38px · 700
Debrief — Det nordiska teknikmagasinet
H2 · subheads 30px · 600
Debrief — Det nordiska teknikmagasinet
H3 · card titles 24px · 600
Debrief — Det nordiska teknikmagasinet
Title · feed 18px · 600
Debrief — Det nordiska teknikmagasinet
Lead prose · dek 21px · 400
Debrief — Det nordiska teknikmagasinet
Prose · body 20px · 400
Debrief — Det nordiska teknikmagasinet
Quote 28px · 500
Debrief — Det nordiska teknikmagasinet
UI · buttons & nav 13px · 600
Debrief — Det nordiska teknikmagasinet
Kicker 11px · 600
Debrief — Det nordiska teknikmagasinet
Meta · bylines 12px · 500
Debrief — Det nordiska teknikmagasinet
Micro · counts 10px · 600
Debrief — Det nordiska teknikmagasinet
Avstånd, radie & elevation
Spacing
xxs 4
xs 6
sm 8
smd 10
md 12
lg 14
xl 16
xxl 18
2xl 20
3xl 24
4xl 28
5xl 32
6xl 36
7xl 40
8xl 48
Radius
xs
sm
md
lg
chip
pill
Elevation
card
cover
menu
modal
Logotyp
Newsreader 700 med accentpunkten. Punkten är alltid i accentfärg; ordmärket sätts aldrig i någon annan färg än --ink.
Debrief.Debrief.Debrief.
Ikoner · Glyfer
Debrief använder textglyfer, inte ett ikonteckensnitt — en konsekvent uppsättning för uppspelning, status och navigering.
▶
play
❚❚
pause
✓
check
+
plus
−
minus
×
close
↵
enter
⌘
cmd
◆
diamond
▲
up
▼
down
♪
note
⏮
prev
⏭
next
❝
quote
→
arrowRight
←
arrowLeft
·
bullet
●
dot
Rörelse
Korta, avsiktliga övergångar byggda på en delad motion-vocabulary. Tre durations och tre easings — alla interaktioner i appen refererar dessa tokens för en sammanhängande känsla.
Bottennavigation och scroll-to-top — tumvänlig navigation på mobila skärmar. Bottennavet visas endast <768px och döljer sig självt på större skärmar.
BottomNav
Visas endast på mobil (≤767px). Fyra destinationer: Senaste, Sök, Läslista, Meny. Respekterar safe-area-inset-bottom.
ScrollToTop
Visas efter 600px scroll. Mjuk scroll till toppen (respekterar prefers-reduced-motion).
↑
Safe-area-insets:--safe-top / --safe-bottom används på header, bottennav, FABs och sticky player för att respektera notch och home indicator. Kräver viewport-fit=cover.
Komponenter · Tillgänglighet
Fokus-ringar, tap targets och ARIA — grunden för tangentbords- och skärmläsarnavigation.
Fokus-visible
Tabba genom knapparna — en 2px accent-ring visas endast vid tangentbordsfokus (inte vid musklick).
Tap targets
Minst 44×44px på pekskärmar. Klassen .tap-target applicerar automatiskt på touch-enheter.
🔍≡
ARIA & sr-only
Ikonknappar har aria-label. Decorativ text får aria-hidden. Klassen .sr-only gömmer innehåll för synliga men behåller det för skärmläsare.