Runway

Design tokens

Colors

Base

--background

#ffffff

--foreground

#171717

Theme

--primary

#7c3aed

--primary-light

#f5f3ff

--primary-dark

#5b21b6

--secondary

#ec4899

--secondary-light

#fce7f3

--secondary-dark

#be185d

--accent

#F1B31C

--accent-light

#fef3c7

--accent-dark

#d97706

--vitality

#10b981

--vitality-light

#d1fae5

--vitality-dark

#065f46

--insight

#3b82f6

--insight-light

#dbeafe

--insight-dark

#1e40af

Grey

--grey-light

#EDEDED

--grey

#CACACA

--grey-dark

#8B8B8B

--grey-1

#f0f0f0

--grey-4

#5f5f5f

Purple

--purple-logo

#A13DF7

--purple-light

#D09EFB

--purple-lightest

#F6ECFE

--purple-dark-bg

#0D0620

--purple-muted

#9B8AAF

--purple-1

#f5e8ff

--purple-2

#e2c6f9

--purple-3

#b990dc

--purple-4

#8861aa

--purple-5

#4b2c6f

--blackberry

#16001e

Pink

--pink-lightest

#FDE5F8

--pink-light

#ED8AD1

--pink

#F000B8

Yellow

--yellow-lightest

#FEF7E8

--yellow-light

#F8D98D

--yellow

#F1B31C

Teal

--teal-lightest

#EAFCFC

--teal-light

#96F3F3

--teal

#2EE6E6

Blue

--blue-lightest

#E5E5FF

--blue-light

#8080FF

--blue

#0000FF

--blue-dark

#101827

Status

--red

#D22F27

--alert-red

#ff2e00

--green

#16853B

--white

#fefbfb

Typography

--text-h1

50px / 1

The quick brown fox jumps over the lazy dog

--text-h2

36px / 1

The quick brown fox jumps over the lazy dog

--text-h3

30px / 1

The quick brown fox jumps over the lazy dog

--text-h1-mobile

32px / 1

The quick brown fox jumps over the lazy dog

--text-h2-mobile

24px / 1

The quick brown fox jumps over the lazy dog

--text-h3-mobile

22px / 1

The quick brown fox jumps over the lazy dog

--text-accent

18px / 28px

The quick brown fox jumps over the lazy dog

--text-paragraph

14px / 18px

The quick brown fox jumps over the lazy dog

--text-small

12px / 1

The quick brown fox jumps over the lazy dog

Fonts

--font-sans

IBM Plex Sans

--font-mono

IBM Plex Mono

Breakpoints

--breakpoint-nav835px

--breakpoint-nav-lg1085px