Deep Harbor
#13426fFeature card fills, testimonial card fills, heading text — the dominant dark surface that anchors content blocks against the cream
Relief
relief.appWebsite preview
The design language
Relief uses a warm nautical-sky language: a cream canvas (#f9f7f0) replaces the default stark white, and a single vivid sky blue (#2e96ff) carries every interactive moment. Information architecture flips the usual light-card-on-white pattern — deep navy (#134f26f) feature and testimonial cards sit on cream like buoys on sand, creating bold visual blocks. The headline font Gilroy runs at tight -0.018em tracking across every size, giving text a compact, rounded confidence. Buttons earn their weight not from gradients or glow, but from a chunky 7px solid blue drop-shadow that makes the sky-blue fill appear to physically lift off the page.
Color palette
brand
Sky Pop
#2e96ffPrimary action buttons, active states, key emphasis text — the single chromatic accent that drives every interaction
Deep Wave
#0254a5Outlined link and action border — a darker navy for ghost-style interactive elements that need to read on cream
accent
Sky Tint
#bde1f9Badge and trust-pill backgrounds, soft highlight washes behind icons and social proof
Sky Wash
#cde7fbButton shadow tone — the same hue family used for the chunky pop shadow under sky-blue buttons
Info Mist
#73b9ffBlue decorative accent for icons, marks, and small graphic details
Sky Mid
#50a7ffDecorative illustration fills, mid-tone in 3D hero artwork
neutral
Warm Cream
#f9f7f0Page canvas — the entire site rests on this off-white, never pure #ffffff. Removes clinical SaaS sterility; reads as approachable, paper-like
Snow
#ffffffElevated card surfaces, input fields, and light-bordered elements
Ink
#333333Primary body and UI text — the dominant neutral for readable copy across cards, paragraphs, and labels
Charcoal
#212121Heavier text instances, emphasis copy
Fog
#d0d5ddHairline borders and dividers between sections and cards
Slate
#616c8aMuted secondary text, body copy in lighter contexts, de-emphasized metadata
Slate Border
#40444eStronger borders and link outlines where extra weight is needed
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
58px · 800 · 1.1 · -1.04px trackingThe quick brown fox jumps
text-53
53px · 800 · 1The quick brown fox jumps
text-49
49px · 800 · 1.2The quick brown fox jumps
heading-lg
40px · 800 · 1.2 · -0.72px trackingThe quick brown fox jumps
heading
32px · 400 · 1.29 · -0.58px trackingThe quick brown fox jumps
heading-sm
20px · 700 · 1.4 · -0.36px trackingThe quick brown fox jumps
subheading
18px · 700 · 1.5 · -0.32px trackingThe quick brown fox jumps
body
16px · 400 · 1.6 · -0.29px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Gilroy
- Weights
- 400, 500, 600, 700, 800
- Sizes
- 12, 14, 16, 18, 20, 32, 40, 49, 53, 58
- Line height
- 0.94 (display), 1.10–1.29 (headings), 1.40–1.70 (body)
- Letter spacing
- -0.018em across all sizes — uniform tight tracking gives Gilroy a compact, deliberate feel regardless of scale
- Fallback
- Montserrat, Nunito, Manrope
- Features
- "ss01" on (where available)
Single-family type system — Gilroy runs at every size from 12px captions to 58px hero headlines. Rounded geometric forms give the brand its friendly financial tone without the stiffness of a grotesque. Weight 700 is the working default for headings and buttons; weight 500 carries UI labels.
Spacing & shape
Spacing
- Density
- spacious
- Max width
- 1200px
- Section gap
- 56-80px
- Card padding
- 28px
- Element gap
- 14px
Border radius
hero
49pxcards
18-30pxbadges
40-100px (pill)buttons
40-70px (pill)Spacing scale
7px8px10px11px14px16px18px20px21px24px28px30px34px40px48px56px70px72pxGuidelines
Do
- Use #f9f7f0 cream as the page canvas — never pure white for the body background. Cream is the signature of the brand's approachable tone.
- Apply the 7px solid sky-blue pop shadow to every primary CTA: rgba(154,207,246,0.5) 0px 7px 0px 0px. Never use a CSS blur for button elevation.
- Use 40-70px pill radius on all buttons and badges. No squared corners on interactive elements.
- Place dark navy (#13426f) content cards directly on the cream canvas. The navy/cream contrast is the primary visual block pattern — skip white-card-on-cream.
- Set letter-spacing to -0.018em on every Gilroy size. The tight tracking is uniform from 12px captions to 58px displays.
- Use sky-blue (#2e96ff) as the sole chromatic accent. Reserve it for CTAs, active states, and the key word in stat headlines — never for large background fills or decorative shapes beyond the hero scene.
- Pad feature and testimonial cards to 28px and give them 18-26px radius. Pair with 14-18px heading-to-body gap.
Don’t
- Don't use a soft blurred drop-shadow anywhere — the system uses flat solid offset shadows only, or none at all.
- Don't introduce new brand colors outside the sky-blue / deep-navy / cream / ink palette. Greens, pinks, purples are illustration-only.
- Don't use 0-8px radius on buttons or cards. The system is consistently soft and rounded — sharp corners break the toy-like feel.
- Don't put dark navy text on the cream canvas for body copy. Use #333333 for body, reserve #13426f for headings and card surfaces.
- Don't render body backgrounds as #ffffff. The cream #f9f7f0 is the canvas; #ffffff is only for elevated card surfaces floating above it.
- Don't use 600+ weights for Gilroy captions and body-sm text. Body copy stays at 400-500; 700+ is for headings, buttons, and emphasis only.
- Don't add secondary or tertiary buttons that aren't a pill. Square or slightly-rounded buttons read as a different system.
Components
Primary CTA Button
Main conversion action — appears in hero, feature sections, and sticky headerFill #2e96ff, text #ffffff, Gilroy 700, 16px. Padding 14px 28px. Border-radius 40-70px (pill). Signature shadow rgba(154,207,246,0.5) 0px 7px 0px 0px — a flat solid blue offset 7px below the button, not a soft blur, making the button appear physically raised off the cream canvas.
Header CTA Button
Persistent action in the top-right of every screenSame as Primary CTA Button but slightly more compact — padding 10-14px 28px, radius 40px. Always sky-blue with white text and the same 7px sky-blue pop shadow.
Ghost Outline Button
Secondary action where the primary is also presentTransparent fill or #ffffff, border 1-2px #ffffff or #d0d5dd, text #ffffff or #333333 depending on surface. Radius 40px (pill). Padding 10-14px 28px. No shadow.
Feature Card
Three-up grid card explaining a product step (Download, Link, Find savings)Fill #13426f (deep navy), text #ffffff. Padding 28px. Border-radius 18-26px. Subtle shadow rgba(0,0,0,0.05) 0px 3px 0px 0px. Contains a heading in Gilroy 700 20-32px and a 3D nautical illustration. Sits directly on the cream canvas — no border needed because the navy/cream contrast is already strong.
Testimonial Card
User review in horizontal scroll rowFill #13426f, text #ffffff. Padding 28px. Border-radius 18-30px. Five yellow star glyphs at top, review title in Gilroy 700 ~18px, body copy in Gilroy 400 14-16px, author name at bottom. No shadow. Width is variable to create the marquee feel.
Trust Badge Pill
Social-proof chip above the hero headline (e.g. 'Trusted by 160,000+ people')Fill #bde1f9 (sky tint), text #13426f or #333333. Padding 8-11px vertical, 20-21px horizontal. Border-radius 40-100px (full pill). Gilroy 600-700, 12-14px. Often contains small avatar dots and a label.
Hero Phone Mockup
Product visualization floating in the center of the heroWhite phone frame, ~280-320px wide, border-radius 26-30px on frame. Screen fill #ffffff. Inside: dark heading text, a large sky-blue savings number (~$5,550 in Gilroy 700 32-40px), a small sublabel, and a 3D illustration of coins and a piggy bank in a life preserver. Sits on a light-blue sky background with floating clouds and a sailboat.
Press Logo Bar
Row of media-outlet logos under the savings headlineFour to five monochrome wordmarks in #333333 or #13426f, horizontally centered, 24-32px tall, even column gaps. No logos, no dividers — just spacing rhythm on the cream band.
Stat Headline Band
Full-width cream section highlighting a key number (e.g. 'Over $6 billion in savings found')Fill #f9f7f0 (or slightly warmer cream). Centered text: the number or key word rendered in #2e96ff sky blue, the rest in #13426f deep navy. Gilroy 700 at 40-49px. Padding 56-80px vertical.
Section Divider
Visual break between content blocksOften a full-bleed light-blue sky band (#dfe5eb or similar) carrying illustrations, then back to cream. Functions as a scene change rather than a line — no thin divider rules are used.
FAQ Accordion Item
Expandable question/answer at the bottom of long pagesBorder-bottom 1px #d0d5dd between items. Question in Gilroy 600 18-20px #13426f, answer in Gilroy 400 16px #333333. No card chrome — sits directly on the cream canvas with just the hairline rule.
App Store Pill
Download link to the App StoreFill #2e96ff, text #ffffff, border-radius 40-70px (pill). Padding 14px 28px. Gilroy 700 14-16px. Same sky-blue pop-shadow treatment as the primary CTA.
Surfaces & elevation
Level 1
Warm Cream
#f9f7f0Page canvas — the base layer every section sits on
Level 2
Snow
#ffffffElevated cards and input fields floating above cream
Level 3
Deep Harbor
#13426fDark content blocks — feature cards, testimonial cards, dark hero panels
Level 4
Sky Pop
#2e96ffInteractive accent — CTA buttons, active indicators
Level 5
Sky Tint
#bde1f9Highlight washes — badge backgrounds, soft icon halos
Primary CTA Button
rgba(154, 207, 246, 0.5) 0px 7px 0px 0px — flat solid offset, not a soft blur
Secondary Pop Button
rgba(154, 207, 246, 0.5) 0px 5px 0px 0px
Feature Card
rgba(0, 0, 0, 0.05) 0px 3px 0px 0px — barely-there flat offset
Layout & imagery
Layout
Full-bleed bands that alternate between warm cream (#f9f7f0) and a light sky-blue (#dfe5eb). Hero is a centered stack on sky-blue: trust badge, 58px headline, 18px subtext, 40px CTA, then a phone mockup floating over water with a sailboat illustration at the left edge. Feature grid is a 3-column row of dark navy cards on cream. Testimonials are a horizontal scroll/marquee of navy cards. Sections are separated by generous 56-80px vertical gaps, not hairlines — the color change is the divider. Max content width ~1200px centered. Navigation is minimal: logo left, single pill button right, no menu links visible in the hero flow. Below-the-fold sections keep the centered, single-column rhythm rather than complex multi-column layouts.
Imagery
The site is entirely illustration-driven — no photography. 3D isometric renders in a soft, slightly claymation style: a blue sailboat, a pink piggy bank in a red life preserver, a gold coin, a navy anchor with chains, an orange life buoy. Color treatment is bright but not neon — the palette stays within the sky-blue, navy, warm cream, and gold range so illustrations feel part of the system, not imported. The hero composes these as a floating scene: phone mockup centered, illustrations orbiting around it on a sky-blue background with white cloud puffs. Icons throughout are filled, not outlined, in solid navy or sky-blue. The illustrations are decorative atmosphere and product showcase — they do not explain content, they set emotional tone (escape, freedom, rescue).
Design notes
Agent Guide
Quick Color Reference - text: #333333 - background: #f9f7f0 (cream canvas) - card surface: #ffffff or #13426f (dark navy blocks) - border: #d0d5dd (hairline) or #40444e (strong) - accent: #2e96ff (sky blue — only chromatic accent) - primary action: #2e96ff (filled action) Example Component Prompts 1. Sky-blue primary CTA button: Fill #2e96ff, white text in Gilroy 700 16px, padding 14px 28px, border-radius 40px, box-shadow rgba(154,207,246,0.5) 0px 7px 0px 0px. The shadow must be a flat solid offset, never a blur — this is the site's signature depth. 2. Dark navy feature card: Fill #13426f on cream (#f9f7f0) canvas. Padding 28px. Border-radius 18px. White heading in Gilroy 700 20-32px. A 3D illustration (coins, anchor, life preserver) fills the lower half. No border; rely on the navy/cream contrast. 3. Trust badge pill: Fill #bde1f9, text #13426f in Gilroy 600 14px, padding 8px 20px, border-radius 40px. Often prefixed with 2-3 circular avatar dots in a row. 4. Stat headline band: Full-width cream (#f9f7f0) section, vertically padded 64px. Centered text in Gilroy 700 40px, where the number or key word is #2e96ff and the rest is #13426f. 5. Sky-blue hero section: Background a flat light blue (#dfe5eb or #cde7fb range), white cloud illustrations scattered, centered phone mockup ~300px wide with border-radius 26px, white screen showing a sky-blue dollar savings number. No drop shadows on the sky band — keep the atmosphere weightless.
Signature Pattern — The Pop Shadow
Relief's most distinctive detail is its button shadow: instead of a soft blurred drop-shadow, buttons cast a solid 7px offset block in rgba(154,207,246,0.5) — a translucent sky-blue duplicate of the button shape itself. This makes the sky-blue button appear to physically hover above the cream canvas, like a sticker peeled at the edge. It is applied consistently to primary CTAs and App Store links, never to cards or inputs. When generating any new interactive surface, default to this flat-offset shadow over any CSS blur; the system rejects soft elevation in favor of chunky, toy-like depth.
Palette Discipline
The site is aggressively disciplined: one chromatic accent (#2e96ff sky blue), one dark anchor (#13426f deep navy), and the rest is warm neutrals (cream, snow, ink, fog). No gradients, no secondary brights, no hover-color variants. If a new design needs a state or category color, derive it from the existing palette — light sky tint #bde1f9 for highlights, deep navy #13426f for emphasis, charcoal #212121 for strongest text. Do not introduce new hues.
Similar brands
Albert (albert.com)
Same warm cream canvas with a single bold accent color and rounded geometric type — financial product that feels friendly rather than corporate.
Cleo (web.meetcleo.com)
Playful illustrated 3D style, cream/neutral background, bold pill-shaped CTAs, and a single bright accent driving all interaction moments.
Acorns
Soft rounded forms, pill buttons with chunky solid offset shadows, and a single green accent against neutral surfaces — same toy-like elevation language.
Chime
Clean light theme with a vivid single-accent blue, large rounded type, and pill-shaped primary actions over a soft off-white canvas.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
