Nye-TeeOff/docs/design-system.md

# TeeOff designsystem

Dette dokumentet beskriver den visuelle profilen slik løsningen faktisk er bygget nå, og setter en tydelig standard for videre arbeid. Utgangspunktet er logoen og de etablerte fargetonene `#8BC24A` og `#FF5722`.

## 1. Designprofil

TeeOff skal oppleves som golfnært, redaksjonelt og praktisk samtidig. Profilen er ikke luksus-klubb eller generisk SaaS; den er bygget rundt natur, banestatus, kart, redaksjonelle historier og raske verktøy.

Kjennetegn:

- Jordnær og nordisk, ikke steril.
- Tydelig redaksjonell typografi med kraftige overskrifter.
- Klare signalfarger for status, handlinger og fremdrift.
- Store flater, avrundede kort og tydelig lagdeling.
- Bilder skal gi stemning, mens data og filtre skal gi kontroll.

## 2. Merkevaregrunnlag

Primære merkevarefarger:

- Brand green: `#8BC24A`
- Brand orange: `#FF5722`

Støttefarger i dagens kodebase:

- Pine 900: `#25312A`
- Pine/ink: `#112015`
- Pine 700: `#39443B`
- Mist 50: `#F3F6EE`
- Surface: `#FFFFFF`
- Ink muted: `#617063`
- Orange dark hover: `#C94F2D`
- Status closed: `#B6473D`
- Status winter: `#D2A63A`

Bruk:

- `#8BC24A` brukes til bekreftelse, aksenter, aktive valg og små signalflater.
- `#FF5722` brukes til primære CTA-er, lenker, høy oppmerksomhet og varme kontraster.
- `#25312A` og `#112015` er base for header, mørke knapper, overlay og typografisk tyngde.
- `#F3F6EE` og hvitt holder store flater lette og gir plass til bilder og data.

## 3. Typografi

Etablert fontbruk i appen:

- Display: `Oswald`
- UI/brødtekst: `Mulish`

Anbefalt typescale:

- Hero-eyebrow / små systemetiketter: `0.6875rem` til `0.75rem`, uppercase, høy tracking
- Filterlabels og kortbadges: `0.625rem` til `0.75rem`, uppercase, høy tracking
- Brødtekst kompakt: `0.9375rem`
- Standard brødtekst: `1rem`
- Lang lese-/forklaringstekst: `1rem` til `1.0625rem` med romslig linjehøyde
- Seksjonsoverskrift mobil: `2rem` til `2.5rem`
- Seksjonsoverskrift desktop: `3rem` til `3.75rem`
- Hero-hovedbudskap mobil: minst `1.75rem`
- Hero-hovedbudskap tablet/desktop: `3rem` til `5rem`

Regler:

- Overskrifter skal bruke display-font og tåle høy vekt, store størrelser og tett linjehøyde.
- Brødtekst, skjemaer, kortmetadata og hjelpetekst skal bruke UI-font.
- Eyebrows, små etiketter og filterlabels skal ofte være uppercase med tydelig tracking.
- Lange forklaringer skal være lettleste, ikke komprimerte.
- Mobil skal ikke få "samme typografi, bare mindre". De viktigste budskapene må fortsatt oppleves store og prioriterte på smale skjermer.

Tone i typografi:

- Overskrifter skal være tydelige og selvsikre.
- Brødtekst skal være enkel, presis og nytteorientert.
- UI-tekst skal prioritere klarhet foran kreativ formulering.

## 4. Layout og form

Gjeldende formspråk:

- Store avrundinger: typisk `1rem` til `2rem`
- Myke kort med tynn ramme og lett skygge
- Bred desktop-ramme: `max-w-[1400px]`
- Luftig spacing med tydelig seksjonsdeling

Regler:

- Kort, filtre og paneler skal føles som fysiske flater på toppen av en myk bakgrunn.
- Unngå harde svarte skiller og kompakte admin-tabeller i offentlig UI.
- Bruk få, tydelige lag i stedet for mange små bokser inni hverandre.
- Mobil skal prioriteres med vertikal rytme og tydelige trykkflater.

## 5. Komponentprinsipper

### Header og navigasjon

