# Alternativ designinstruks — PROMOTERT til DESIGN_SYSTEM.md (2026-07-29)

**Status: AVSLUTTET/ARKIVERT.** Forsøket på dashbordet ble godkjent samme
dag ("det ser bra ut") — innholdet under er nå slått sammen inn i
`DESIGN_SYSTEM.md` (som fortsatt er DEN autoritative kilden, sammen med
CLAUDE.md sin ufravikelige tilgjengelighetsregel). Denne filen beholdes
kun som historisk referanse for selve forslaget slik det opprinnelig ble
formulert — les `DESIGN_SYSTEM.md` for gjeldende regelverk, ikke denne.

## De nye instruksene (shadcn-basert, klar til bruk i prompter)

### 1. Fargesystem og Design Tokens (Shadcn-basert)

- **Bruk eksisterende CSS-variabler:** systemet bygger allerede på
  semantiske variabler (`bg-background`, `text-foreground`, `bg-card`,
  `border-border`, `text-muted-foreground`). Aldri hardkod
  Tailwind-farger som `slate-500`/`gray-100` — det bryter den
  eksisterende mørk/lys-tema-logikken.
- **Merkevarefarger:** Grønn (primær) — hovedhandling, valgt tilstand,
  positivt (f.eks. HCP-nedgang). Oransje (sekundær/kontrast) — merkevarens
  andre pol, brukes til oppmerksomhet/motsetninger (over par,
  motstanderlag, "ventende"-indikator). **Oransje er IKKE en advarsel-
  eller feilfarge.**
- **Feil/advarsler:** faktiske feil (sletting/fare) bruker `destructive`
  (rød).

### 2. Typografi og lesbarhet (designet for "uten lesebriller")

- Standard brødtekst er `text-base` (16px). Ved denne størrelsen og med
  god kontrast (f.eks. `text-foreground`) er `font-normal` helt
  akseptabelt og foretrukket, for å unngå visuell støy. Mindre tekst
  (`text-sm`) brukes kun til metadata, og bør da ofte gis `font-medium`
  for å kompensere for størrelsen.
- `tabular-nums` konsekvent på all numerisk visning (HCP, score, datoer).
- Signerte tall (HCP-trend, score mot par) bruker ekte minustegn (−),
  aldri bindestrek (-).

### 3. Layout, avstander og "grid"

- **8-punkts rutenett:** alle marger, avstander (`gap`) og padding følger
  multipler av 8 (`p-2`, `p-4`, `p-6` osv.).
- **Trykkflater:** absolutt ufravikelig krav om minimum 44×44px for enhver
  interaktiv flate.
- **Kort og beholder:** `rounded-2xl`, `border border-border`, `bg-card`,
  svak skygge (`shadow-sm`) i lyst tema. Tomtilstander kan bruke
  `border-dashed`.

### 4. Interaksjon og navigasjon

- Alle interaktive elementer må ha tydelige tilstander for `:hover` og
  `:active` — umiddelbar, taktil bekreftelse på at trykket er registrert.
- Deaktivert tilstand: `opacity-50` og `pointer-events-none`.
- `lucide-react`. Viktige handlinger skal alltid ha en tekstlabel ved
  siden av ikonet. Rene ikon-knapper tillates kun for universelt
  forståtte symboler (tannhjul, lukkekryss, varselbjelle) og MÅ da ha en
  beskrivende `aria-label`.

### 5. Lyst og mørkt tema

- Tema styres automatisk av shadcn-variablene (punkt 1) — ingen egen
  logikk trengs per skjerm.
- Dybde i mørkt tema skapes automatisk av at `bg-card` er marginalt
  lysere enn `bg-background`, adskilt med `border-border`.
- Kontrastnivå skal møte WCAG AA i begge oppsett (shadcn-variablene
  håndterer dette ut av boksen).

### 6. Skjemaer og inndata (mobil-først UX)

- Tekst i `<input>`/`<select>`/`<textarea>` MÅ være minst `text-base`
  (16px) — mindre utløser tvungen auto-zoom på iOS.
- Riktig inndatamodus: `inputMode="numeric"`/`"decimal"` der brukeren
  skriver tall (HCP, antall slag).

### 7. Safe areas og skjermkanter

- Elementer festet til topp eller bunn skal ha nok ekstra padding (`pt`/
  `pb`) til at ingenting havner utenfor trygg sone (Dynamic Island/
  hjem-indikator).

### 8. Bevegelse og overganger (motion)

- `transition-all duration-200 ease-in-out` for state-endringer på
  knapper og kort. Appen skal føles som en lynrask "native" app.
- Ingen animasjoner/fades lenger enn 300ms.

---

## Anvendelse på dashbordet (2026-07-29)

Denne versjonen er allerede forankret i det eksisterende token-systemet
(punkt 1) og retter selv opp spenningen rundt oransje (punkt 1) — begge
ting forrige runde av dette notatet måtte avvike fra. Konkret gjort denne
runden, oppå forrige rundes 8-punkts/safe-area/`:active`-arbeid:

- **Punkt 2:** `text-sm`-metadata (bane-radens "N runder · Sist …",
  "Ingen nye forespørsler") satt til `font-medium`. Body-tekst ved
  `text-base` (undertittel under hilsenen) var allerede `font-normal` fra
  før — ingen endring nødvendig der.
- **Punkt 8:** gikk tilbake til `transition-all duration-200 ease-in-out`
  overalt (forrige runde brukte målrettede `transition-[...]`-lister av
  ytelseshensyn — reversert på eksplisitt instruks).
- Alt annet (tokens, ikke-hardkodet farge, 44px-trykkflater, `:active`-
  tilstander, safe-area, `tabular-nums`, ekte minustegn, `text-base`
  input-felt) stod allerede riktig fra forrige runde og er uendret.

**Reell bug fikset i forrige runde, fortsatt gjeldende:** "Ny turnering"/
"Bli med med kode"-knappene i turnering-tomtilstanden var koblet til
ingenting. Rettet ved å løfte hurtighandling-skjemaets åpne/lukk-tilstand
til dashbord-roten. Bekreftet på nytt i denne runden med en ekte
klikk-gjennom i nettleser (Chrome DevTools, mobilvisning 390×844):
trykk på tomtilstand-knappen åpner nå det samme skjemaet og scroller dit.

**Verifisert i nettleser denne runden (Chrome DevTools, mobil 390×844,
isolert scratch-backend, ryddet opp etterpå):** full registrering →
obligatorisk profilutfylling → dashbord, opprettelse av en turnering via
den nettopp fikserte tomtilstand-knappen, og en visuell sjekk av BÅDE lyst
og mørkt tema (automatisk kontrast/dybde, ingen egen kode nødvendig).