Style Guide

Light theme

Typography

Default font

'Urbanist Variable', var(--pico-font-family-sans-serif);

Code 
Default font
 
'Urbanist Variable', var(--pico-font-family-sans-serif);

Gothic font

'League Gothic Variable', var(--pico-font-family-sans-serif);

Code 
Gothic font
 
'League Gothic Variable', var(--pico-font-family-sans-serif);

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Strong

Emphasis

Code 
Heading 1
 
Heading 2
 
Heading 3
 
Heading 4
 
Heading 5
 
Heading 6
 
Paragraph
 
Strong
 
Emphasis

Colours

Primary
Code 
Primary
Secondary
Code 
Secondary
Contrast
Code 
Contrast

Buttons

Code
Code
Code
Code
Code
Code

Forms

Code
Code
Code
Checkboxes:
Code 
Checkboxes:
Code

Cards

Card header

Card content section

Card content

Card footer

Code 
Card header
 
Card content section
 
Card content
 
Card footer

Dark theme

Typography

Default font

'Urbanist Variable', var(--pico-font-family-sans-serif);

Code 
Default font
 
'Urbanist Variable', var(--pico-font-family-sans-serif);

Gothic font

'League Gothic Variable', var(--pico-font-family-sans-serif);

Code 
Gothic font
 
'League Gothic Variable', var(--pico-font-family-sans-serif);

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Strong

Emphasis

Code 
Heading 1
 
Heading 2
 
Heading 3
 
Heading 4
 
Heading 5
 
Heading 6
 
Paragraph
 
Strong
 
Emphasis

Colours

Primary
Code 
Primary
Secondary
Code 
Secondary
Contrast
Code 
Contrast

Buttons

Code
Code
Code
Code
Code
Code

Forms

Code
Code
Code
Checkboxes:
Code 
Checkboxes:
Code

Cards

Card header

Card content section

Card content

Card footer

Code 
Card header
 
Card content section
 
Card content
 
Card footer