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.