Designsystem

En komplett referanse for Cobriefs visuelle identitet. Alle farger, typografi, komponenter og designprinsipper samlet på ett sted.

2 fonterBaloo 2 & Open Sans
4 fargepaletter41+ nyanser
6 button-varianter18 kombinasjoner

Fargepalett

Lilla og rosa som merkevarefarger, med varme nøytraltoner. Klikk på en farge for å kopiere.

Lilla – primærfarge

Primær merkefarge for handlingsknapper og interaktive elementer

50

#F7F3FF

purple-50

100

#EBE0FF

purple-100

200

#D6C2FF

purple-200

300

#C2A3FF

purple-300

400

#AD85FF

purple-400

500

#9966FF

purple-500

600

#7A52CC

purple-600

700

#5C3D99

purple-700

800

#3D2966

purple-800

900

#1F1433

purple-900

Rosa – sekundærfarge

Sekundær aksentfarge for høydepunkter og visuell interesse

50

#FFF2F6

pink-50

100

#FFDEEA

pink-100

200

#FFBDD5

pink-200

300

#FF9CC0

pink-300

400

#FF7AAB

pink-400

500

#FF5996

pink-500

600

#CC4778

pink-600

700

#99355A

pink-700

800

#66243C

pink-800

900

#33121E

pink-900

Dyp blå – varme nøytraltoner

Varme gråtoner som grunnlag for designsystemet

50

#FAF9F4

deep-blue-50

75

#F4F2EB

deep-blue-75

100

#EDEAE1

deep-blue-100

200

#E8E6DE

deep-blue-200

300

#D4D1C7

deep-blue-300

400

#A8A59B

deep-blue-400

500

#7C7970

deep-blue-500

600

#5C5950

deep-blue-600

700

#3D3B35

deep-blue-700

800

#2A2925

deep-blue-800

900

#1A1918

deep-blue-900

Varm – terrakotta

Varme terrakotta-aksenter for energi og varme

50

#FEF5F2

warm-50

100

#FDE5DC

warm-100

200

#FBCFBE

warm-200

300

#F7AB93

warm-300

400

#EF8868

warm-400

500

#D7724F

warm-500

600

#C46849

warm-600

700

#A65639

warm-700

800

#7D3F2A

warm-800

900

#522921

warm-900

Bakgrunner

Egendefinerte bakgrunnsfarger

Cream

#FAF9F4

bg-cream

Hovedbakgrunn for sider

Cream dark

#F4F2EB

bg-deep-blue-75

Vekslende seksjonsbakgrunn

Cream footer

#E5E2D9

bg-cream-footer

Footer-bakgrunn

Utvidet palett

Aksentfarger for illustrasjoner og visuelle elementer.Ikke implementert som Tailwind-klasser ennå.

Sage

#7A9E75

Frisk, naturlig

Rose

#C97A8C

Varm, innbydende

Blue

#7088AA

Rolig, pålitelig

Terracotta

#B8907E

Jordnær, varm

Moss

#6B8B6B

Stabil, organisk

Oat

#D4C5B0

Myk, nøytral

Lavender

#9B8FA8

Elegant, kreativ

Coral

#E8956F

Energisk, vennlig

Sky

#A8C5DD

Åpen, tilgjengelig

Mørke seksjoner

Standardmønster med navbar-integrasjon.

Overskrift i mørk seksjon

text-white

Brødtekst med varme nøytraltoner som harmonerer med mørk bakgrunn. Dette er standardfargen for lengre tekster i mørke seksjoner.

text-deep-blue-300

Kantlinjer bruker border-deep-blue-800

border-deep-blue-800

Navbar-integrasjon: data-dark-section attributt bytter navbar til lys modus.

Typografi

Baloo 2 for overskrifter, Open Sans for brødtekst. Responsiv skalering.

Baloo 2 – overskrifter

The quick brown fox jumps over the lazy dog

400500600700800

Open Sans – brødtekst

The quick brown fox jumps over the lazy dog

300400500600700800

Typografiskala

Display Heading

Tag

