Design System

Welcome to the Design System. Select a section from the navigation.

Colours

Palette

yellow-950
yellow-900
yellow-800
yellow-700
yellow-600
yellow-500
yellow-400
yellow-300
yellow-200
yellow-100
yellow-50
green-950
green-900
green-800
green-700
green-600
green-500
green-400
green-300
green-200
green-100
green-50
turquoise-950
turquoise-900
turquoise-800
turquoise-700
turquoise-600
turquoise-500
turquoise-400
turquoise-300
turquoise-200
turquoise-100
turquoise-50
aqua-950
aqua-900
aqua-800
aqua-700
aqua-600
aqua-500
aqua-400
aqua-300
aqua-200
aqua-100
aqua-50
orange-950
orange-900
orange-800
orange-700
orange-600
orange-500
orange-400
orange-300
orange-200
orange-100
orange-50
red-950
red-900
red-800
red-700
red-600
red-500
red-400
red-300
red-200
red-100
red-50
magenta-950
magenta-900
magenta-800
magenta-700
magenta-600
magenta-500
magenta-400
magenta-300
magenta-200
magenta-100
magenta-50
purple-950
purple-900
purple-800
purple-700
purple-600
purple-500
purple-400
purple-300
purple-200
purple-100
purple-50
blue-950
blue-900
blue-800
blue-700
blue-600
blue-500
blue-400
blue-300
blue-200
blue-100
blue-50
neutral-950
neutral-900
neutral-800
neutral-700
neutral-600
neutral-500
neutral-400
neutral-300
neutral-200
neutral-100
neutral-50
slate-950
slate-900
slate-800
slate-700
slate-600
slate-500
slate-400
slate-300
slate-200
slate-100
slate-50

Brand

black
white
yellow
green
turquoise
aqua
gradient

Typography

Display Styles

display-3xl

The quick brown

Font Size:text-8xl (185px)
Font Weight:font-normal (400)
Line Height:leading-none (100%)

display-2xl

The quick brown

Font Size:text-7xl (120px)
Font Weight:font-normal (400)
Line Height:leading-none (100%)

display-xl

The quick brown

Font Size:text-6-5xl (90px)
Font Weight:font-normal (400)
Line Height:leading-none (100%)

display-lg

The quick brown

Font Size:text-6xl (72px)
Font Weight:font-normal (400)
Line Height:leading-none (100%)

display

The quick brown

Font Size:text-5xl (60px)
Font Weight:font-normal (400)
Line Height:leading-none (100%)

display-sm

The quick brown

Font Size:text-4xl (48px)
Font Weight:font-normal (400)
Line Height:leading-none (100%)

display-xs

The quick brown

Font Size:text-3xl (40px)
Font Weight:font-normal (400)
Line Height:leading-none (100%)

Paragraph Styles

paragraph-2xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font Size:text-2xl (32px)
Font Weight:font-normal (400)
Line Height:leading-snug (125%)

paragraph-xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font Size:text-xl (28px)
Font Weight:font-normal (400)
Line Height:leading-snug (125%)

paragraph-lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font Size:text-1-5lg (24px)
Font Weight:font-normal (400)
Line Height:leading-snug (125%)

paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font Size:text-base (20px)
Font Weight:font-normal (400)
Line Height:leading-normal (140%)

paragraph-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font Size:text-sm (14px)
Font Weight:font-normal (400)
Line Height:leading-snug (125%)

paragraph-xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font Size:text-xs (12px)
Font Weight:font-normal (400)
Line Height:leading-snug (125%)