Colour
The palette is built like a marine chart: mostly paper and ink, with one signal colour used sparingly. from Insight: signature approach · Positioning: polished isn't the point
Light set (default)
#F4F6F3#10313A#D7E6EA#336A80#4E6267#8A9A9D#F2C230#2F7A55#B5402EDark set
The dark set uses the same palette at night. Deep Sounding becomes the background, and four colours get lighter versions so they still read on it. Signal Yellow stays the same.
Deep Sounding
Background#10313A
Deep Panel
Panels#183F49
Chart Paper
Main text#F4F6F3
Haze
Muted text#A6B8BC
Contour Light
Links, data#86BBCF
Isobar Dark
Rules#55737A
Signal Yellow
Accent, focus#F2C230
Slack Green Light
Status#6FC59A
Gale Red Light
Status#F08A73
Contrast (worked from the hex values)
Ratios use the WCAG 2.x relative luminance formula. Body text needs 4.5:1. Large text (24px+, or 19px+ bold) and interface marks need 3:1.
| Sample | Text on background | Ratio | Body 4.5 | Large / UI 3.0 |
|---|---|---|---|---|
| Aa | Deep Sounding on Chart Paper | 12.69 | PASS | PASS |
| Aa | Deep Sounding on Shallows | 10.77 | PASS | PASS |
| Aa | Deep Sounding on Signal Yellow | 8.23 | PASS | PASS |
| Aa | Fathom on Chart Paper | 5.91 | PASS | PASS |
| Aa | Contour on Chart Paper | 5.50 | PASS | PASS |
| Aa | Chart Paper on Contour | 5.50 | PASS | PASS |
| Aa | Gale Red on Chart Paper | 5.17 | PASS | PASS |
| Aa | Fathom on Shallows | 5.02 | PASS | PASS |
| Aa | Slack Green on Chart Paper | 4.79 | PASS | PASS |
| Aa | Contour on Shallows | 4.67 | PASS | PASS |
| Aa | Gale Red on Shallows | 4.39 | FAIL | PASS |
| Aa | Slack Green on Shallows | 4.06 | FAIL | PASS |
| Aa | Isobar on Chart Paper | 2.69 | FAIL | FAIL |
| Aa | Signal Yellow on Chart Paper | 1.54 | FAIL | FAIL |
| Aa | Signal Yellow on Shallows | 1.31 | FAIL | FAIL |
| Dark sample | Text on background | Ratio | Body 4.5 | Large / UI 3.0 |
|---|---|---|---|---|
| Aa | Chart Paper on Deep Sounding | 12.69 | PASS | PASS |
| Aa | Chart Paper on Deep Panel | 10.47 | PASS | PASS |
| Aa | Signal Yellow on Deep Sounding | 8.23 | PASS | PASS |
| Aa | Haze on Deep Sounding | 6.70 | PASS | PASS |
| Aa | Slack Green Light on Deep Sounding | 6.65 | PASS | PASS |
| Aa | Contour Light on Deep Sounding | 6.58 | PASS | PASS |
| Aa | Gale Red Light on Deep Sounding | 5.64 | PASS | PASS |
| Aa | Haze on Deep Panel | 5.53 | PASS | PASS |
| Aa | Slack Green Light on Deep Panel | 5.49 | PASS | PASS |
| Aa | Contour Light on Deep Panel | 5.43 | PASS | PASS |
| Aa | Gale Red Light on Deep Panel | 4.65 | PASS | PASS |
| Aa | Isobar Dark on Deep Sounding | 2.71 | FAIL | FAIL |
- Signal Yellow is never text and never a mark on its own on the light set. It fails 3:1 against both light backgrounds. Use it as a fill behind Deep Sounding text (8.23), or as a detail next to Deep Sounding, like the dot in the mark. On the dark set it passes as text.
- Isobar and Isobar Dark are for decoration only. They fail 3:1, so never use them for field borders, icons or anything a reader has to see. Use Contour (5.50) for those.
- Status colours on Shallows pass only at large size. Put status text on Chart Paper, or pair the colour with a word and an icon so the colour isn't carrying the meaning alone.
- Focus rings: 3px Deep Sounding on the light set, 3px Signal Yellow on the dark set.
Typography
Three free faces from Google Fonts. The third face earns its place because Cove's facts are numbers: nights, guests, knots, price.
Archivo set condensed, at 70–75% width and weight 800. It's sturdy and plain, like the type on a chart or a forecast board. It's confident without any flourish. Headlines only. from Voice: calm, doesn't show off · Positioning: polished isn't the point
It's a plain, neutral sans built for public information. It reads like a straight answer, not a brochure, and it stays legible on small phone screens. from Voice: plain talk · Dream Client: bails on brochures
JetBrains Mono, for labels, data strips and anything you'd read off an instrument: 2–7 NIGHTS, MAX 8, MAR–NOV. Keep it short, in caps, and never for sentences. from Insight: signature approach · Voice: price, just say the number
Type scale and hierarchy
There are eight levels, set for screens first. Under 600px wide, Hero drops to 44px and Headline to 30px.
One per page. The opening line.
We go where it's good.
Opens each section. Sentence case.
Watermen first, not waiters.
Groups within a section.
What's included
The first paragraph under a hero or headline.
There's no fixed itinerary. We plan every day around the conditions.
Running text, kept to about 65 characters a line.
They read the weather, move the boat, and get your kids up on the efoil and the wing foil.
Captions, footnotes, fine print.
Only premium alcohol is extra.
Eyebrows, data, tags.
2–7 nights · Max 8 guests · Mar–Nov
One line pulled out of the text. Brand lines only, never made-up reviews.
A mate with a very nice boat.
One page in this hierarchy
The yellow numbers show the reading order. The eye goes label, hero, lead, then the data strip, before the body text.
The week · East coast, March to November
We go where it's good.
There's no fixed itinerary. We plan every day around the conditions.
Skipper, deckhand, food and all the toys are in.
Watermen first, not waiters.
They read the weather, move the boat, and get your kids up on the efoil and the wing foil.
What's included
Efoil, wing foil gear, a zero jet tender with a sailing rig, freediving gear, paddleboards and kayaks.
Only premium alcohol is extra.
A mate with a very nice boat.
Brand marks
There's no existing logo, so this section has a wordmark and three symbol concepts. Concept B, the contour bay, is the one chosen to develop. Until the name is settled, use the wordmark alone, because The Business says the name isn't final.
Wordmark
Set in Archivo at 70% width, weight 800, caps, letter-spacing +0.04em. The extra spacing keeps the condensed letters from crowding at small sizes.
Clear space x = the cap height of the wordmark, on all four sides.
Minimum size 72px wide on screen, 18mm wide in print.
Colour versions
Don't: stretch it, outline it, add a gradient or drop shadow, set it in yellow on a light ground, or put it over a busy photo without a solid panel behind it.
Symbol concepts
Concepts only · need a designer's finishing and a trademark check before use
Shape, space and depth
The surfaces are flat and square, with hairline rules, like a printed chart. There are no shadows and nothing glossy. from Values: No status bullshit · Positioning: polished isn't the point
Spacing scale (4px base)
Use 4–12 inside components, 16–32 between elements, and 48–96 between sections.
Corner radii
0 Default for cards, panels, images and slides.
2px Buttons and form fields only.
Round Status dots and the station circle only.
Borders and depth
Hairline rule. 1px Isobar. Divides sections. Decoration only.
Data rule. 1px dashed Isobar, between rows of data. It echoes chart contours.
Interactive edge. 1px Contour for fields and outline buttons. It passes 3:1.
Depth. No shadows. Raise something by putting it on a Shallows panel or by switching to Deep Sounding.
Imagery and icons
Photos should look like someone on board took them. Icons should look like chart symbols.
Look for
- Kids mid-fall off the foil, and getting back upfrom Brand Anthem
- Shot from deck or water height, with people doing things, not posingfrom Dream Client: day in the life
- Real kit in use, wet and specific: the efoil, the wing, the tenderfrom Message and Promise: Real kit
- Crew working in their own clothes, hands on lines and gearfrom Values: No status bullshit
- All kinds of weather and light, including flat grey mornings. True colour, lightly graded.from Insight: signature approach
- Underwater moments: masks, reef, a manta passing underfrom Purpose: proof points
Avoid
- Crew in whites, silver trays, champagne on the bowfrom Positioning · Brand Anthem
- Posed family dinners lit like a resort adfrom Dream Client: luxury feels staged
- Drone shots of an empty boat on turquoise watercategory stock look
- Sunset silhouettes and heavy teal-and-orange gradingcategory stock look
- Anyone on a phone or tabletfrom Purpose
- Stock "luxury lifestyle" modelsfrom Voice: not a superyacht website
Icon style
Drawn on a 24px grid as 2px line icons, with square caps and sharp corners. No fills, except a status dot. Colour them Deep Sounding or Contour, never Isobar. They're built like chart symbols. from Insight: signature approach
In use
Four small mock-ups showing the system together. Sample text is short lines from the profile; anything the profile doesn't give is in brackets.
Social post · 1080 × 1080, dark set
We go where it's good.
There's no fixed itinerary. We plan every day around the conditions.
Talk to a real personWebsite hero · desktop, light set
Business card · 85 × 55mm, front and back. The front shows the contour-bay concept as a placeholder until the designer's version is ready.
Presentation slide · 16:9, light set
Spec card
A plain-text summary to paste into the deck and website prompts as the design system.
COVE DESIGN SYSTEM · Direction: Forecast Name status: working name, not final. Use the wordmark only; symbols are unfinished concepts. COLOUR · light set (default) Chart Paper #F4F6F3 background ~55% Deep Sounding #10313A text, dark sections ~22% Shallows #D7E6EA panels, data blocks ~10% Contour #336A80 links, data, borders ~4% Fathom #4E6267 muted text ~3% Isobar #8A9A9D decorative rules only ~2% Signal Yellow #F2C230 accent/CTA fill ~3% (max 5%) Slack Green #2F7A55 status: good status only Gale Red #B5402E status: alert/weather status only COLOUR · dark set Background #10313A · Panel #183F49 · Text #F4F6F3 · Muted #A6B8BC Contour Light #86BBCF · Isobar Dark #55737A · Signal #F2C230 Green Light #6FC59A · Red Light #F08A73 CONTRAST RULES Signal Yellow: never text on light backgrounds (1.54:1); use as fill behind Deep Sounding text (8.23:1). OK as text on dark set (8.23:1). Isobar / Isobar Dark: decoration only (2.69 / 2.71:1). Green/Red on Shallows: large text only (4.06 / 4.39:1). Focus ring: 3px Deep Sounding (light), 3px Signal Yellow (dark). TYPE · all Google Fonts (fonts.google.com) Display Archivo, width 70-75%, weight 800 (variable: wdth 62-125) Text Public Sans 400 / 600 Utility JetBrains Mono 600, caps, short labels and data only SCALE (size/line-height px) Hero Archivo 70% 800 72/68 caps (44 under 600px) Headline Archivo 75% 800 40/42 sentence case (30 under 600px) Subhead Archivo 100% 700 24/30 Lead Public Sans 400 20/30 Body Public Sans 400 17/27 max ~65 characters per line Small Public Sans 400 14/21 Label JetBrains Mono 600 12/16 caps, +0.08em Quote Archivo 85% 600 28/34 brand lines only, no fake reviews SPACE · 4px base 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 RADII 0 default · 2px buttons and fields · round for status dots only BORDERS AND DEPTH 1px Isobar hairline (decorative) · 1px dashed Isobar between data rows 1px Contour for interactive edges · no shadows; depth = Shallows panel or a switch to Deep Sounding MARKS Wordmark: COVE, Archivo 70% 800, caps, +0.04em tracking Clear space = cap height on all sides · min 72px screen / 18mm print Versions: Deep on Paper · Paper on Deep · Deep on Signal · 1-colour Symbol: B, contour bay (a bay drawn as three depth contours, with a Signal Yellow dot for the boat), chosen for development. Not for public use until a designer finishes it and it passes a trademark check. It leans on the C of the working name: re-check if the name changes. Until then, use the wordmark alone. IMAGERY Deck/water-height, people doing not posing, real kit, crew in own clothes, any weather, true colour. Avoid: crew in whites, posed dinners, empty-boat drone shots, sunsets, screens, stock models. ICONS 24px grid, 2px stroke, square caps, mitre joins, no fills, Deep Sounding or Contour. LAYOUT Left-aligned, never centred by default. Mono data strip (e.g. 2-7 NIGHTS · MAX 8 GUESTS) is a signature element.