Web Brand Guidelines

Colours

Click any colour band to copy its hex value.

Brand Colours

Ink R 20 G 90 B 96 #145A60
Teal R 52 G 173 B 163 #34ADA3
Bone R 244 G 242 B 237 #F4F2ED
Yellow R 250 G 220 B 88 #FADC58
Gold R 244 G 178 B 45 #F4B22D

Secondary Colours

Midnight R 0 G 47 B 69 #002F45
Teal +1 R 35 G 156 B 146 #239C92
Teal -1 R 98 G 208 B 199 #62D0C7
Teal -2 R 161 G 227 B 221 #A1E3DD

System Colours

Noir R 28 G 28 B 30 #1C1C1E
Charcoal 900 R 67 G 62 B 64 #433E40
Charcoal 700 R 88 G 84 B 85 #585455
Charcoal 500 R 151 G 148 B 149 #979495
Charcoal 300 R 192 G 191 B 191 #C0BFBF
Charcoal 100 R 234 G 234 B 234 #EAEAEA
White R 255 G 255 B 255 #FFFFFF

Accent Colours

Accent Success R 58 G 125 B 51 #3A7D33
Error R 218 G 0 B 0 #DA0000
Palette values are rendered exactly from the new rebrand chart.
 

Typography

Typography
Desktop

Heading
One

desktop/H1
Font Le Monde Sans Std
Letter Spacing -1%
Weight ExBold
Text Decoration None
Size 77px
Paragraph Spacing 0px
Line Height 84px
Case Original

Heading
Two

desktop/H2
Font Le Monde Sans Std
Letter Spacing 0%
Weight ExBold
Text Decoration None
Size 60px
Paragraph Spacing 0px
Line Height 72px
Case Original

Heading
Three

desktop/H3
Font Le Monde Sans Std
Letter Spacing 0%
Weight ExBold
Text Decoration None
Size 50px
Paragraph Spacing 0px
Line Height 60px
Case Original

Heading Four

desktop/H4
Font Le Monde Sans Std
Letter Spacing 0%
Weight ExBold
Text Decoration None
Size 36px
Paragraph Spacing 0px
Line Height 43px
Case Original

Heading Five

desktop/H5
Font Le Monde Sans Pro
Letter Spacing 0%
Weight ExDemi
Text Decoration None
Size 30px
Paragraph Spacing 0px
Line Height 37px
Case Original

This is Large Paragraph Style. It is a legible size that is good for long-form reading.

desktop/paragraph-large
Font Avenir Next
Letter Spacing 0%
Weight Demi Bold
List Spacing 8px
Size 22px
Paragraph Spacing 16px
Line Height 29px
Case Original

This is Paragraph Style. It will be used most of the time. It is a legible size that is good for long-form reading. It should always be left aligned.

desktop/paragraph
Font Avenir Next
Letter Spacing 0%
Weight Demi Bold
List Spacing None
Size 18px
Paragraph Spacing 16px
Line Height 23px
Case Original

accent type

desktop/accent
Font Halloa
Letter Spacing 0%
Weight Regular
List Spacing None
Size 100px
Paragraph Spacing None
Line Height 60px
Case Original

Typography
Mobile

Heading One

mobile/H1
Font Le Monde Sans Std
Letter Spacing -1%
Weight ExBold
Text Decoration None
Size 44px
Paragraph Spacing 0px
Line Height 48px
Case Original

Heading Two

mobile/H2
Font Le Monde Sans Std
Letter Spacing 0%
Weight ExBold
Text Decoration None
Size 38px
Paragraph Spacing 0px
Line Height 42px
Case Original

Heading Three

mobile/H3
Font Le Monde Sans Std
Letter Spacing 0%
Weight ExBold
Text Decoration None
Size 28px
Paragraph Spacing 0px
Line Height 33px
Case Original

Heading Four

mobile/H4
Font Le Monde Sans Std
Letter Spacing 0%
Weight ExBold
Text Decoration None
Size 24px
Paragraph Spacing 0px
Line Height 28px
Case Original

Heading Five

mobile/H5
Font Le Monde Sans Pro
Letter Spacing 0%
Weight ExDemi
Text Decoration None
Size 21px
Paragraph Spacing 0px
Line Height 26px
Case Original

This is Large Paragraph Style. It is a legible size that is good for long-form reading.

mobile/paragraph-large
Font Avenir Next
Letter Spacing 0%
Weight Demi Bold
List Spacing 8px
Size 16px
Paragraph Spacing 16px
Line Height 21px
Case Original

This is Paragraph Style. It will be used most of the time. It is a legible size that is good for long-form reading. It should always be left aligned.

mobile/paragraph
Font Avenir Next
Letter Spacing 1%
Weight Demi Bold
List Spacing None
Size 14px
Paragraph Spacing 16px
Line Height 18px
Case Original

accent type

mobile/accent
Font Halloa
Letter Spacing 0%
Weight Regular
List Spacing None
Size 70px
Paragraph Spacing 16px
Line Height 50px
Case Original

 

Call to actions / buttons

Preset Combination dropdown examples (A-F)

A. Default CTA (primary)

View Farm

style_preset: default_primary

B. Dark CTA (used on teal sections)

View Farm

style_preset: dark_cta

C. Teal CTA

View Farm

style_preset: teal_cta

D. Dark-on-yellow CTA (Investing section)

View Farm

style_preset: dark_on_yellow

E. Ink Border

View Farm

style_preset: ink_border

F. Gold

View Farm

style_preset: gold_cta

Spacing scale

--space-1 --space-2 --space-3 --space-4 --space-5 --space-6 --space-7 --space-8

Usage: Apply spacing tokens with var(...) for margin, padding, gap, row-gap, and column-gap.

Example: padding: var(--space-6); or gap: var(--space-4);

Typical pattern: Use smaller tokens like --space-1 to --space-3 for tight UI spacing, --space-4 to --space-6 for component padding, and --space-7 to --space-8 for section spacing.

Form tokens

--btn-radius --btn-font-size --btn-line-height --btn-border

Usage: These tokens are for button and form-control styling so new UI matches the theme system.

Example: border-radius: var(--btn-radius); font-size: var(--btn-font-size); line-height: var(--btn-line-height); border-width: var(--btn-border);

Typical pattern: Apply them to buttons, inputs, selects, and textareas when creating custom components instead of hardcoding one-off values.