design system

Typography

Heading

Heading 1 Font size: 24 Font family: plus-jakarta-sans Font weight: semibold Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789
Heading 2 Font size: 22 Font family: plus-jakarta-sans Font weight: semibold Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789
Heading 3 Font size: 20 Font family: plus-jakarta-sans Font weight: semibold Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789
Heading 4 Font size: 18 Font family: plus-jakarta-sans Font weight: semibold Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789
Heading 5 Font size: 16 Font family: plus-jakarta-sans Font weight: semibold Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789

Heading secondary

Heading 1 Font size: 24 Font family: neue-haas-grotesk Font weight: regular Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789
Heading 2 Font size: 22 Font family: neue-haas-grotesk Font weight: regular Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789
Heading 3 Font size: 20 Font family: neue-haas-grotesk Font weight: regular Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789
Heading 4 Font size: 18 Font family: neue-haas-grotesk Font weight: regular Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789
Heading 5 Font size: 16 Font family: neue-haas-grotesk Font weight: regular Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789

Body

Body lg Font size: 16 Font family: plus-jakarta-sans Font weight: medium Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789
Body lg bold Font size: 16 Font family: plus-jakarta-sans Font weight: semibold Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789
Body reg Font size: 14 Font family: plus-jakarta-sans Font weight: medium Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789
Body reg bold Font size: 14 Font family: plus-jakarta-sans Font weight: semibold Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789
Body sm Font size: 12 Font family: plus-jakarta-sans Font weight: medium Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789
Body sm bold Font size: 12 Font family: plus-jakarta-sans Font weight: semibold Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789
Body xsm Font size: 10 Font family: plus-jakarta-sans Font weight: medium Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789
Body xsm bold Font size: 10 Font family: plus-jakarta-sans Font weight: semibold Letter spacing: 1%

The quick brown fox jumps over the lazy dog. 0123456789

Body secondary

Body lg Font size: 16 Font family: neue-haas-grotesk Font weight: regular Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789
Body lg bold Font size: 16 Font family: neue-haas-grotesk Font weight: medium Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789
Body reg Font size: 14 Font family: neue-haas-grotesk Font weight: regular Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789
Body reg bold Font size: 14 Font family: neue-haas-grotesk Font weight: medium Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789
Body sm Font size: 12 Font family: neue-haas-grotesk Font weight: regular Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789
Body sm bold Font size: 12 Font family: neue-haas-grotesk Font weight: medium Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789
Body xsm Font size: 10 Font family: neue-haas-grotesk Font weight: regular Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789
Body xsm bold Font size: 10 Font family: neue-haas-grotesk Font weight: medium Letter spacing: 2%

The quick brown fox jumps over the lazy dog. 0123456789

Colour

neutral

50 bg-neutral-50 #FFFFFF
100 bg-neutral-100 #F8F8F8
200 bg-neutral-200 #F1F1F1
300 bg-neutral-300 #E4E4E4
400 bg-neutral-400 #D6D6D6
500 bg-neutral-500 #C9C9C9
600 bg-neutral-600 #B0B0B0
700 bg-neutral-700 #919191
800 bg-neutral-800 #767676
900 bg-neutral-900 #555555
950 bg-neutral-950 #333333
1000 bg-neutral-1000 #000000

beige

50 bg-beige-50 #F9F7F3
100 bg-beige-100 #F2EFE7
200 bg-beige-200 #ECE8DC
300 bg-beige-300 #E5E0D0
400 bg-beige-400 #DFD8C4
500 bg-beige-500 #D2C9AF
600 bg-beige-600 #C1B698
700 bg-beige-700 #B1A583
800 bg-beige-800 #A09372
900 bg-beige-900 #8A7F60
950 bg-beige-950 #6A6047
1000 bg-beige-1000 #4A4331

green

50 bg-green-50 #F3FFE9
100 bg-green-100 #E5FFCF
200 bg-green-200 #CEFFA5
300 bg-green-300 #B3F47D
400 bg-green-400 #95E651
500 bg-green-500 #7DD236
600 bg-green-600 #6DC029
700 bg-green-700 #5AA31D
800 bg-green-800 #468512
900 bg-green-900 #336D03
950 bg-green-950 #2B5F00
1000 bg-green-1000 #245000

pink

50 bg-pink-50 #FDF4F9
100 bg-pink-100 #FFE8F7
200 bg-pink-200 #FFD6F0
300 bg-pink-300 #FFC5EA
400 bg-pink-400 #FFA7DC
500 bg-pink-500 #FF7CC0
600 bg-pink-600 #FF48A7
700 bg-pink-700 #F51689
800 bg-pink-800 #DE0073
900 bg-pink-900 #B1005C
950 bg-pink-950 #840045
1000 bg-pink-1000 #620033

red

50 bg-red-50 #FFF0F0
100 bg-red-100 #FFD9DA
200 bg-red-200 #FFBEC0
300 bg-red-300 #FF9C9F
400 bg-red-400 #FF767B
500 bg-red-500 #FF454C
600 bg-red-600 #ED1C24
700 bg-red-700 #DD0419
800 bg-red-800 #C50010
900 bg-red-900 #A60006
950 bg-red-950 #7D0005
1000 bg-red-1000 #560101

yellow

50 bg-yellow-50 #FFF9E6
100 bg-yellow-100 #FFF2CA
200 bg-yellow-200 #FFE7A6
300 bg-yellow-300 #FFDA7D
400 bg-yellow-400 #FFCC49
500 bg-yellow-500 #FFBB27
600 bg-yellow-600 #FFAA00
700 bg-yellow-700 #F28D00
800 bg-yellow-800 #DB7100
900 bg-yellow-900 #B55800
950 bg-yellow-950 #8D4500
1000 bg-yellow-1000 #683300

Buttons

CTAs

Primary one Primary two Primary three Secondary one Secondary two Tertiary

Badges

Light badge

Dark badge

Logo

Large

Small

Responsive

Icons

menu

atc

basket

basket-amount

3

accounts

search

wishlist

save

flag

support

arrow-left

arrow-right

tick

chevron-down

chevron-up

plus

minus

close

By Type

By Occassion

By Colour

By Type

By Occassion

By Type

By Collection

By Type

By Type

By Occasion

By Type

Typography

Heading

Heading secondary

Body

Body secondary

Colour

neutral

beige

green

pink

red

yellow

Buttons

CTAs

Links

Tabs

Tab group

Badges

Logo

Icons

Swatches