Internt designdokument

Palett-referens

Editorial Nordic-paletten på saega.app — kärnvärden, mode-färger som speglar appens floating pill, och en preview av æ-tinting-feature. Sidan är noindex — internt.

Källor: Kinfolk-magasinet (warm bone-vita + slate), Royal Copenhagen (klassisk fjord-blå), HAY/Muuto (modernist Nordic), Norrøna heritage (mossgrön + sand). Saega:s palett är medvetet dämpad — vi använder inte Apple System Colors (för "loud") trots att appen är macOS-only.

Sektion B

Kärnpalett

Nuvarande designtokens i :root, med dark-mode-twins under html.dark. Vänster halva av varje swatch är light-värdet, höger halva är dark-värdet.

Sync-not: Sajten har idag --accent-nordic: #3D6B8C. Appen renderar Nordic slate som #5B7B94. Fas 2 syncar sajten till app-värdet så varumärket har en (1) Nordic slate, inte två. Värdena visade här är target-värdena.

Sektion C

Mode-färger (6 stycken)

Sanningskälla = Sources/Saega/AppDelegate.swift:1500–1509, funktion pillAccentColor(for:). Vänster halva = app-värdet (light), höger halva = web-only dark-twin (~+25 % luminans).

Pill-rendering: Färgerna här visas som rena mode-tints. Saega.app:s floating pill renderar dem ~62 % mörkare (med 0.88 alpha) för kontrast mot pillens mörka bakgrund — se WaveformPanel.swift:247–252. Web-æ:n nedan använder pure-tint-värdena eftersom de syns mot ljus website-bg.

Dark mode = web-only: Appens pill-renderer använder samma värden i light och dark mode. Dark-mode-twinarna här är website-specifika.

Display P3 vs sRGB: macOS renderar i Display P3, webben i sRGB. Praktisk skillnad för dessa dämpade toner är liten men inte noll. Färgerna här är approximativa matchningar — pixel-exakt parity garanteras inte.

Sektion D

Live æ-tinting (preview)

Hovra eller klicka på en mode-knapp nedan — æ-bokstaven (och headerns wordmark) tintar smooth till mode-färgen. Reset efter 800 ms av no-hover. Dark-toggle byter både bg och tint-värden i realtid.

Default — accent-nordic

Cleanup

Raw

AI Prompt

Translate → EN

Translate → SV

Sektion E

Färgblindhets-simulation

De 6 mode-färgerna under deuteranopi/protanopi/tritanopia-filter (CSS feColorMatrix). Mitigation: aria-label uppdateras dynamiskt med mode-namn när tinting är aktiv så skärmläsare och tooltip levererar redundant signal.

Normal syn

Deuteranopi

Protanopi

Tritanopi

Sektion F

WCAG-kontrast

Beräknad i realtid mot --bg i nuvarande tema. Toggle dark mode i headern för att se ratios mot mörk bakgrund. AA-tröskel: 4.5:1 normal text, 3:1 large/UI.

Färg	Hex	Mot bg	Ratio	AA normal	AA large/UI

Sektion G

macOS-kompatibilitet

Sajten respekterar prefers-color-scheme och har en manuell html.dark-toggle som persisteras i localStorage. Två konsekvenser:

När user togglar Appearance i System Settings → Auto, byter sajten tema utan reload.
Mode-tints är manuellt valda för båda lägen — vi använder inte CSS color-mix() eller oklch() för auto-generering, eftersom dämpade Nordic-toner är känsliga för luminans-shifts.

Apple System Colors (systemBlue, systemGreen etc.) skippades medvetet — de är för mättade/varma för editorial-tonaliteten. Saegas palett är muted-Nordic, närmare Kinfolk än Big Sur.