FNS360
Colour & Type

Every colour and typeface used across the five design directions. Three palettes and five type systems — the two type variations share their palette with the direction they belong to.

Colour

Three palettes. Champagne Gold serves V1 and V2; Terra serves V1 and V2.

Champagne Gold

Used by Champagne Gold V1 and V2

--primary#181818Page ground
--ink-2#1F1E1DRaised panel
--ink-3#262422Hairline lift
--stone#443A31Solid panels, community band
--gold#C8A96AAccent
--taupe#E7DDD1Light tint
--ivory#F7F4EFHeadings, primary text
--bodyrgba(231,221,209,.72)Body text
--body-dimrgba(231,221,209,.70)Muted labels
--linergba(200,169,106,.26)Accent hairline
--line-softrgba(231,221,209,.14)Neutral hairline

Noir

Used by Noir

--primary#040404Page ground
--ink-2#0E0E10Raised panel
--ink-3#151311Hairline lift
--stone#4A3928Solid panels, community band
--gold#C09257Accent
--taupe#E4DCD4Light tint
--ivory#F2EDE6Headings, cream conversion band
--bodyrgba(228,220,212,.72)Body text
--body-dimrgba(228,220,212,.68)Muted labels
--linergba(192,146,87,.26)Accent hairline
--line-softrgba(228,220,212,.14)Neutral hairline

Terra

Used by Terra V1 and V2

--espresso#2C241CPage ground
--umber#372D23Raised panel
--umber-2#43372AHairline lift
--cocoa#261C14Deep shade
--ochre#CDA72AAccent
--btn#FCC921Button fills only
--ochre-lt#D9A75CSoft accent
--limestone#E8DFD1Community band, headings
--sand#BFAE95Body text
--body-dimrgba(232,223,209,.72)Muted labels
--linergba(205,167,42,.32)Accent hairline
--line-softrgba(232,223,209,.13)Neutral hairline

Type

Five type systems, one per direction. Families only — weights and styles are set in each page.

Champagne Gold · V1

HeadlinesBarlow Condensed

Build a Healthier Lifestyle

Body and interfaceManrope

Build a Healthier Lifestyle

Highlight wordCormorant Garamond

Build a Healthier Lifestyle

Champagne Gold · V2

Headlines and highlight wordFraunces

Build a Healthier Lifestyle

Body and interfaceInter

Build a Healthier Lifestyle

Noir

Section headings, eyebrows, figures, highlight wordCormorant Garamond

Build a Healthier Lifestyle

Page headline, body and interfaceManrope

Build a Healthier Lifestyle

Terra · V1

HeadlinesBarlow Condensed

Build a Healthier Lifestyle

Body and interfaceManrope

Build a Healthier Lifestyle

Highlight word and pull quotesCormorant Garamond

Build a Healthier Lifestyle

Terra · V2

Section headings, highlight word, pull quotesDM Serif Display

Build a Healthier Lifestyle

Page headline, body and interfaceInter

Build a Healthier Lifestyle