h1

Size

clamp(2.25rem, 7vw, 5rem)

Line Height

1.05

Weight

800

Large Heading

Tag

h2

Size

clamp(1.875rem, 4vw, 2.5rem)

Line Height

1.15

Weight

700

Medium Heading

Tag

h3

Size

clamp(1.5rem, 3vw, 1.875rem)

Line Height

1.25

Weight

700

Section Heading

Tag

h4

Size

1.25rem

Line Height

1.3

Weight

700

Subsection Heading
Tag

h5

Size

1.125rem

Line Height

1.4

Weight

700

Small Heading
Tag

h6

Size

1rem

Line Height

1.2

Weight

700

Lead paragraph text for introductions and emphasis

Tag

lead

Size

1.125rem

Line Height

1.7

Weight

400

Body text for main content and paragraphs

Tag

body

Size

1rem

Line Height

1.6

Weight

400

Small text for captions and supporting information

Tag

small

Size

0.875rem

Line Height

1.5

Weight

400

CAPTION TEXT

Tag

caption

Size

0.75rem

Line Height

1.4

Weight

600

Avstand og layout

Konsistent spacing og containerbredder.

Containerbredder

max-w-7xlEkstra stor (80rem / 1280px)
max-w-6xlStor (72rem / 1152px) – standard
max-w-5xlMedium (64rem / 1024px)
max-w-4xlLiten (56rem / 896px)
max-w-2xlEkstra liten (42rem / 672px)

Seksjonspadding

Responsive mønstre med mindre padding på mobil.

py-12 md:py-24STANDARD

48px mobil → 96px desktop

41 forekomster

py-16 md:py-28

64px → 112px

Innholdstunge seksjoner

py-16 md:py-32

64px → 128px

CTA-seksjoner med ekstra luft

Prinsipp: Mindre padding på mobil reduserer unødvendig scrolling.

Horisontal padding

px-6 sm:px-8 lg:px-12

Container-padding (responsiv)

24px mobil → 32px tablet → 48px desktop

p-6 md:p-10

Kort-padding

24px mobil → 40px desktop

Gap-avstand

gap-4

1rem / 16px

gap-6

1.5rem / 24px

gap-8

2rem / 32px

gap-12

3rem / 48px

gap-16

4rem / 64px

Skygger

Varme, subtile skygger som skaper dybde.

Grunnleggende skygge

shadow-warm

0 4px 6px -1px rgba(26, 25, 24, 0.08), 0 2px 4px -2px rgba(26, 25, 24, 0.04);

Stor skygge

shadow-warm-lg

0 10px 25px -5px rgba(26, 25, 24, 0.1), 0 8px 10px -6px rgba(26, 25, 24, 0.06);

Ekstra stor skygge

shadow-warm-xl

0 20px 40px -10px rgba(26, 25, 24, 0.12), 0 10px 20px -8px rgba(26, 25, 24, 0.08);

Komponenter

UI-komponenter med konsistent styling.

Knapper

CTAButton

PRIMÆR

Primære handlinger. Bruker btn-scale animasjon.

Kom i gang

Default (40px)

Kom i gang

Small (36px)

Button

6 varianter, 3 størrelser.

Primary

Small (h-9)
Default (h-10)
Large (h-12)

Secondary

Small (h-9)
Default (h-10)
Large (h-12)

Outline

Small (h-9)
Default (h-10)
Large (h-12)

Ghost

Small (h-9)
Default (h-10)
Large (h-12)

Primary Light

Small (h-9)
Default (h-10)
Large (h-12)

Outline Light

Small (h-9)
Default (h-10)
Large (h-12)

Animasjoner

Organiske animasjoner som gir liv til grensesnittet.

Blob-animasjon

animate-blob

Varighet: 20s

Sakte rotasjon

animate-spin-slow

Varighet: 60s

Sveve

animate-float

Varighet: 6s

Overgangsfunksjoner

transition-organic // cubic-bezier(0.16, 1, 0.3, 1)
btn-scale // Hover: scale(1.03), Active: scale(0.98)