- Header skal ligge mørkt og stabilt over innholdet.
- Desktop-nav kan være kompakt og editorial.
- Mobilmeny skal være enkel å skanne, med viktigste innhold først og områdenavigasjon som egen blokk.

### Knapper og lenker

- Primær handling: orange fyll.
- Sekundær handling: mørk fyll eller lys outline, avhengig av bakgrunn.
- Vage CTA-er som `Se anlegg` bør unngås. Bruk heller presise handlinger som `Baneprofil`, `Les artikkelen` eller `Innmelding`.
- I frontend skal dette som utgangspunkt mappes til delte varianter i `globals.css`:
- `btn-primary` for viktigste handling i en seksjon.
- `btn-secondary` for sekundære handlinger på lyse flater.
- `btn-secondary-dark` for sekundære handlinger oppå bilder og mørke flater.
- `btn-ink` kun når en mørk handling bevisst skal være underordnet en orange primærknapp.

### Kort

- Kort skal bære både bilde, status og nytteinformasjon.
- Statuser skal vises som badges, ikke gjemmes i brødtekst.
- Kort skal ha tydelig hover-respons på desktop, men uten overdreven animasjon.

### Filtre

- Filtre er en kjernefunksjon og skal føles som arbeidsverktøy, ikke pynt.
- Felter skal være store nok til fingerbruk på mobil.
- Standardvalg må være tydelige og beskrive resultatet presist.

## 6. Bilder og visuell stemning

- Store banebilder er en sentral del av identiteten.
- Bilder skal fremheve landskap, hull, vær og opplevelse.
- Overlays skal mørkne nok til at tekst alltid er lesbar.
- Unngå generiske stock-bilder og sterile dekorflater.

## 7. Bevegelse

- Motion skal være diskret og funksjonell.
- Tillatte virkemidler:
- fade mellom hero-bilder
- lett hover-løft på kort
- tydelig overgang på knapper og lenker

Unngå:

- tung parallax
- unødvendige mikroanimasjoner på alt
- dekorativ motion som konkurrerer med innholdet

## 8. Språk og begreper

Anbefalt standard:

- Bruk `Golfbaner` i navigasjon, SEO, lister, overskrifter og publikumsvendt oppdagelsesinnhold.
- Bruk `Baneprofil` som CTA til detaljsiden.
- Bruk `golfanlegg` bare når man faktisk mener hele anlegget som fysisk eller organisatorisk enhet.

Begrunnelse:

- `Golfbaner` matcher brukerintensjon bedre i søk og i vanlig språkbruk.
- `golfanlegg` er mer presist, men mer teknisk og mindre naturlig i navigasjon og markedsføring.

## 9. Designregler for nye sider

- Start med én tydelig hovedhandling per seksjon.
- Bruk brand green til status og systembekreftelse, ikke som eneste CTA-farge.
- Bruk brand orange når noe skal klikkes, åpnes eller prioriteres.
- Hold bakgrunnene lyse, men aldri flate og døde hvis siden trenger karakter.
- Sørg for at kort, badges og filtre bruker samme radius- og skyggefamilie som resten av siden.
- Hvis en side føles som et adminverktøy, må den enten flyttes til admin eller gis en tydeligere offentlig redaksjonell behandling.

## 10. Ikke gjør dette

- Ikke innfør nye tilfeldige grønnfarger ved siden av merkevaregrønn.
- Ikke bruk lilla, blågrå SaaS-paletter eller standard dark mode som bryter med merkevaren.
- Ikke bruk generiske CTA-tekster når mer presis tekst er mulig.
- Ikke bygg nye offentlige sider med tett tabellfølelse når kort eller seksjoner fungerer bedre.
- Ikke bytt fontfamilier uten en bevisst oppdatering av hele profilen.

## 11. Kilde i kode

Dette dokumentet er forankret i nåværende implementasjon, spesielt:

- `frontend/src/app/globals.css`
- `frontend/src/app/layout.tsx`
- `frontend/src/components/Header.tsx`
- `frontend/src/app/HeroSlider.tsx`
- `frontend/src/app/FacilitySearch.tsx`
- `frontend/src/app/banebesok/page.tsx`
- `frontend/src/app/meninger/page.tsx`

Ved senere redesign skal dette dokumentet oppdateres samtidig som design-tokenene eller hovedmønstrene endres.