Skjelbreid Poirée
Rolig. Naturnært. Editorialt. Følelse før informasjon.
Et eksklusivt hyttehotell i Hålandsdalen, drevet av fire skiskytter-verdensmestere — Liv Grete Skjelbreid, Raphaël Poirée, Ann-Elen Skjelbreid og Egil Gjelland. Denne manualen er laget for å brukes mens du jobber, ikke leses fra perm til perm — og den er det samme designsystemet nettsiden kjører på, regnet ut og satt sammen ett sted: DESIGN.md.
Siden du har oppe mens du jobber.
Alt du trenger for en rask leveranse, samlet på én skjermhøyde. Trenger du begrunnelsen bak — scroll videre.
Farger
#0D2E2E primary — skogsteal#5E7A6D secondary — salvie#DBC3A9 accent — sand (dekor)#F5EFE8 surface — off-white#1F1F1F ink#3D3B3B ink-soft#E5DDCF line#7A5C2E accent-text (UU-pair)#4E6A5A sage-text (UU-pair)Typografi
Cormorant Garamond
Light 300 · Regular 400 · Italic 400 — display, overskrift, sitat. Aldri ≥600.
Manrope
Regular 400 · Medium 500 · SemiBold 600 — brødtekst, nav, knapper, labels.
Office-fallback: Georgia (display) / Arial (brødtekst).
Kjerneregler
Tone
RoligNaturnærtEditorialtGjestfrittFølelse før informasjon. Korte avsnitt, aldri punktlister i innholdstekst, aldri hype.
Samme ro, alle formater.
Et designsystem beviser seg først når det møter en flate. Under: det faktiske nettstedet i drift, fire maler for sosiale medier, presentasjon og print — og en dokumentmal som viser at profilen bærer også i tilbud og rapporter. Alt strengt bygget fra de samme tokens som resten av manualen.
Nettside i drift
Fire genererte maler
Følelse
før informasjon
En dag på Skjelbreid Poirée
Se mer →Et eksklusivt sted for deres store dag
Rolig, naturnært — kun én time fra Bergen.
Bryllup i
Hålandsdalen
Dokumentmal — tilbud og rapport
Bryllups- og kurstilbud er de dokumentene Skjelbreid Poirée faktisk sender ut. Forsiden lar fotografiet snakke først (samme regel som nettsiden), med wordmark, sand-hairline og tittel i typografi-skalaen under. Innholdssiden viser overskriftshierarkiet og pristabell-stilen i bruk.
Deres store dag i Hålandsdalen
Et ordmerke satt i ro, ikke i hast.
Identiteten bæres av et fasettert tårn-monogram — en abstrahert gjengivelse av vakttårnet på lodgens torvtak — satt sammen med wordmarket «Skjelbreid Poirée» i Cormorant Garamond. Ingen sekundærfarge, ingen gradient: kun mørk skogsteal (#0D2E2E). Logoen under er hentet direkte fra kildefilene i Drive («Logo Skjelbreid Poirée»), ikke en typografisk tilnærming.
Klareringssone: minimum halv figurmerkebredde på alle sider (per DESIGN.md). Ingen annet element — tekst, ikon, kant — skal krysse inn i dette feltet.
Behold alltid aspektforholdet. Skaler proporsjonalt.
Sandbeige som tekst/merke på lys flate er 1,48:1 — usynlig for mange. DESIGN.md Don't #4.
Cormorant i vekt ≥600 bryter det editoriale uttrykket. Hold 300–400. DESIGN.md Don't #3.
Logoen krever rolig flate med tilstrekkelig kontrast — klareringssonen gjelder også visuelt støy.
Én skogsteal. Salvie og sand som karakter. Aldri ren hvit.
Paletten er dempet og naturnær med hensikt: skogsteal som eneste tunge brandflate, salvie og sandbeige som karakterbærende aksenter, og en varm off-white — aldri #FFFFFF — som standard seksjonsbakgrunn. Kortene er eneste unntak fra den regelen.
Brand-tokens
UU-pair-varianter — når karakterfargen skal være tekst
Sandbeige og salvie er karakterbærende, men for svake som liten tekst på lys bakgrunn. DESIGN.md definerer derfor to mørknede varianter — ikke egne brand-tokens, men prosa-regler (§11) — som brukes når fargen skal bære en lesbar tekstlinje i stedet for en flate.
WCAG-kontrasttabell — regnet ut, ikke antatt
De fleste profilmanualer i dette segmentet lister farger med hex og stopper der. Denne tabellen er regnet ut fra bunnen med relativ luminans per WCAG 2.1 for hvert tekst-relevante fargepar i Skjelbreid-paletten — inkludert paret som feilet i live-audit (3. juni 2026): sandbeige som tekst på lys bakgrunn, 1,48:1, godt under kravet. Det er nettopp det funnet som ga opphav til accent-text/sage-text-variantene over.
| Forgrunn | Bakgrunn | Eksempel | Ratio | Normal tekst | Stor tekst / UI |
|---|---|---|---|---|---|
| Ink #1F1F1F | Surface #F5EFE8 | Aa | 14.44:1 | AAA | AAA |
| Hvit #FFFFFF | Primary #0D2E2E | Aa | 14.51:1 | AAA | AAA |
| Primary #0D2E2E | Surface #F5EFE8 | Aa | 12.71:1 | AAA | AAA |
| Ink #1F1F1F | Hvit #FFFFFF | Aa | 16.48:1 | AAA | AAA |
| Ink-soft #3D3B3B | Surface #F5EFE8 | Aa | 9.75:1 | AAA | AAA |
| Accent #DBC3A9 | Primary #0D2E2E | Aa | 8.56:1 | AAA | AAA |
| Accent-text #7A5C2E | Surface #F5EFE8 | Aa | 5.41:1 | AA | AAA |
| Sage-text #4E6A5A | Surface #F5EFE8 | Aa | 5.21:1 | AA | AAA |
| Secondary #5E7A6D | Surface #F5EFE8 | Aa | 4.11:1 | Under AA | AA (stor tekst) |
| Hvit #FFFFFF | Secondary #5E7A6D | Aa | 4.69:1 | AA | AAA |
| Accent #DBC3A9 | Surface #F5EFE8 | Aa | 1.48:1 | Feilet i live-audit | Feilet i live-audit |
| Hvit #FFFFFF | Hero-fotolag, lyseste piksel* | Aa | 8.70:1 | AAA | AAA |
| Accent #DBC3A9 | Hero-fotolag, lyseste piksel* | Aa | 5.13:1 | AA | AAA |
| Danger #DC2626 | Hvit #FFFFFF | Aa | 4.83:1 | AA | AAA |
| Success #15803D | Hvit #FFFFFF | Aa | 5.02:1 | AA | AAA |
Metode: relativ luminans per WCAG 2.1 (koeffisienter 0,2126R + 0,7152G + 0,0722B på lineærkonvertert sRGB), kontrastforhold (L1 + 0,05) / (L2 + 0,05). Grenseverdier: normal tekst AA ≥ 4,5:1 / AAA ≥ 7:1. Stor tekst (≥ 18pt/24px, eller ≥ 14pt/18,66px fet) og UI-komponenter: AA ≥ 3:1. Alle rader er beregnet direkte fra hex-verdiene i DESIGN.md, ikke kopiert fra tabellen der. *Hero-radene er alpha-komposittert: fotolag med opacity 0,18 over primary — verste fall er fotoets lyseste piksel (240,235,225), som gir effektiv bunn rgb(54,80,78). Scrimen mørkner ytterligere der teksten faktisk står, så 8,70/5,13 er nedre grense.
Serif for følelse. Sans for presisjon.
Cormorant Garamond (300–400) bærer alt display, overskrift og sitat — aldri bold, aldri teknisk. Manrope (400–600) bærer brødtekst, navigasjon, knapper og labels. To fonter, én klar arbeidsdeling: én snakker følelse, én snakker informasjon.
Skjelbreid Poirée er et eksklusivt hyttehotell drevet av fire skiskytter-verdensmestere, kun én time fra Bergen i vakre Hålandsdalen. Uttrykket er rolig, naturnært og editorialt — stor luft, store bilder, dempet palett.
Bildet snakker alene.
Referansene som ankret retningen er Finnskogtoppen (primær), Panorama Hotell, Biologen Herdla, Solstrand og Fýri: varme, ekte fotografier av rom, natur og mennesker — aldri iscenesatt stockfoto, aldri tekst-overlay oppå hero-bildet. Stedet skal oppleves, ikke selges inn med typografi lagt oppå fotografiet.
Hero uten tekst-overlay
Hero-bildet står alene — ingen tittel eller CTA lagt oppå fotografiet. Tekst og handling ligger i seksjonen rett under, eller på en dedikert skogsteal-flate.
Rom og natur, ikke rekvisita
Bilder viser ekte interiør (peis, tømmer, store vindusflater mot skog) og ekte natur i Hålandsdalen — ikke generisk luksus-stockfoto som kunne vært hvor som helst.
Luft rundt hvert bilde
Store, hele bilder får egne, avgrensede flater med samme rolige spacing-rytme som resten av siden. Ingen tett collage-følelse, ingen overfylte grids.
Dempet fargebehandling
Fargetonen holder seg varm og dempet — samme temperatur som paletten selv. Ingen sterkt mettede filtre, ingen høykontrast-retusj som bryter med den editoriale roen.
Utsnitt av hero-fotografiet — peisen, tømmeret og vindusflatene mot skogen er akkurat det bildeprinsipp 2 og 4 beskriver: ekte interiør i dempet, varm tone. Vist uten dekorrammer — fotografiene står alene, også i denne manualen.
Seks byggeklosser, kopier og bruk.
Dette er de gjenbrukbare modulene bak nettsiden og malene du så i «I bruk». Hver kan brukes alene eller stables — men aldri i «halv styrke»: bruk den som spesifisert, eller la være.
1. Sand-hairline
Brukes til: seksjonspust og skillelinjer — 1px vertikal sandlinje (80px, sentrert) mellom seksjoner, eller 72px horisontal under kickers. Alltid 1px, alltid sand, opacity 0.5–0.7 på mørk flate. Dette er dekor (3:1-kravet gjelder ikke), men aldri bærende informasjon.
.hairline {
width: 1px; height: 80px;
background: var(--color-accent); /* #DBC3A9 */
margin-inline: auto;
}
2. Label- og monogram-stil
Brukes til: seksjonslabels over H2 («OM STEDET», «BRYLLUP & SELSKAP») — versal Manrope 600, 0.8rem, +0.1em letter-spacing, i sage-text (5,2:1) eller ink-soft. Salvie script-monogram som seksjonsbryter er ren dekor og følger samme ro: aldri flere enn ett per oppslag.
.section-label-caps {
font: 600 0.8rem/1.2 var(--font-body);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-sage-text); /* #4E6A5A */
}
3. Sitat-blokk
Brukes til: eier-sitater og gjestestemmer — Cormorant italic 400 i ink (aldri lysere), med 1px sand-hairline til venstre og sitattegn i teksten. Attribusjon i label-caps under. Fungerer på surface og hvit; på mørk flate byttes ink til surface.
.quote {
border-left: 1px solid var(--color-accent);
padding-left: var(--space-md);
font: italic 400 1.6rem/1.4 var(--font-display);
color: var(--color-ink);
}
4. Portal-kort
Brukes til: «tre innganger»-mønsteret fra forsiden — bryllup, bedrift/kurs, privat leie. Rene hvite kort (eneste unntak fra surface-regelen), 1px line-border, label-caps i sage-text, tittel i Cormorant, pil i accent-text. Forsiden er portal, ikke informasjonsdump — aldri flere enn tre.
.portal-card {
background: #FFFFFF;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
| Pakke | Pris |
|---|---|
| Helgeleie | fra 120 000,– |
| Bryllupspakke | fra 185 000,– |
5. Pakke- og pristabell
Brukes til: pakker og priser på konseptsider og i tilbudsdokumenter. Teal header med hvit versal-tekst (14,5:1), hvite rader med line-borders, og selve prisen i Cormorant — tall får lov å være vakre. Aldri mer enn én pristabell per oppslag.
.price-table th {
background: var(--color-primary);
color: #FFFFFF; /* 14,5:1 */
}
.price-table .price { font-family: var(--font-display); }
6. GPS-koordinat-dekor
Brukes til: stedsforankringen — koordinatene til Hålandsdalen satt vertikalt i hero-kanten eller horisontalt i footer. Statisk dekor (aria-hidden, aldri animert), lav opacity, +0.15em letter-spacing. Kun ett sted per side; det er en signatur, ikke et mønster.
.gps-decor {
font-size: 0.7rem;
letter-spacing: 0.15em;
writing-mode: vertical-rl; /* i hero-kant */
opacity: 0.4;
}
Dempet. Varm. Aldri selgende.
Skjelbreid Poirée snakker som verten selv ville gjort ved døren — rolig, gjestfri, presis om hva stedet faktisk er. Teksten forklarer og inviterer; den roper ikke, og den fyller ikke siden med informasjon før følelsen har fått lande først.
Gjør
- «Et eksklusivt sted i naturen — for bryllup, konferanse og private selskap.»
- «Følelse før informasjon» — la stemningen bæres av bilde og luft, ikke av opplistet fakta først.
- Korte, hele avsnitt i stedet for punktlister — teksten skal leses som prosa, ikke skummes som spec.
- Konkrete, verdige detaljer («fire skiskytter-verdensmestere», «kun én time fra Bergen»)
- Én H1 som inneholder Skjelbreid Poirée + konsept + Vestlandet på konseptsider
Ikke gjør
- «Book nå! Eksklusivt tilbud kun denne uken!» — ingen hype-adjektiver eller kunstig hastverk.
- Punktlister i innholdstekst (Don't #6) — bruk korte avsnitt og egne seksjoner i stedet.
- Tekst-overlay oppå hero-bildet, eller mer enn to CTA-er i én seksjon.
- Utropstegn stablet på hverandre, eller superlativ uten et konkret tall/fakta bak.
- Å navngi mindreårige i synlig innhold — barna er bevisst holdt utenfor Om oss (personvern-beslutning 3. juli).
Denne guiden kan ikke sprike fra det vi faktisk bygger.
Alt du har sett i denne manualen — fargene, typografi-skalaen, avstandene, kontrastforholdene, byggeklossene — kommer fra én fil: DESIGN.md, versjonert i nettsmed-shared sammen med klientkortet og migrasjonskartet for Skjelbreid Poirée. Når paletten oppdateres, oppdateres den ett sted — og manualen, nettsiden og malene dine holder seg identiske. Ingen PDF som blir liggende og bli utdatert idet noen endrer en farge i Elementor.
Praktisk for Skjelbreid Poirée: trenger dere en ny SoMe-mal eller et nytt tilbudsdokument om et halvt år, genereres det fra samme fil — ikke fra noens minne om hvilken salviefarge som ble brukt sist. Trenger dere å endre en detalj, endres den ett sted, og alt som er bygget etter systemet følger automatisk med.