Typography

These styles give you a solid typographic scale to start with. Swap the fonts in the styles to match the brand. You can always go fully custom with things like hero text etc. but be sure to tag headers and text with the right semantic tag in the accessibility panel.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Body Large

Body Regular

Body Small

Buttons

The button components let you maintain a consistent feel across the site, you can configure leading/trailing icons with variants, as standard they use Phosphor Icons but you can swap these out to whatever you prefer

Color

Edit the following in the shared colors swatches to make global changes. Add as many as you like, but remember its a good idea to document as much as you can for collaboration and handovers, so try to add swatches in here for reference!

Black

White

Accent

Neutrals

50

100

200

300

400

500

600

700

800

900