Web Brand Guidelines

Colors

Click any swatch card to copy the hex value to your clipboard.

--brand-color-01
HEX: #145A60
CSS: var(--brand-color-01)
--brand-color-02
HEX: #FADC58
CSS: var(--brand-color-02)
--brand-color-03
HEX: #34ADA3
CSS: var(--brand-color-03)
--brand-color-04
HEX: #104A4F
CSS: var(--brand-color-04)
--brand-color-05
HEX: #1B7B80
CSS: var(--brand-color-05)
--brand-color-06
HEX: #239C92
CSS: var(--brand-color-06)
--primary
HEX: #145A60
CSS: var(--primary)
--black
HEX: #000000
CSS: var(--black)
--white
HEX: #FFFFFF
CSS: var(--white)
--bone
HEX: #F4F2ED
CSS: var(--bone)
--dark-grey
HEX: #545454
CSS: var(--dark-grey)
--light-grey
HEX: #EDEDED
CSS: var(--light-grey)
--accent
HEX: #145A60
CSS: var(--accent)
--ink
HEX: #145A60
CSS: var(--ink)
--ink-minus-1
HEX: #1B7B80
CSS: var(--ink-minus-1)
--ink-dark
HEX: #104A4F
CSS: var(--ink-dark)
--melon
HEX: #F77052
CSS: var(--melon)
Root color tokens are surfaced here for direct design and dev reference.
 

System Colors

Error
HEX: #DA0000
Success
HEX: #6FC16B

 

Typography

H1 font: Le-Monde-Extra-Bold Applied to semantic h1 headings only.
H2-H6 font: Le-Monde-Demi Applied to semantic h2 through h6 headings.
Body font: CentraNo2, sans-serif Used for paragraph and interface copy.
Navigation/UI font: CentraNo2, sans-serif Le Monde is scoped to heading tags only.
Highlight font: Web-TT-Halloa, sans-serif Used for highlight treatments like .pre-head-feat.
Highlight utility class: .font-highlight-brand Forces font-family: 'Web-TT-Halloa', sans-serif and font-weight: 400.
Heading tokens: --font-family-headings and --font-family-head-h1
Body font size: 16px
Line height: 1.5
Body weight: 400
H1 size: 48px
H2 size: 36px
H3 size: 28px
H4 size: 20px
H5 size: 18px

Usage: Add class="font-highlight-brand" to the element that should render in the script/highlight font.

Example: <p class="font-highlight-brand">Highlight / Pre-head Feature</p>

Heading color: #145A60 var(--brand-color-01)

Body color: #145A60 var(--primary)


 

Highlight / Pre-head Feature

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

This is a copy link

Bold

Italic

Underline

Strikethrough


 

Call to actions / buttons

Preset Combination dropdown examples (A-E)

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

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.