Theme colours

Brand Colours

blue #002663

orange #F28B00

red #DD2330

yellow #FFD200

light-blue #00BDE9

Secondary Colours

error-red #F4BDC0

secondary-red #9E1B32

secondary-blue #C0C8D6

secondary-green #BBC6B9

Neutrals

light-grey #EBECED

soft-grey #D5D6D2

mid-grey #696F73

dark-grey #36424A

ui-dark-grey #293238

white #FFFFFF

black #1A1A1A

transparent transparent

Rendered Buttons

Primary

Secondary

Tertiary

Icon

Typography

Heading Level 1

[font-size: 2.5rem (40px) | line-height: 1.2 | font-weight: 700]

Heading Level 1Display

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 duis aute irure dolor in reprehenderit in voluptate.

Heading Level 2

[font-size: 2rem (32px) | line-height: 1.2 | font-weight: 700]

Heading Level 2 - Display

Heading Level 3

[font-size: 1.75rem (28px) | line-height: 1.2 | font-weight: 700]

Heading Level 3 - Display

Heading Level 4

[font-size: 1.5rem (24px) | line-height: 1.2 | font-weight: 700]

Heading Level 4 - Display

Heading Level 5

[font-size: 1.25rem (20px) | line-height: 1.2 | font-weight: 700]

Heading Level 5 - Display

Heading Level 6

[font-size: 1rem (16px) | line-height: 1.2 | font-weight: 700]

Heading Level 6 - Display

Text Elements

This is a regular paragraph with strong text, bold text, emphasized text, italic text, marked text, small text, ~~deleted text~~, inserted text, _subscript, and ^superscript.

Here's a standard link and some inline code.

This is a blockquote. It's used for quoting text from another source or highlighting important information.

This is preformatted text
      It preserves    spaces
      And line breaks

Lists

Unordered List

First item
Second item
Third item with nested list:
- Nested item 1
- Nested item 2

Ordered List

First item
Second item
Third item

Description List

Term 1: Description for term 1
Term 2: Description for term 2

Form Elements

Personal Information Text Input: Email Input: Password Input: Number Input: Date Input: Textarea:

select:

Checkboxes Checkbox 1 (checked) Checkbox 2

Radio Buttons Option 1 Option 2

Table

Sample Table Caption
Header 1	Header 2	Header 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3
Row 3, Cell 1	Row 3, Cell 2	Row 3, Cell 3
Footer 1	Footer 2	Footer 3

Media Elements

Image

Figure with Caption

Other Elements

Address

123 Main Street
City, State 12345
email@example.com

Abbreviation

The HTML specification.

Details & Summary

Click to expand

This is the hidden content that appears when you click the summary.

Progress Bar

70%

Meter

60%

Horizontal Rule

Keyboard Input

Press Ctrl + C to copy

Sample Output

This is sample output from a computer program

Variable

The variable x represents an unknown value.