Calm pages, one gold button, twenty minutes a day.
The Mave Health design system, read from mavehealth.com by Kamply — colours, type and voice, learned from the public site alone.
1 · Brand essence

Mave sells a wearable headset that asks for twenty minutes a day, and the site is built to feel like that much and no more. Warm off-white pages, one gold button, headings in sentence case that break across two or three short lines, and almost no shadow anywhere. The photography is one person outdoors in afternoon light rather than a lab or a clinic. Numbers are big and bare when they appear, and the research sits on its own page instead of crowding the front door. The overall register is calm and factual.

The site already answers what Mave is. A feed has room to answer what owning it is like: the mechanism in plain words, the shape of a session, what the first four weeks ask of you, and where the claims stop. Mave's own material has the raw material for all of it, from the three steps (wear it, start the session, move on) to the phase names for the timeline. Posts built on those hold up without borrowing an outcome number, and they give a follower something to repeat to a friend.

2 · Colour system
Primary
#fffef9
Warm white
the page field
#f8f5ee
Second surface
panels and section washes
#2f2c25
Ink
nearly all type
#d2b748
Mave gold
primary button fill, under ink text
#5c7636
Accent green
small marks and hairlines, the app accent held one step down so it reads as text
#be2608
Burnt orange
in-app alert note, best kept as a non-text wash
Supporting
#55514a
Ink soft
secondary copy and captions
#928d84
Ink mute
eyebrow lines and small meta labels
#f4edd0
Butter
the tertiary panel wash on quieter sections
#4a6326
Deep olive
hover state and the deepest green mark
Background recommendations
Warm white The default ground for almost every section, held with plenty of empty field.
Deep ink The site's dark bands, the quote card, and the secondary button fill.
Mave gold One moment per layout: the primary button, a hairline seam, a small highlight.
3 · Typography
Display font
Montserrat
Headings run 32 to 48px in sentence case, one weight per block, broken mid-phrase across short lines.
Body font
Hanken Grotesk
15px running copy with long measures and generous leading, never tightened.
  • One display family and one body family: Montserrat sets headings, Hanken Grotesk sets everything you read.
  • Headlines break mid-phrase across two or three short lines rather than running the full width.
  • Sentence case everywhere, including labels, badges and buttons.
  • Eyebrows keep their job through small size, wide letter-spacing and muted ink, in sentence case.
  • Numbers run large and bare: 20 minutes a day, 25+ years, three steps.
Aa
abcdefghijklmnopqrstuvwxyz
0123456789
4 · Visual style direction
warm
off-white
Every section sits on #fffef9 cream, with #f8f5ee for the second surface and wide margins around the subject.
flat
surfaces
Buttons and inputs are 8px corners with no shadow, so the only thing that floats is a device render.
one
gold
moment
Gold shows up once per view as the primary button fill under ink text, never as type.
light
meets
dark
The cream page and the near-black app screen are meant to sit beside each other, and that jump is part of the look.
5 · Layout principles
Breathing room generous whitespace lets the product and message stand out
8px rhythm every gap sits on an 8px grid — consistent margins and alignment
Clear hierarchy strong headline, clear subhead, scannable support copy
Visual first roughly 60% visual, 40% text for stopping power in the feed
6 · Imagery & creative direction
Lean into
  • One person outdoors in late-afternoon light, headset on, camera low into open sky. Calm and unposed.
  • The studio render of the Arc on transparency, centred, no props and no hand.
  • Real screens from the companion app, dark with green accents, shown whole inside a real phone frame.
  • Plenty of empty warm field around the subject. The site breathes and the posts should too.
Steer around
  • Clinical or laboratory staging. The product reads better in a normal afternoon than in a treatment room.
  • Stock imagery of distress or headaches. The brand talks about the routine, not the symptom.
  • Drawn or approximated app screens. A real screenshot always beats a redraw, and the difference shows at thumbnail size.
7 · Social direction — three posts designed in this system
The routine in Mave's own three step names, under Mave's own outdoor photograph.
The routine in Mave's own three step names, under Mave's own outdoor photograph.
The cover of a four-slide carousel on the mechanism, a session, the phases and the limits.
The cover of a four-slide carousel on the mechanism, a session, the phases and the limits.
One session screen annotated off the real pixels, with the published limit in the footer.
One session screen annotated off the real pixels, with the published limit in the footer.
8 · Quick win ideas
1

A three-step routine post on the warm field: wear it, start the session, move on, with the outdoor photograph bleeding across the top two thirds and a gold hairline seam under it.

2

A four-slide carousel that spends one slide each on the mechanism, a real session screen, the week one to week eight phases, and the limits Mave publishes about itself.

3

A single annotated frame of the live session screen, with thin green leaders running from the readout, the countdown and the pause control out to short notes on the right.

Kamply designs posts like these every week, in this exact system. You approve, it designs.

See what Kamply makes