Visuell identitet

Branding — vår visuelle identitet

En levende dokumentasjon for hvordan Prosjektportalen presenteres i offentlige flater — logoen vår, fargepaletten, typografien og mønstrene som binder det hele sammen. Bruk dette som kilde når du lager presentasjoner, dokumenter eller integrasjoner.

Logoen vår

Pp365-merket bygger på en ren, geometrisk form som signaliserer struktur og forutsigbarhet — kjerneverdier i prosjektmetodikken vår. Hovedfargen er brand-500 (#be3e43), som er hentet direkte fra logoen.

Farge på lys bakgrunn

Hvit på mørk bakgrunn

Svart på lys bakgrunn

Farge på gradient

Fargeversjonen er standard. Bruk den hvite varianten på mørke bakgrunner og foto, og den svarte der farge ikke er tilgjengelig, som i dokumenter for svart-hvitt-utskrift.

Last ned SVG Last ned PNG Svart (SVG)Hvit (SVG)

✓ Bruk slik

Behold opprinnelig kvadratisk form og proporsjon
Sørg for synlig kontrast — bruk hvit variant på mørk bakgrunn
Minste anbefalt størrelse: 24 × 24px

✗ Ikke gjør

Roter, skjev eller deform logoen
Endre fargene i logoen
Bruk på lav-kontrast bakgrunn

Fargene som forteller historien vår

Brand-skalaen går fra 50 (lyseste) til 900 (mørkeste) — et fullt spekter som dekker alt fra subtile bakgrunner til dyp typografi. Klikk hex-koden for å kopiere.

#fdf3f3

brand-50

#fbe5e7

brand-100

#f6c5c8

brand-200

Subtile borders, hover-bg

#e57a73

brand-300

Slutt på gradient-titler

#d4646a

brand-400

#be3e43

brand-500

Primær — handling og highlights

#a13539

brand-600

Eyebrow-tekst, små lenker

#8b1a1f

brand-700

Start på gradient-titler

#631317

brand-800

#46090b

brand-900

Hovedfargen

#be3e43

Brand-500 er hentet direkte fra Prosjektportalen-logoen — en varm, mettet rødtone som signaliserer initiativ og handling uten å være aggressiv. Den er primærvalget for handlinger, lenker, eyebrow-tekst og fokuspunkter.

Sekundærfarger

Tailwind-defaults vi støtter oss på for kontrast og semantikk — amber for varm bg-aksent, grønn for suksess, og grå-skalaen for tekst og bakgrunn. Tekst skal ha minst 4,5:1 kontrast mot bakgrunnen (WCAG AA): gray-500 er lyseste grå for tekst på hvitt, og amber brukes som tekst i amber-700. gray-400 og amber-600 er forbeholdt ikoner, prikker og deaktiverte felt.

#fee685

amber-200

Hero-blob nr. 2 — gir varm balanse

#bb4d00

amber-700

Amber brukt som tekst, f.eks. kommende versjon (5,0:1)

#00c950

green-500

Suksess, checkmarks, fullførte milepæler

#101828

gray-900

Primær brødtekst, mørke knapper

#4a5565

gray-600

Sekundær brødtekst

#6a7282

gray-500

Meta-tekst og etiketter — lyseste grå for tekst (4,8:1)

#f3f4f6

gray-100

Subtile bakgrunner og borders

Gradient-kombinasjoner

Tittel-gradient

Brukes på highlight-suffiks i sider-titler.

from-brand-700 via-brand-500 to-brand-300

Hero-bakgrunn

Subtil gradient som binder hero og innhold sammen.

bg-gradient-to-b from-brand-500/10 via-white to-white

Vår stemme

Vi bruker system-fonter i stedet for å laste inn egne. Det gir raskere lasting, lavere datatrafikk, og en native-følelse på alle plattformer — Apple system fonts på Mac/iOS, Segoe UI på Windows, Roboto på Android.

H1 — gradient-tittel (sider)

Tittel — highlight

text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl + bg-gradient-to-r from-brand-700 via-brand-500 to-brand-300 bg-clip-text text-transparent

H2 — seksjonsoverskrift

En tydelig seksjonsoverskrift

text-2xl font-bold text-gray-900

H3 — undertittel

Undertittel

text-xl font-semibold text-gray-900

Body — brødtekst

Brødteksten vår er ren og leservennlig — vi bruker grå-700 for den primære fargen, slik at fokus alltid er på innhold framfor visuelt støy. Linjehøyden er romslig (`leading-relaxed`) for komfortabel lesing av lengre passasjer.

text-base text-gray-700 leading-relaxed

Eyebrow — kategori-tag

Eyebrow-tekst

text-xs font-semibold uppercase tracking-widest text-brand-600

Small / metadata

Liten metadata-tekst — datoer, tellere, ekstra detaljer.

text-xs text-gray-500

Slik bygger vi sider

Et utvalg gjennomgående mønstre — disse går igjen på tvers av Roadmap, Deling, Blogg, Brukerhistorier og resten av sidene.

Live-pille med pulsende dot

Brukes for å markere 'akkurat nå'-status — aktiv milestone, siste innlegg, live-synk fra GitHub.

Aktiv akkurat nå

bg-brand-50/70 + border-brand-200, animate-ping på en absolutt span over en solid dot

Eyebrow + gradient-tittel

Standardstart på alle hovedsider — eyebrow-tekst som kategori, og en gradient på 'highlight'-suffikset for visuell tyngde.

Kategori

Tittel — highlight

text-brand-600 uppercase tracking-widest + bg-clip-text text-transparent

Stats-strip

Nøkkeltall under hero-en for å gi sidens tema en kvantitativ ramme — antall, dato, status.

Lansert: 12
Nedlast.: 2 376
Aktiv: v1.13

grid-cols-N gap-px + bg-gray-100 wrapper for separator-linjer mellom hvite cells

CTA-seksjon (avslutning)

Standard mønster for å avslutte en side — eyebrow, heading, kort tekst, og 1–2 handlingsknapper.

Eyebrow

Vil du være med?

rounded-2xl border bg-gradient-to-br from-gray-50 via-white to-brand-50/40 p-8 sm:p-10

Gjør og ikke gjør

Korte regler som holder identiteten vår konsistent. I tvilstilfeller — spør oss på GitHub Discussions før du bryter dem.

Bruk brand-500 som primærfarge for handlinger og highlight

Bevar pulse-dot på live-indikatorer og 'akkurat nå'-status

Bruk Tailwind-klassene (text-brand-500, bg-brand-500)

Behold logoens opprinnelige proporsjon og kvadratiske form

Bruk system-fonter for ren ytelse og native-feel

Bruk gradient-tittel kun på 'highlight'-suffikset, ikke hele tittelen

Hold tekst på minst 4,5:1 kontrast — gray-500 er lyseste grå for tekst

Hardkode hex-koder i komponenter — bruk Tailwind-klassene

Roter, skjev eller deform logoen

Bruk farger utenfor brand-skalaen for primær-handlinger

Last inn custom fonter uten avklaring med teamet

Bruk pulse-dot på vilkårlige elementer — den er semantisk

Stable to gradient-titler etter hverandre — det blir for mye

Bruk gray-400 eller amber-600 som tekstfarge på hvit bakgrunn

Ta med deg merkevaren

Last ned ressurser for bruk i presentasjoner, dokumenter og egne designverktøy.

Logo (SVG)

Vektor · skalerer skarpt i alle størrelser

Logo (PNG)

512 × 512px · for deling og e-post

Design tokens (JSON)

For Figma, Style Dictionary, m.fl.

globals.css

Kilden til paletten på GitHub

Spørsmål?

Spørsmål om branding?

Trenger du en variant av logoen, ressurser i et annet format, eller har innspill til paletten? Ta det opp på GitHub Discussions — vi svarer raskt.

Bli med i diskusjonen