Colour · Brand guide | Headland Yachting

Main colours

#0F2846 #D7C9B8 Accent Buttons, links, focus and highlights. Use it sparingly, so it keeps pointing at what matters.
#FFFFFF #081627 On accent Text and icons on the accent colour.
#F4EFE8 #081627 Page The background of every page.
#FAF7F2 #10233D Card Cards, panels and form fields, one step up from the page.
#0F2846 #F4EFE8 Text Headings and body text.
#4A586B #A9B5C4 Secondary text Captions, dates and supporting text.
rgba(15,40,70,0.12) rgba(244,239,232,0.14) Border Lines between things, and the edges of cards.
#0F2846 #D7C9B8 Focus The outline that shows where the keyboard is.

Each swatch shows light mode on the left and dark mode on the right. In code, always use the token (the name under each swatch), never the hex value, so a colour change in the brand reaches everything.

Contrast

WCAG AA asks for at least 4.5:1 for text and 3:1 for focus outlines and large shapes. The site won't build if any of these pairs falls short.

Where	Light	Dark	Needs
Body text on the page	Aa 12.9:1	Aa 15.9:1	4.5:1
Body text on cards	Aa 13.9:1	Aa 13.8:1	4.5:1
Secondary text on the page	Aa 6.3:1	Aa 8.7:1	4.5:1
Secondary text on cards	Aa 6.7:1	Aa 7.5:1	4.5:1
Links and accent text on the page	Aa 12.9:1	Aa 11.2:1	4.5:1
Links on cards	Aa 13.9:1	Aa 9.7:1	4.5:1
Button label on button	Aa 14.8:1	Aa 11.2:1	4.5:1
Field error on a form	Aa 4.9:1	Aa 6.0:1	4.5:1
Error message box	Aa 13.4:1	Aa 13.4:1	4.5:1
Success message box	Aa 11.2:1	Aa 11.2:1	4.5:1
Text in a callout	Aa 11.4:1	Aa 11.4:1	4.5:1
Button label in a callout	Aa 14.8:1	Aa 14.8:1	4.5:1
Button in a callout against the callout	Aa 11.4:1	Aa 11.4:1	3:1
Focus ring against the page	Aa 12.9:1	Aa 11.2:1	3:1
Icon on the chat button	Aa 14.8:1	Aa 11.2:1	3:1

All colour tokens

Light	Dark	Use
`#F4EFE8`color.headland.stone-100	`#081627`color.headland.navy-950
`#FAF7F2`color.headland.stone-50	`#10233D`color.headland.navy-850
`#EAE1D5`color.headland.sand-200	`#EAE1D5`color.headland.sand-200	Fixed: stays light in both themes
`#FFFFFF`color.white	`#FFFFFF`color.white	A raised surface inside a callout (secondary buttons, mockups)
`#FFFFFF`color.white	`#FFFFFF`color.white	Tile behind a client or partner logo: white in light mode; in dark mode the raised navy used by stat tiles
`#0F2846`color.headland.navy-900	`#F4EFE8`color.headland.stone-100
`#4A586B`color.headland.slate-600	`#A9B5C4`color.headland.slate-300
`#0F2846`color.headland.navy-900	`#0F2846`color.headland.navy-900
`#FFFFFF`color.white	`#FFFFFF`color.white
`#152238`color.ink.900	`#F3F0E9`color.cream.100	Logo text on a logo tile (dark in both themes)
`#0F2846`color.headland.navy-900	`#D7C9B8`color.headland.sand-300
`#FFFFFF`color.white	`#081627`color.headland.navy-950
`#FFFFFF`color.white	`#FFFFFF`color.white	Label on a button inside a callout
`#1B3A60`color.headland.navy-800	`#F4EFE8`color.headland.stone-100	Primary button background on hover. Same as the action colour unless a brand sets its own (Gulo: Claw Gold on dark)
`rgba(15,40,70,0.12)`color.headland-alpha.navy-12	`rgba(244,239,232,0.14)`color.headland-alpha.stone-14
`#0F2846`color.headland.navy-900	`#0F2846`color.headland.navy-900
`rgba(15,40,70,0.36)`color.headland-alpha.navy-36	`rgba(244,239,232,0.30)`color.headland-alpha.stone-30	Edge of text fields, drop-down lists, date fields and the search box. Brands can make it firmer than the card border so a field reads at its full height beside a solid button.
`rgba(21,34,56,0.12)`color.alpha.ink-12	`rgba(255,255,255,0.10)`color.alpha.white-10	Edge of a logo tile
`rgba(21,34,56,0.12)`color.alpha.ink-12	`rgba(21,34,56,0.12)`color.alpha.ink-12	Hairline drawn inside a colour swatch (brand guide, docs), so a swatch the same colour as the page keeps its shape. Dark and see-through in both modes, so it never shows as a light outline round a dark colour.
`#C13D0A`color.ember.600	`#FF7A3D`color.ember.400	Theme-aware; at least 4.5:1 on page and raised surfaces
`#FFF4E5`color.amber.50	`#3A2400`color.amber.950
`#C13D0A`color.ember.600	`#FF7A3D`color.ember.400
`#3A2400`color.amber.950	`#FFF4E5`color.amber.50
`#EAF6EC`color.green.50	`#1A3A24`color.green.900
`#2E7D46`color.green.600	`#2E7D46`color.green.600
`#1A3A24`color.green.900	`#EAF6EC`color.green.50
`#FFF4E5`color.amber.50	`#3A2400`color.amber.950
`#B4812A`color.amber.600	`#B4812A`color.amber.600
`#3A2400`color.amber.950	`#FCE7C2`color.amber.100	Text and icon in a warning notice
`#EAF2FC`color.blue.50	`#0C2240`color.blue.950
`#2F6BB3`color.blue.600	`#2F6BB3`color.blue.600
`#12305A`color.blue.900	`#EAF2FC`color.blue.50	Text and icon in an information notice
`#1B7A3D`color.green.700	`#1B7A3D`color.green.700
`#B4812A`color.amber.600	`#B4812A`color.amber.600
`#C13D0A`color.ember.600	`#C13D0A`color.ember.600
`rgba(11,18,32,0.38)`color.alpha.scrim-38	`rgba(11,18,32,0.38)`color.alpha.scrim-38
`rgba(11,18,32,0.72)`color.alpha.scrim-72	`rgba(11,18,32,0.72)`color.alpha.scrim-72
`rgba(11,18,32,0.88)`color.alpha.scrim-88	`rgba(11,18,32,0.88)`color.alpha.scrim-88
`#081627`color.headland.navy-950	`#F4EFE8`color.headland.stone-100
`#10233D`color.headland.navy-850	`#FAF7F2`color.headland.stone-50
`#F4EFE8`color.headland.stone-100	`#0F2846`color.headland.navy-900
`#A9B5C4`color.headland.slate-300	`#4A586B`color.headland.slate-600
`rgba(244,239,232,0.14)`color.headland-alpha.stone-14	`rgba(15,40,70,0.12)`color.headland-alpha.navy-12
`#D7C9B8`color.headland.sand-300	`#0F2846`color.headland.navy-900
`#081627`color.headland.navy-950	`#FFFFFF`color.white	Text on the inverse accent (buttons and selected states on an inverse panel)
`#0F2846`color.headland.navy-900	`#D7C9B8`color.headland.sand-300
`#FAF7F2`color.surface.raised	`#10233D`color.surface.raised	Code blocks and inline code sit on the raised surface, so they take on each brand like tables and cards
`#0F2846`color.text.primary	`#F4EFE8`color.text.primary
`#566074`color.syntax.slate-light	`#9AA6BA`color.syntax.slate-dark
`#A8310A`color.syntax.ember-light	`#FF8F5C`color.syntax.ember-dark
`#0B6B52`color.syntax.jade-light	`#7FD6B0`color.syntax.jade-dark
`#1E4FA8`color.syntax.cobalt-light	`#8DB4FF`color.syntax.cobalt-dark
`#7A4300`color.syntax.ochre-light	`#F2C46D`color.syntax.ochre-dark
`#4B5567`color.ink.600	`#B9C2D0`color.ink.300
`rgba(15,40,70,0.12)`color.border.subtle	`rgba(244,239,232,0.14)`color.border.subtle
`#FFFFFF`color.white	`#FFFFFF`color.white	The sheet, and any surface that would otherwise be tinted
`#0F2846`color.text.primary	`#F4EFE8`color.text.primary	Running text and headings on paper
`#4A586B`color.text.secondary	`#A9B5C4`color.text.secondary	Captions, labels and the source line
`#0F2846`color.action.primary	`#D7C9B8`color.action.primary	Links and accent marks on paper
`#A3A3A3`color.neutral.400	`#A3A3A3`color.neutral.400	Box outlines and dividers on paper: firmer than the screen border so they survive printing. Brands set their own.
`#F3F0E9`color.cream.100	`#131C2E`color.ink.850	Background of an illustration
`rgba(21,34,56,0.06)`color.alpha.ink-06	`rgba(255,255,255,0.10)`color.alpha.white-10	Construction grid lines
`#152238`color.ink.900	`#F3F0E9`color.cream.100	Main shapes
`#B23508`color.ember.700	`#FF7A3D`color.ember.400	Accent shapes
`#3F4A5C`color.ink.500	`#B9C2D0`color.ink.300	Secondary shapes
`#B9C2D0`color.ink.300	`#3F4A5C`color.ink.500	Quiet shapes
`rgba(15,40,70,0.06)`color.headland-alpha.navy-06	`rgba(244,239,232,0.08)`color.headland-alpha.stone-08
`rgba(15,40,70,0.28)`color.headland-alpha.navy-28	`rgba(244,239,232,0.30)`color.headland-alpha.stone-30
`#0F2846`color.text.primary	`#F4EFE8`color.text.primary
`#B4812A`color.amber.600	`#B4812A`color.amber.600	Filled star in a review score (a graphic beside its words, 3:1 on cards)
`#0F2846`color.action.primary	`#D7C9B8`color.action.primary	Icons and small graphics beside words (facts, chips, menus). A brand can give them their own colour (3:1 on cards)
`#0F2846`color.headland.navy-900	`#D7C9B8`color.headland.sand-300	The round button
`#FFFFFF`color.white	`#081627`color.headland.navy-950	The speech bubble on the button
`#FFFFFF`color.white	`#FFFFFF`color.white	Ring round the "online now" dot, so it stands off the button