Designmanual
Slik bruker du ProsessPilotene-merkevaren i digitale flater og på trykk — logo, farger, typografi og nedlastbare originalfiler.
Denne manualen er for alle som skal bruke ProsessPilotene-merkevaren: kunder, partnere, byråer og oss selv. Den viser hva som er lov, hva som er lurt, og hvor du finner originalfilene.
Siden er bygget med de samme komponentene og fargekodene som resten av nettstedet — det du ser her, er alltid gjeldende profil.
Logo
Merket og ordbildet er kjernen i identiteten. Bruk originalfilene, gi dem rom, og la dem stå urørt.
Friområde
Hold alltid et friområde rundt logoen på minst ¼ av merkets høyde på alle sider. Ingen tekst, grafikk eller kanter innenfor området.
Minstestørrelse
Under minstestørrelsen bruker du merket alene, uten ordbilde. I digitale flater roterer merket 180° ved interaksjon — det er logoens signaturbevegelse og skal ikke etterlignes med andre vinkler.
Formspråk
Formspråket skal oppfattes stramt og geometrisk i det generelle uttrykket. Unntaket er arbeidsgiverprofilering, der vi tillater et mer lekent, dynamisk og tilgjengelig uttrykk. I begge tilfeller kan elementer fra logoen brukes som formgivere — aldri redesignet, bare gjenbrukt.
Kronblad som bildemaske
Ett enkelt kronblad fra merket kan brukes som beskjæringsform for ansattbilder og portretter.
Merket som mønster
Gjentatt i lav opasitet gir merket — og stjerneformen i rommet mellom kronbladene — et dekorativt mønster for mørke flater eller arbeidsgiverprofilering.
Gjør
- Bruk de originale filene fra nedlastingssiden
- Positiv variant på lyse flater, negativ på mørke
- Hold friområdet fritt for tekst og grafikk
- Bruk merket alene der plassen er trang
Unngå
- Ikke endre farger utenfor paletten
- Ikke strekk, roter eller speilvend logoen
- Ikke legg til skygger, konturer eller effekter
- Ikke plasser logoen på urolige bilder uten kontrastflate
- Ikke tegn merket på nytt eller endre proporsjonene
Farger
Fire fargefamilier med fem nivåer hver, pluss nøytraler. Verdiene under hentes rett fra kodebasen og kan ikke drifte fra virkeligheten.
Grønn
Kjernen i merkevaren — bakgrunnen hele nettstedet står på.
Pastell
Lys flate — sidebakgrunner og store felt
--brand-green-pastel
Nøytral
Dempet flate — rammer og sekundære felt
--brand-green-neutral
Tint
Lys aksent — fremheving og dekor
--brand-green-tint
Primær
Mettet aksent — signaturelementer og fyllfarger
--brand-green-primary
Jord
Mørk og rik — tekst og mørke flater
--brand-green-earth
Lilla
Handlingsfargen — knapper, lenker og interaktive elementer.
Pastell
Lys flate — sidebakgrunner og store felt
--brand-purple-pastel
Nøytral
Dempet flate — rammer og sekundære felt
--brand-purple-neutral
Tint
Lys aksent — fremheving og dekor
--brand-purple-tint
Primær
Mettet aksent — knapper og handlinger
--brand-purple-primary
Jord
Mørk og rik — tekst og mørke flater
--brand-purple-earth
Blå
Den rolige støttefargen — informasjon og datavisualisering.
Pastell
Lys flate — sidebakgrunner og store felt
--brand-blue-pastel
Nøytral
Dempet flate — rammer og sekundære felt
--brand-blue-neutral
Tint
Lys aksent — fremheving og dekor
--brand-blue-tint
Primær
Mettet aksent — signaturelementer og fyllfarger
--brand-blue-primary
Jord
Mørk og rik — tekst og mørke flater
--brand-blue-earth
Oransje
Den varme kontrasten — leveranse, energi og fremheving.
Pastell
Lys flate — sidebakgrunner og store felt
--brand-orange-pastel
Nøytral
Dempet flate — rammer og sekundære felt
--brand-orange-neutral
Tint
Lys aksent — fremheving og dekor
--brand-orange-tint
Primær
Mettet aksent — signaturelementer og fyllfarger
--brand-orange-primary
Jord
Mørk og rik — tekst og mørke flater
--brand-orange-earth
Nøytraler
Alltid tilgjengelige sammen med alle familiene.
Hvit
Kort og innholdsflater
--brand-white
Grå 100
Lys grå flate
--brand-gray-100
Grå 300
Delelinjer og rammer
--brand-gray-300
Grå 500
Dempede detaljer
--brand-gray-500
Grå 700
Sekundær tekst
--brand-gray-700
Grå 900
Brødtekst og logo
--brand-gray-900
Svart
Maksimal kontrast
--brand-black
Vekting av farger
Fordel flatene omtrent 60/30/5/5: grønn dominerer, lilla bærer primærhandlinger, og blå og oransje er små aksentinnslag — ikke fire likestilte farger.
Eksempler på kombinasjoner
Godkjente par du kan bruke direkte.
Innad i familien
Primær sammen med familiens egen jordfarge — trygt og lesbart.
På tvers av familier
Grønn skal alltid stå sterkest i en blandet kombinasjon (jf. 60/30/5/5) — bruk gjerne sammen med 1–2 nøytraler.
Unngå disse kombinasjonene
Farger fra samme nivå — to primærfarger, to tints, to pasteller — ligger for tett i lyshet og gir lav kontrast og et flatt uttrykk. Bruk alltid nivåer på tvers.
Graderinger
Graderingene går fra primær via tint til pastell innad i én familie — bruk som alternativ til flate farger, for eksempel i bakgrunner eller animasjonsøyemed. Ikke bland familier i én gradering.
Grønn
Lilla
Blå
Oransje
Slik kombinerer du fargene
- Aldri to farger fra samme nivå sammen — jord mot jord eller pastell mot pastell gir for lav kontrast. Kombiner på tvers av nivåene, for eksempel jord-tekst på pastell-flate.
- Én primærfarge per flate — primærnivået er det mettede aksentet og skal ikke konkurrere med seg selv.
- Tekst settes i jordfarger eller grå 900 på lyse flater, og i pastell eller hvit på mørke.
- Rødfamilien i kodebasen er en funksjonsfarge for feil og varsler — den er ikke en del av merkevarepaletten og brukes ikke i profilering.
Alle fargekombinasjoner på nettstedet valideres automatisk mot WCAG-kontrastkrav. CMYK-verdiene over er de offisielle trykkverdiene fra designsystemet — se kapittelet om trykk for fargeprofil og andre trykkspesifikasjoner.
Typografi
Maison Neue Extended gir merkevaren stemmen sin — Lato er den åpne reserven alle kan bruke.
Maison Neue Extended — primær skrift
Vi hjelper folk og prosesser å fly — trygt, effektivt og med god høyde.
Display
Sideoverskrifter og hero
Prosesser som flyter
H2
Kapitler og seksjoner
Prosesser som flyter
H3
Underoverskrifter
Prosesser som flyter
Brødtekst
Løpende tekst
Prosesser som flyter
Detalj
Bildetekster og metadata
Prosesser som flyter
Reserveskrift: Lato
Der Maison Neue Extended ikke er tilgjengelig — i e-post, dokumenter og partnermateriell — brukes Lato.
Lato er fritt tilgjengelig via Google Fonts og kan brukes av alle uten lisens.
Lisens
Maison Neue Extended er en kommersielt lisensiert skrift og kan ikke deles eller distribueres videre. Partnere som trenger originalskriften i felles materiell, tar kontakt med oss — ellers er Lato alltid riktig reserve.
Digital bruk
Slik lever profilen i produktene våre — levende komponenter, temaflater og tilgjengelighet.
Levende komponenter
Alt på denne siden — knapper, kort og farger — rendres av det samme komponentbiblioteket som resten av nettstedet. Det du ser her, er alltid gjeldende uttrykk.
Temaflater
Nettstedet skifter drakt etter fagområde — hvert tema velger egne farger for bakgrunn, primærhandling, sekundærfarge, aksent og lenke fra paletten, mens komponentene beholder rollene sine.
Generelt
Standard — forsiden og sider uten et fagområde.
Lys
Bakgrunn
Primær
Sekundær
Aksent
Hero-panel
Lenke
Mørk
Bakgrunn
Primær
Sekundær
Aksent
Hero-panel
Lenke
Marketing
Kampanjesider og markedsføringsinnhold.
Lys
Bakgrunn
Primær
Sekundær
Aksent
Hero-panel
Samme mørke lilla i både lys og mørk modus.
Lenke
Mørk
Bakgrunn
Primær
Sekundær
Aksent
Hero-panel
Samme mørke lilla i både lys og mørk modus.
Lenke
Salg
Salgsprosess og tilbud.
Lys
Bakgrunn
Primær
Sekundær
Aksent
Hero-panel
Lenke
Mørk
Bakgrunn
Primær
Sekundær
Aksent
Hero-panel
Lenke
Service
Kundeservice og support.
Lys
Bakgrunn
Primær
Sekundær
Aksent
Hero-panel
Lenke
Mørk
Bakgrunn
Primær
Sekundær
Aksent
Hero-panel
Lenke
Leveranse
Prosjektlevering og drift.
Lys
Bakgrunn
Primær
Sekundær
Aksent
Hero-panel
Lenke
Mørk
Bakgrunn
Primær
Sekundær
Aksent
Hero-panel
Lenke
Fargerollene styres av data-brand-theme på <html> og settes automatisk per fagområde. Hvert tema har en egen lys og mørk variant med omvalgte tokens for samme roller — begge vises over. Lenke er den tekstsikre varianten av primærfargen (≥ 4,5:1 kontrast), ikke en egen merkevarefarge.
Fargeregler
- Paletten består av fire fargefamilier (grønn, lilla, blå, oransje), hver med fire nivåer (pastel, tint, primary, earth), pluss et sett nøytrale gråtoner.
- Fyllfarger (bakgrunner, knapper, badges) krever bare 3:1 kontrast mot flaten rundt, mens tekstfarger krever 4,5:1. Fylltokens som
--primary,--success,--warning,--infoog--destructiveskal derfor aldri brukes som tekstfarge — bruk--linkog de tilhørende*-text-variantene i stedet. - Rammer og kantlinjer utledes automatisk fra forgrunns- og bakgrunnsfargen i hvert tema — de er ikke håndplukket per tema.
- En kontrastport i merkevarepakken verifiserer alle fargepar automatisk i 12 scopes (5 temaer + standard, hver i lys og mørk modus) ved bygg.
- Hvert tema eier sin egen canvas i både lys og mørk modus: Generelt er grønn/krem, Marketing er lilla, Salg er blå, Service er frisk grønn, og Leveranse er oransje.
Grid, avstand og hjørneradius
Grid
Innholdet ligger i én sentrert kolonne på maks 90rem (1440px), med sideavstand som vokser med skjermbredden: 16px på mobil, 24px på nettbrett, 40px på desktop.
Avstand
To faste steg dekker det meste av avstanden mellom innholdselementer.
16px
Innhold i kort
24px
Mellom kort i en seksjon
Hjørneradius
Knapper og paneler bruker tre faste steg. Kort har kvadratiske hjørner (ingen avrunding) — kun bildet inni kortet har signaturbevegelsen, med ett hjørne sveipes ut til 48px.
8px
Liten
12px
Medium
14px
Stor
48px
Signatur (bilder)
Tabeller
Samme fargelogikk som i Office-malene: header i grønn primær, brødtekst vekslende mellom hvit og lys nøytral, sum-rad fremhevet.
| Periode | Nye | Vunnet | Sum |
|---|---|---|---|
| Kv. 1 | 142 | 88 | 230 |
| Kv. 2 | 156 | 94 | 250 |
| Kv. 3 | 171 | 101 | 272 |
| Totalt | 469 | 283 | 752 |
Prinsipper for digitale flater
- Farger brukes via semantiske roller (bakgrunn, handling, lenke, ramme) — ikke som løse hex-verdier. Da følger alle flater med når paletten justeres.
- Alle tekst- og bakgrunnskombinasjoner skal oppfylle WCAG 2.1 AA — kombinasjonene på nettstedet kontrolleres automatisk.
- Bevegelse er sparsom og målrettet — som logoens 180°-rotasjon — og respekterer alltid reduserte bevegelsesinnstillinger.
Innholdselementer
Innholdsblokkene redaktørene kan bruke i artikler og sider, rendret med de samme komponentene som produksjonssidene.
Innholdsblokkene i CMS-et
Her samler vi de innholdsblokkene redaktørene har tilgjengelig når de skriver artikler og sider — vist gjennom de samme komponentene som produksjonssidene bruker.
Lenker
De fire lenketypene — intern, ekstern, e-post og telefon — som ren tekst og som knapp, pluss lenker som egne blokker uten omkringliggende avsnitt.
Les mer på ekstern lenke for detaljer om Sanity.
Send oss en e-post på post@prosesspilotene.no når som helst.
Ring oss på +47 954 60 000 i åpningstiden.
Se Designmanualen for hele profilen.
Som knapp: ekstern lenke
Som knapp: post@prosesspilotene.no
Som knapp: +47 954 60 000
Som knapp: Designmanualen
ekstern lenkepost@prosesspilotene.no+47 954 60 000DesignmanualenDesignmanualenTekststiler
De ni tekststilene redaktøren velger i Studio. Overskriftene rykker ned ett nivå når de rendres — Overskrift 1 blir <h2>, Overskrift 2 blir <h3>, og så videre til Overskrift 6 som blir <h6> — slik at brødteksten aldri konkurrerer med sidens hovedoverskrift.
Normal – vanlig brødtekst uten spesiell formatering.
Overskrift 1
Overskrift 2
Overskrift 3
Overskrift 4
Overskrift 5
Overskrift 6
Lead – ingress som skal skille seg visuelt fra brødteksten.
Sitat – blokksitat med venstre markørlinje.
Lister
De tre listetypene: punktliste, nummerert liste og sjekkliste. Sjekklisten rendres som en nummerert liste med et fast ✅-prefiks foran hvert punkt.
- Punktliste – første punkt
- Punktliste – andre punkt
- Punktliste – tredje punkt
- Nummerert liste – trinn én
- Nummerert liste – trinn to
- ✅ Sjekkliste – godkjent av redaktør
- ✅ Sjekkliste – publisert til nettsiden
- ✅ Sjekkliste – varslet abonnenter
Utheving i tekst
Uthevinger som kan legges på markert tekst inne i et avsnitt — fet, kursiv, kode, understreking, gjennomstreking og markering — samt et ikon satt inn i løpende tekst.
Strong: fet tekst
Emphasis: kursiv tekst
Code: kodetekst
Underline: understreket tekst
Strike: gjennomstreket tekst
Highlight: markert tekst
sendikon i tekst (material-symbols:send)
Innholdsblokker
De resterende innholdsblokkene: skillelinje, mellomrom, tabell, fremdriftslinje, faner, accordion, tidslinje, sitatblokk, mermaid-diagram, kildekode, kombinasjonsboks/listeboks, et frittstående ikon og en flerspalteseksjon. Innholdet i en fane rendres uten de vanlige komponentene, så bare ren avsnittstekst vises der. Kildekode-eksempelet er satt til PowerShell for å synliggjøre feil #1544, der komponenten leser feltet lang mens Studio lagrer language.
“Kvalitet er ikke en handling, det er en vane.”
Godkjenningsflyt
Get-Process | Where-Object { $_.CPU -gt 100 }Åpningstider
| Dag | Åpent |
|---|---|
| Mandag | 08:00–16:00 |
| Tirsdag | 08:00–16:00 |
Spørsmål og svar
Innhold i første fane — vanlig avsnittstekst.
Prosjektforløp
Oppstart
Prosjektet ble startet opp.
Lansering
Løsningen ble satt i produksjon.
Ofte stilte spørsmål
To spalter
Venstre spalte: vanlig brødtekst i en flerspalteseksjon.
Vanlige spørsmål
Bilde og lyd
Bilde, bildekarusell og lydspiller, satt opp med et ekte Cloudinary-bilde og en ekte lydfil fra datasettet.
Karusell
Prosjektlederenes tips til prosjektsuksess
Ikke vist her
Disse blokkene finnes i CMS-et, men kan ikke vises her:
- accordionBlock
- Finnes bare som kolonnevariant i multiContentSection, aldri som egen blokk i brødtekst.
- address
- Kartvisning fra Google — krever API-nøkkel og gjør et kall til en tredjepart.
- contactCardsSection
- Henter kontaktpersoner fra datasettet.
- formSection
- Rendrer et skjema som faktisk kan sendes inn.
- reference
- Rendrer i dag en plassholder med rå JSON — en kjent feil, ikke et eksempel til etterfølgelse.
- relatedContent
- Henter refererte dokumenter fra datasettet.
- socialMedia
- Krever innbyggingsskript fra Instagram, LinkedIn, TikTok eller Facebook.
Trykk
Krav og anbefalinger når merkevaren skal på papir.
Trykkeklare logofiler kommer
CMYK-verdiene i fargekapittelet er de offisielle trykkverdiene fra designsystemet. Vektorfiler i trykkformat (EPS/PDF) publiseres her når de er eksportert — inntil da holder SVG-filene fra nedlastingskapittelet i høy nok oppløsning for de fleste trykksaker.
Tekniske krav
- Fargeprofil: Coated FOGRA39 (ISO 12647-2) for bestrøket papir, med mindre trykkeriet krever noe annet.
- Oppløsning: 300 dpi for bilder; logoen leveres alltid som vektor.
- Minstestørrelse: logomerket aldri under 8 mm høyde; horisontal logo aldri under 25 mm bredde.
- Friområde: samme regel som digitalt — minst ¼ av merkets høyde på alle sider.
- Én farge: der trykket er begrenset til én farge, brukes logoen i svart (eller grå 900) på lyse flater og hvit på mørke.
Nedlastinger
Godkjente originalfiler, klare til bruk.
Horisontal logo — positivSVG 
Horisontal logo — negativPNG 
Logomerke — positivSVG 
Logomerke — negativPNG 
Logomerke — sosiale medierPNG Alle nedlastinger leveres fra Cloudinary — bruk disse lenkene direkte i stedet for å mellomlagre egne kopier, så følger du alltid gjeldende versjon. Negativ og sosiale medier-varianten genereres fra samme originalfil ved hjelp av Cloudinarys bildetransformasjoner, ikke separate opplastede filer. PDF/EPS for trykk kommer sammen med de offisielle trykkfilene fra Figma. Ta kontakt for andre formater.