# 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.