Bipolarklubben er et varmt, ærlig og moderne fellesskap for mennesker med bipolar lidelse. Designsystemet hjelper oss å bygge en tjeneste som føles som et trygt sted å være — ikke en diagnoseportal.
01 · Fundament
Fem prinsipper som styrer alle valg — fra ordvalg i en knapp til bruk av farger i en seksjon.
Pust før prakt. Et rolig blikk er viktigere enn et imponerende layout.
Vi snakker til personer, ikke til pasienter. Erfaring, ikke etikett.
Vi lover ikke å gjøre noen friske. Vi bygger gode rytmer, sammen.
Klart språk og forutsigbare valg. Aldri lure brukeren med design.
Senk terskelen for å delta. En setning, en knapp, et neste skritt.
02 · Identitet
Logoen er bygget rundt en myk sirkel (klubb, fellesskap), en bølge som speiler svingninger som finner rytme, og en dyp navy-flate som holder ro. Systemet består av en primær- og en sekundærlogo, monokrome varianter for trykk og énfargede flater, samt klare regler for minimumsstørrelse og frie marginer.
Primærlogo · horisontal
Standardvalget. Brukes i header, nyhetsbrev, dokumenter og overalt det er plass.
Sekundærlogo · stablet
Når flaten er kvadratisk eller smal: profilkort, plakater, merch.
Symbol
Frittstående mark når ordmerket allerede vises i konteksten.
Monogram
Tett favicon og små UI-flekker.
Sosial avatar
Runde profilbilder i sosiale kanaler.
Farge · lys bakgrunn
Foretrukket variant.
Farge · mørk bakgrunn
Logoen beholder fargene, ordmerket reverseres.
Monokrom · mørk
Énfarget navy. Trykk uten råd til fullfarge, stempler, gravering.
Monokrom · hvit
Reversert hvit. Foto, video og mørke flater uten farge.
Clearspace = X
X tilsvarer høyden på logo-marken. Hold minst X med fri luft på alle sider — også mot bilder, kanter og andre logoer.
16 px · favicon
24 px · symbol
48 px · ikonbruk
Minimumsstørrelse
Horisontal logo aldri under 120 px / 32 mm bredde. Symbol ikke under 24 px. Favicon/monogram tåler ned til 16 px.
Bruk på rolig flate
Plasser logoen på en jevn bakgrunn med god kontrast.
Ikke roter
Logoen står alltid rett. Ingen vinkler eller tilt.
Ikke strekk
Bevar proporsjoner. Aldri stretch i bredde eller høyde.
Ikke refarg
Bruk kun godkjente farger og monokrome varianter.
03 · Merket i alle størrelser
App-ikonet plasserer logo-marken på en varm lilla flate, med generøs padding i safe area. Symbol forblir lesbart helt ned til 16 px.
1024px
512px
192px
64px
32px
Favicon · lys
Favicon · mørk
Hjemskjerm
04 · Farge
Dyp lilla og varm fersken er kjernen. Bakgrunnene er off-white med en svak lavendel-vask. Signalfarger brukes kun for status — aldri som dekor.
Deep Purple
#1A0A6E--primaryHovedidentitet, primærhandlinger, tekst.
Peach
#F7B89C--secondaryVarme, fellesskap, treff.
Lavender
#B9A7F5--accentAksenter, illustrative flater.
Iris
#6B55C7--primary-hoverHover, lenker, fokus-ring.
Lilac
#E6DAFB--primary-softChips, ikon-bobler, rolige flater.
Peach soft
#FBE1D2--secondary-softBakgrunn for varme seksjoner.
Warm Off-White
#F3EFE9--backgroundSidens bakgrunn.
Lilac wash
#E6DAFB--background-softRolige seksjoner, hero-vask.
Surface
#FBF8F2--surfaceKort og paneler.
Border
#E6DAFB--borderLinjer og rammer.
Ink
#1A0A6E--foregroundHovedtekst og overskrifter.
Muted
#5B4F8A--muted-foregroundUnderordnet tekst.
Stabil
#2BA46A--successBekreftelser, rolig status.
Følg med
#E0A03B--warningMildt varsel — aldri alarmerende.
Krise
#DC2626--destructiveKun for ekte feil og kriseinfo.
05 · Type
Vi bruker Manrope — varm, tydelig, moderne. Maks tre vekter: 400, 600, 700. Prioriter lesbarhet over kreativ typesetting.
Display
Manrope Bold · 60/64Et fellesskap, ikke en institusjon.
H1
Manrope Bold · 36/44Bipolarklubben
H2
Manrope Bold · 30/38Neste treff i Oslo
H3
Manrope Semibold · 20/28Slik er en kveld hos oss
Body large
Manrope Regular · 18/28Vi deler erfaring og verktøy som kan gjøre det lettere å leve mer stabilt.
Body
Manrope Regular · 16/26En rolig kveld med ærlige samtaler og folk som vet hvordan svingningene kjennes.
Small
Manrope Regular · 14/22Lav terskel. Egen erfaring. Ingen fasit.
Caption
Manrope Semibold · 12/16TIDSPUNKT
06 · Komponenter
Komponentene er runde, varme og fokuserer på handling. Korte tekster, generøs padding, myke skygger.
Knapper
Chips & merkelapper
Innholdskort
Kaffe, ærlige samtaler og folk som forstår svingningene fra innsiden.
Les mer →
Trygghetsmelding
Viktig å vite
Vi er ikke et helsetilbud, og vi erstatter ikke behandling. Trenger du akutt hjelp: ring 113 eller legevakt 116 117.
Input
Veiledet handling
07 · Ikoner
2 px stroke, runde linjer, ingen harde hjørner. Vi unngår medisinske klisjeer (piller, EKG, kors, triste hjerner). Ikoner brukes som ledetråder — ikke som dekor.
Fellesskap
Samtale
Treff
Kunnskap
Verktøy
Stabilitet
Søvn
Energi
Ro
Varseltegn
Plan
Hjelp
Krise
Relasjoner
08 · Stemme
Skriv som en klok venn med egenerfaring. Korte setninger. Varme ord. Aldri bastante helsepåstander.
Ord vi bruker
Ord vi unngår
Eksempel · før
“Bipolarklubben hjelper deg å bli frisk fra bipolar lidelse.”
Eksempel · etter
“Bipolarklubben er et fellesskap som gjør det lettere å leve mer stabilt — sammen.”
09 · Prinsipper i praksis
Konkrete sjekklister når du er i tvil. Hvis noe bryter listen til høyre, finn en mykere måte.
Do
Don't
10 · Inkluderende
Et trygt fellesskap er et tilgjengelig fellesskap. Disse reglene er ikke valgfrie.
11 · Filer
Last ned SVG-er klare til bruk i print, web og sosiale medier.
bipolarklubben-logo-horisontal.svgbipolarklubben-logo-horisontal-mork.svgbipolarklubben-logo-stablet.svgbipolarklubben-symbol.svgbipolarklubben-symbol-hvit.svgbipolarklubben-app-ikon.svgbipolarklubben-favicon.svgbipolarklubben-og-image.svg12 · For utviklere
Kopier disse CSS-variablene rett inn i et nytt prosjekt for å holde Bipolarklubben-merkevaren konsistent.
CSS · :rootManrope · oklch · WCAG AA:root {
/* Brand */
--color-primary: #1A0A6E; /* Deep Purple */
--color-primary-hover: #6B55C7; /* Iris */
--color-primary-soft: #E6DAFB; /* Lilac */
--color-secondary: #F7B89C; /* Peach */
--color-secondary-soft: #FBE1D2;
--color-accent: #B9A7F5; /* Lavender */
/* Surface */
--color-background: #F3EFE9; /* Warm Off-White */
--color-background-soft: #E6DAFB;
--color-surface: #FBF8F2;
--color-border: #E6DAFB;
/* Text */
--color-foreground: #1A0A6E;
--color-muted: #5B4F8A;
/* Signal */
--color-success: #2BA46A;
--color-warning: #E0A03B;
--color-destructive: #DC2626;
/* Form */
--radius-card: 20px;
--radius-button: 999px;
--shadow-soft: 0 8px 24px rgba(26, 10, 110, 0.08);
/* Type */
--font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
}13 · Maskinlesbart
ChatGPT, Claude, Lovable, Cursor og andre AI-verktøy kan ha vanskelig for å lese et vanlig designnettsted. Derfor publiserer vi guiden i tre maskinlesbare formater — slik at alt som lages med KI blir i tråd med Bipolarklubbens brand.
/llms.txttext/plainHele guiden som ren markdown — formatet llmstxt.org. Lim inn i en chat eller la agenten hente den selv.
Åpne →
/designguide.jsonapplication/jsonStrukturerte tokens: farger, typografi, radius, logo, tone og AI-regler. Ideelt som verktøy-input.
Åpne →
/robots.txttext/plainEksplisitt Allow for GPTBot, ClaudeBot, PerplexityBot, Google-Extended m.fl.
Åpne →
Standard-prompt til AI
Lim inn øverst i ChatGPT, Claude, Lovable eller hvor du jobber.
Du designer/skriver for Bipolarklubben. Følg den offisielle designguiden på https://designguide.bipolarklubben.com. Last og bruk: - https://designguide.bipolarklubben.com/llms.txt (regler, tone, prinsipper) - https://designguide.bipolarklubben.com/designguide.json (farger, typografi, tokens) Krav: - Bruk semantiske CSS-tokens (--primary, --secondary, --accent, --background ...), aldri hardkodede hex. - Font: Manrope. Aldri Inter, Poppins eller serif. - Tone: varm, ærlig, menneskelig, på norsk bokmål. - Bruk ord som "leve mer stabilt", "få mer ro", "bygge gode rytmer", "fellesskap". - Unngå "bli frisk", "kur", "pasient", "syk", "en bipolar". - Velg alltid den roligste, varmeste varianten ved tvil.
/llms.txt og /designguide.json.