Style Guide

1. Color Palette

 

Primary color: Blue #14879b

 

Secondary color: safety-orange #f07d2a

2. Page Title

Page Title

3. Breadcrumbs

  1. Home
  2. /Category 1
  3. /Category 2
  4. /Current Page

4. Typography

Primary font

Montserrat (.font-montserrat)

sm - 0.75rem

base - 0.875rem

lg - 1rem

xl- 1.125rem

2xl - 1.25rem

3xl - 1.5rem

4xl - 1.75rem

5xl - 2rem

Base typography

Body text - Body text is the main content type used throughout the site. It should be legible, with appropriate line height and contrast to ensure readability across all devices. The font size should be consistent for paragraphs and smaller text elements like captions and footnotes.

Heading typography

H1 - Heading

H2 - Subheading

H3 - Section Title

H4 - Section Title

H5 - Section Title

Links typography

This is the link text

5. Component Library

Button

Form

Input text:

Textarea:

Checkbox: