Brand guide
How Headland Yachting looks, sounds and is built. Use it when you make anything for Headland Yachting, on screen or on paper.
At a glance
- Accent Buttons, links and highlights
#0F2846 / #D7C9B8 - Page The page background
#F4EFE8 / #081627 - Card Cards and panels
#FAF7F2 / #10233D - Text Headings and body text
#0F2846 / #F4EFE8
- HeadingsDM Serif Display
- Body textDM Sans
In this guide
- LogoThe Headland Yachting logo, and how to use it so it always looks right.
- Tone of voiceHow Headland Yachting sounds, in writing and in conversation.
- ImageryThe photographs, screenshots and illustrations Headland Yachting uses.
- ColourColours in light and dark mode, and the contrast each pairing reaches.
- TypographyTypefaces, sizes and how headings and text are set.
- Spacing and shapeSpacing, corners and shadows.
- ComponentsButtons, cards, forms and more, as they look in this brand.
Downloads
- Design tokens (JSON)Every colour, font and size, light and dark. For developers, and for Figma via a tokens plugin.
- Design tokens (CSS)The same values as CSS custom properties.
- Logo (SVG)The logo as a vector file.
- App icon (PNG, 512px)For profiles and app listings.
- Icon (SVG)The browser tab icon.
- Share image (PNG, 1200 × 630)What a link to the site shows on social media.
