Design System

Logo & symbolSVG til download

2 skrifttyperExposure & ABC Oracle

3 farvepaletter31+ nuancer

6 knapvarianter18 kombinationer

26 illustrationerCoby · PNG

Logo

Logo – positiv (SVG)

Logo – negativ (SVG)

Logo – sort (SVG)

Logo – hvid (SVG)

Symbol

Symbol – farve (SVG)

Download

Symbol – sort (SVG)

Download

Symbol – hvid (SVG)

Download

Coby-illustrationer

26 assets · PNG

Farvepalet

Klik på en farve for at kopiere.

Purple – primary color

Primary brand color for call-to-action buttons and interactive elements

#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

Pink – secondary color

Secondary accent color for highlights and visual interest

#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

Deep blue – warm neutrals

Warm grey tones as the foundation of the design system

#FAF9F4

deep-blue-50

#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

Baggrunde

Cream

#FAF9F4

bg-cream

Main page background

Cream dark

#F4F2EB

bg-deep-blue-75

Alternating section background

Cream footer

#E5E2D9

bg-cream-footer

Footer background

Udvidet palet

Endnu ikke implementeret som Tailwind-klasser.

Sage

#7A9E75

Rose

#C97A8C

Blue

#7088AA

Terracotta

#B8907E

Moss

#6B8B6B

Oat

#D4C5B0

Lavender

#9B8FA8

Coral

#E8956F

Sky

#A8C5DD

Mørke sektioner

Overskrift i mørk sektion

text-white

Brødtekst i mørk sektion.

text-deep-blue-300

border-deep-blue-800

Kom i gang

Navbar-integration: data-dark-section attributten skifter navbar til lys tilstand.

Typografi

Exposure til overskrifter, ABC Oracle til brødtekst. Responsiv skalering.

Exposure – overskrifter

Aa-20

Aa-10

Aa0

Aa10

Aa20

EXPO-akse: -100 til +100 (negativ = tykkere, positiv = tyndere)

ABC Oracle – brødtekst

Line Height

1.2

EXPO

-3

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

Afstand & layout

Containerbredder

max-w-7xlEkstra stor (80rem / 1280px)

max-w-6xlStor (72rem / 1152px) – standard

max-w-5xlMedium (64rem / 1024px)

max-w-4xlLille (56rem / 896px)

max-w-2xlEkstra lille (42rem / 672px)

Sektionspadding

py-12 md:py-24STANDARD

48px mobil → 96px desktop

py-16 md:py-28

64px → 112px

Indholdstunge sektioner

py-16 md:py-32

64px → 128px

CTA-sektioner med ekstra luft

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

Skygger

Varme, subtile skygger der skaber dybde.

Base shadow

shadow-warm

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

Large shadow

shadow-warm-lg

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

Extra large shadow

shadow-warm-xl

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

Komponenter

Knapper

CTAButton

PRIMÆR

Kom i gang

Standard (40px)

Kom i gang

Blob animation

animate-blob

Varighed: 20s

Slow rotation

animate-spin-slow

Varighed: 60s

Float

animate-float

Varighed: 6s

Overgangsfunktioner

transition-organic // cubic-bezier(0.16, 1, 0.3, 1)

btn-scale // Hover: scale(1.03), Active: scale(0.98)