Everything the MakeHelm brand is made of — colour, type, the marks, the illustration set, the components and how they move. Every mark here was drawn by hand; nothing is licensed stock.
The whole brand comes from taking the name literally. MakeHelm builds small boats, puts them in real water, and either sails them or hands them to a better captain. That gives us a warm palette, hand-drawn illustration, and a tone that is plain-spoken with a light nautical touch.
The one rule that keeps it from becoming a theme park: the illustration carries the metaphor, the copy carries the meaning. Nautical words earn their place only when they are also the clearest word available — “fleet”, “ship log”, “a better captain”. If a sentence needs a decoder ring, rewrite it.
Nothing is pure black or pure white. Ink is the only outline colour and the only body-copy colour. Click a swatch to copy the hex.
--ink
Every outline, every piece of body copy, every border. Nothing on this brand is drawn in pure black.
--cream
The page. Warmer than white, which is what stops the whole thing feeling clinical.
--sky
Top of the hero gradient, and the header band on inner pages.
--sky2
Bottom of the hero gradient. Also the default deck colour on a fleet card.
--sea
Bands that carry white text, and the mid wave layer.
--sea2
The footer, and the deepest wave layer.
--sun
Primary buttons, eyebrow pills, the pennant. The colour that says “press this”.
--coral
Secondary buttons, the fore sail, the wavy underline. Use sparingly — it is the loudest thing here.
--mint
One job only: something is live.
--wood
Hulls. Illustration only — never a background, never text.
Wood is illustration-only. It exists so hulls read as wood. It is never a background and never text — there is no size at which orange type on cream is a good idea.
Every pairing actually used in the product, with its real WCAG 2.1 ratio. A cheerful palette is exactly the kind that fails quietly, so these are checked rather than assumed.
| Pairing | Where | Ratio | Grade |
|---|---|---|---|
| Ink on Cream | body copy | 12.29 | AAA |
| Ink on White | text on cards | 13.10 | AAA |
| Ink on Sky deep | hero headline | 8.80 | AAA |
| Ink on Sun | primary button label | 9.07 | AAA |
| White on Sea | copy on the blue band | 5.45 | AA |
| White on Sea deep | footer copy | 6.46 | AA |
| Ink on Coral | secondary button label | 4.68 | AA |
| Ink on Mint | LIVE pill | 6.36 | AA |
| #4a6580 on White | muted card copy | 6.06 | AA |
Building this table found four real failures and changed the palette. Sea was #2f86d6 and carried white body copy at 3.82 — below the 4.5 needed, so it darkened to #236cb1. The coral button had white text at 2.80 and now uses ink at 4.68. Footer registration text and sold-card copy were both under 4.0 and were lightened and darkened respectively. Measure before you ship, not after.
Fredoka for anything structural — headings, the wordmark, buttons, labels. Nunito for anything you read in sentences. Fredoka never sets body copy; Nunito never sets a heading.
The wheel is the logo — it sits beside the wordmark and nowhere else. The boat is the mascot: it does the favicon, the illustration and the 404. Never use both in one lockup.
Six alternate marks were explored before settling here — they are all still on the logo marks page, tested down to favicon size.
Every illustration on the site is inline SVG written by hand — no image files, no icon font, no licensed stock. Copy any of them straight into your markup.
currentColor or a CSS variable for the one part that should vary — the fleet cards recolour each sail with var(--sail).Everything is built from the same three decisions: a 3px ink border, a generous radius, and a hard offset shadow with no blur. Nothing here uses a soft shadow.
5px 5px 0 var(--ink) — offset, zero blur.A card looks like this
3px ink border, 22px radius, 6px 6px 0 shadow, white fill. Fleet cards add a coloured “deck” band with a waterline, and tilt a degree either way so they look moored rather than aligned.
Every change of background is a wave, never a straight edge. Layer two or three at different heights and speeds for depth.
<div class="waves">
<svg class="w-back" viewBox="0 0 2400 76" preserveAspectRatio="none">…</svg>
<svg class="w-mid" viewBox="0 0 2400 76" preserveAspectRatio="none">…</svg>
<svg class="w-front" viewBox="0 0 2400 76" preserveAspectRatio="none">…</svg>
</div>
/* the viewBox holds two identical cycles, so a -50% slide loops seamlessly */
.waves svg{position:absolute;bottom:0;left:0;width:200%;height:100%}
.w-back{animation:roll 14s linear infinite}
.w-mid {animation:roll 10s linear infinite reverse}
Everything drifts. Nothing demands attention. If a visitor notices an animation running, it is too fast.
Every one of these is switched off under prefers-reduced-motion. That is not optional — a page with six looping animations is genuinely unpleasant for people who are sensitive to motion.
@media(prefers-reduced-motion:reduce){
.sun .rays,.cloud,.gulls,.boat,.foot-boat,.waves svg,
.logo .wheel svg,.vessel,.deck-water{animation:none!important}
}
Short sentences. Real numbers instead of adjectives. Say the awkward part out loud rather than working around it.
“Concept to deployed product in weeks.” Specific and checkable.
“You own the code. No lock-in, no ongoing fees.” Answers the real worry.
“Some we keep. Some we hand to a better captain.” Nautical, but also just true.
“Four domains migrated. Hosting bill went to zero.” Numbers do the bragging.
“Leveraging synergies to deliver best-in-class solutions.” Means nothing.
“Let’s batten down the hatches and chart a course to port!” Theme park.
“Trusted by industry leaders.” Not if you cannot name them.
“We’re passionate about innovation.” Everyone says this. Say what you did instead.
The constraint is the design system as much as the colours are. Every page on makehelm.com is a single self-contained HTML file.
node_modules. Nothing to upgrade.:root custom properties. Change the palette in one place.This is a deliberate position, not laziness. A brochure site that needs a toolchain to change a sentence is a brochure site that stops getting changed.