Styleguide

A comprehensive component library

Typography

Headings

Text Display 72

Text Heading 42

Text Heading 36

Text Heading 30

Text Heading 24

Text Heading 18

Text Heading 16

Text Heading 14

Text Heading 12

Text Heading Caps 16

Text Heading Caps 12

Body Text

The quick brown fox jumps over the lazy dog.

You don’t know me!

Oh, we’re welllll past that, Jerry! I’m Mr. Crowbar, and here is my friend, who is also a crowbar! Snuffles was my slave name. You can call me Snowball, because my fur is pretty and white.

You don’t know me! Oh, we’re welllll past that, Jerry! I’m Mr. Crowbar, and here is my friend, who is also a crowbar! Snuffles was my slave name. You can call me Snowball, because my fur is pretty and white.

You don't know me!

Oh, we're welllll past that, Jerry! I'm Mr. Crowbar,and here is my friend, who is also a crowbar! Snuffles was my slave name. You can call me Snowball, because my fur is pretty and white.

You don't know me! Oh, we're welllll past that, Jerry! I'm Mr. Crowbar, and here is my friend, who is also a crowbar! Snuffles was my slave name. You can call me Snowball, because my fur is pretty and white.

Colour Palette

Misc

--font-display--text-color

var(--color-primary-brand-blue-midnight);

current

currentcolor;

black

#000000;

black-off

#00143C;

black-matte

#1E1F22;

grey-dark

#303235;

grey-mid

#61646B;

grey-light

#A9ACB1;

grey-lightest

#EAEAEC;

grey-cool

#E5E7EB;

white

#ffffff;

focus

#CF92FF;

Primary

primary-brand-midnight

#051C49;

primary-brand-midnight-light

#192B6E;

primary-brand-midnight-faded

#051C497A;

primary-brand-blue

#4A8FE2;

primary-brand-blue-royal

#2B388F;

primary-brand-blue-cornflower

#77B7F7;

primary-brand-blue-misty

#E5F1FF;

Secondary

secondary-brand-red

#FF5757;

secondary-brand-red-ruby

#EA2F2F;

secondary-brand-red-blush

#FF9292;

secondary-brand-red-peachy

#FDEBEB;

secondary-brand-red-deep

#AA2020;

secondary-brand-green-bonus

#28B55E;

secondary-brand-green-grass

#54CA63;

secondary-brand-green-pea

#80E18D;

secondary-brand-green-mist

#E6F7E2;

secondary-brand-green-deep

#1E6F3D;

Tertiary

tertiary-brand-yellow-sunshine

#FFD039;

tertiary-brand-yellow-golden

#FFB600;

tertiary-brand-yellow-lemon

#FFDC78;

tertiary-brand-yellow-banana

#FFF9E7;

tertiary-brand-yellow-shadow

#9E6800;

Social media

facebook

#2058c0;

twitter

#43a0fd;

whatsapp

#28b55e;

instagram

#833ab4;

youtube

#FF0000;

Icons

Icons are from feathericons.com and support Tailwind utilities for sizing/colours etc.