Midnight Navy
#1a365dHero gradient base, dark data cards, icon strokes — the cool nocturnal counterpoint to the warm cream canvas, signals science and trust at the deepest end of the palette
Sandland Sleep
sandlandsleep.comWebsite preview
The design language
Sandland Sleep uses a warm cream canvas as its foundation, creating a soft, restful atmosphere that reads like a linen-wrapped pharmacy rather than a cold e-commerce site. Deep navy (#1a365d) provides the nighttime counterpart — anchoring the hero gradient and dark data cards as moments of cool, clinical authority that contrast the otherwise warm palette. A single vivid yellow (#fae467) serves as the sole chromatic punctuation for primary actions, badges, and data highlights, making every CTA feel switched on against the muted surroundings. Typography stays restrained and even, with a custom sans (Sandland-550) at moderate weights and tight tracking on display sizes, letting generous spacing and soft 10-20px radii carry the calm. Components are pill-shaped and rounded, shadows are whisper-soft (0.1 opacity), and the overall feel is a sleep journal: warm paper, navy ink, one highlighter.
Color palette
brand
Sunlit Yellow
#fae467Primary CTA fill, bestseller badges, data-highlight accents — the only vivid chromatic in the system, warm and optimistic like morning light, used sparingly so every action glows
neutral
Linen Cream
#f2ede8Page canvas, default section background — the dominant warm neutral that sets the entire sleep-warmth tone of the site
Paper White
#ffffffCard surfaces, product photography backgrounds, nav backgrounds — pure white creates lift against the cream canvas
Soft Vellum
#faf8f6Secondary card surfaces, subtle elevation layer — warmer than pure white, used when cards need to nest within cream sections without disappearing
Graphite
#3d3d3dBody text, subtle border accents — softer than pure black for extended reading
Smoke
#666666Secondary text, list borders, muted link underlines — the mid-gray that carries all supporting copy
Slate
#726f6dInput borders, disabled button text and borders — the warm-leaning gray for form and inactive states
Charcoal
#191923Deep surface fill for dark accent cards, alternative button backgrounds — nearly black with a slight cool cast, sits between midnight navy and true black
Frost
#e6e6e6Hairline dividers, image borders, section separators — neutral-cool gray for structural lines
Ink Black
#000000Primary text, dominant heading color, primary borders — the typographic anchor across all surfaces
Typography
Type scale
Minor Third (1.2) · 16px basehero
72px · 600 · 1 · -2.16px trackingThe quick brown fox jumps
display
48px · 400 · 1.1 · -1.44px trackingThe quick brown fox jumps
heading-lg
40px · 400 · 1.1The quick brown fox jumps
heading
28px · 400 · 1.2The quick brown fox jumps
heading-sm
24px · 400 · 1.3The quick brown fox jumps
subheading
20px · 400 · 1.4The quick brown fox jumps
text-19
19px · 400 · 1.4The quick brown fox jumps
text-18
18px · 500 · 1.4The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Sandland-550
- Weights
- 400, 500, 600
- Sizes
- 10, 11, 12, 13, 14, 15, 16, 18, 19, 20, 24, 28, 40, 48, 72
- Line height
- 1.00, 1.10, 1.20, 1.30, 1.40, 1.60, 1.67
- Letter spacing
- -0.03em at 48-72px, +0.036em to +0.045em at 10-13px (uppercase labels), normal at body sizes
- Fallback
- DM Sans, Inter, or General Sans
Custom sans-serif used across every UI surface — body, headings, buttons, nav, cards. Weight 400 dominates body and most headings, weight 500/600 reserved for emphasis. The tight negative tracking on display sizes (-0.03em at 48-72px) gives headlines a composed, compact feel; positive tracking on small uppercase labels (0.036-0.045em at 10-13px) provides the airy editorial rhythm seen in nav links, badge text, and section eyebrows.
Additional typeface
Inter
- Weights
- 400
- Sizes
- 14px, 24px
- Line height
- 1.1, 1.4
Inter — detected in extracted data but not described by AI
Additional typeface
GTStandard-M
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.5
GTStandard-M — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 20px
- Element gap
- 12-16px
Border radius
cards
10pxbadges
10pxinputs
4pxbuttons
20pxnav-pills
20pxSpacing scale
1px2px4px5px6px7px8px9px10px11px12px13px14px15px16px18px19px20px24px25px30px40px44px80px120px173pxGuidelines
Do
- Use Sunlit Yellow (#fae467) as the fill for exactly one element per viewport: the primary action or the single data highlight
- Set border-radius to 20px for buttons and nav pills, 10px for cards and badges, 4px for inputs — three radius values, no others
- Keep the cream canvas (#f2ede8) unbroken across full page-width sections; never tile it within cards or components
- Apply -0.03em letter-spacing at 48px and above; apply 0.036-0.045em tracking at 10-13px uppercase labels; leave body text at default tracking
- Use Midnight Navy (#1a365d) as a section-level surface, not as a text color or border — it should feel like turning off the lights
- Limit shadows to 10% black opacity with 12-20px blur; never use sharp or saturated shadows
- Place the brand wordmark centered in the top nav with nav links left-aligned and action pill right-aligned
Don’t
- Do not introduce a second chromatic accent color — yellow is the only highlighter in the system
- Do not use sharp corners (0-2px radius) on any container, card, or interactive element
- Do not use saturated shadows, glow effects, or multi-layer shadow stacks
- Do not place colored product top bands outside the product card — the pink/orange lives on the product mockup only
- Do not use Midnight Navy as a body text color; reserve it for surface fills and large display contexts
- Do not use pure black (#000000) as a background fill; use Charcoal (#191923) for dark surfaces
- Do not apply letter-spacing tighter than -0.03em or looser than 0.045em — the tracking scale is narrow and intentional
Components
Primary CTA Button
Main conversion action (Shop Now, Add to Cart)Pill shape with 20px border-radius, Sunlit Yellow (#fae467) fill, Ink Black (#000000) text at 14-15px weight 500/600. Padding 12px 24px. Box shadow at 10% opacity adds subtle depth. Generous horizontal padding makes the button feel confident but not heavy.
Ghost Nav Pill Button
Secondary navigation action (Take the Sleep Quiz)Pill shape, 20px border-radius, transparent or Paper White fill with 1px Ink Black border. Text at 13-14px weight 500. Sits in the top-right of the navigation bar, visually quieter than the primary CTA.
Nav Link
Top-level navigation items (Shop All, Stay Asleep, Deep Sleep, FAQ)Text-only, Ink Black at 13-14px weight 500, 0.036-0.045em letter-spacing. No underline by default. Aligned left in the header bar with the brand wordmark centered and action pill right-aligned.
Product Card
Product showcase in the Science-Backed Solutions grid10px border-radius, Paper White (#ffffff) background, 0 4px 12px rgba(0,0,0,0.1) shadow. Colored top band (pink for Stay Asleep, orange for Deep Sleep) with product mockup centered. 20px internal padding. Bestseller badge as yellow pill in top-left corner.
Bestseller Badge
Product ranking indicator on product cardsSunlit Yellow (#fae467) fill, 10px border-radius, small pill. Text at 10-11px weight 500 in Ink Black with 0.036em tracking. Positioned top-left of product cards.
Testimonial Card
Customer review with avatar, rating, quote, and product referencePaper White background, 10px radius, soft shadow. Circular avatar (40-48px) top-left, 5-star rating in Sunlit Yellow, large italic quote at 18-20px, product thumbnails row at bottom showing products used.
Dark Data Card
Oura Ring sleep score results — the dramatic counterpoint to the warm sectionsMidnight Navy (#1a365d) or Charcoal (#191923) background, 10-20px radius, white text. Contains two semi-circular progress gauges (Before/After scores) with thin arc strokes. Sunlit Yellow percentage badge anchors the bottom. This is the card that breaks the warmth and signals clinical proof.
Circular Progress Gauge
Sleep score visualization in the dark data cardSemi-circular arc stroke, 2-3px width, drawn in white or light gray at low opacity for the track, with a bright stroke for the score fill. Large score number (48-72px weight 500) centered below the arc. Label text (BEFORE SANDLAND, AFTER 1 WEEK) in uppercase tracking at 11-12px.
Star Rating
5-star review display in testimonial cardsSunlit Yellow (#fae467) filled stars at 14-16px, five stars inline. No text count needed, purely visual.
Carousel Navigation Arrow
Left/right navigation for testimonial and product carouselsCircular button, 32-40px diameter, Paper White fill with 1px Frost (#e6e6e6) border. Black chevron icon centered. Subtle shadow for lift off the cream canvas.
Section Heading Block
Section titles (Science-Backed Solutions for Better Rest)Centered layout, large heading at 40-48px weight 500 in Ink Black, with -1.44px letter-spacing. Supporting paragraph at 16-18px weight 400 in Graphite (#3d3d3d), max-width 600-700px for comfortable line length.
Input Field
Form inputs (email, search)No background fill, bottom border only at 1px Slate (#726f6d) via box-shadow technique. Text in Ink Black, placeholder in Smoke (#666666). Minimal, underline-only style rather than boxed inputs.
Cookie Consent Banner
Bottom-fixed privacy noticeFull-width strip at the bottom, Paper White background, thin top border. Body text at 12-14px in Graphite on the left, two action buttons on the right (black filled 'Accept & Continue' and outlined 'Do Not Share Information'). Functional, not decorative.
Surfaces & elevation
Level 0
Linen Canvas
#f2ede8Page background — warm cream, the dominant surface
Level 1
Paper White
#ffffffCard and product surfaces that sit on the cream canvas
Level 2
Soft Vellum
#faf8f6Nested card backgrounds, secondary surface layer
Level 3
Midnight Navy
#1a365dHero gradient, dark accent cards — the inverse surface
Level 4
Charcoal Deep
#191923Data cards, button backgrounds — near-black with slight cool cast
Shadows are whisper-soft at 10% opacity, used only to lift cards off the cream canvas. The system deliberately avoids heavy drop-shadows — the warm-on-warm palette relies on subtle surface shifts and 10px radii for separation rather than dramatic elevation.
Product card
0 4px 12px rgba(0,0,0,0.1)
Elevated card / hero card
0 4px 20px rgba(0,0,0,0.1)
Input field bottom border
0 1px 0 rgba(0,0,0,0.13)
Layout & imagery
Layout
Full-width sections with max-width 1200px centered content containers. The page alternates between dark and light bands: a dark navy hero → cream product section → white testimonial section. Within sections, content is centered with a 3-column card grid for products and a 2-column layout for testimonials (white card left, dark data card right). Navigation is a single thin top bar with wordmark centered. The layout rhythm is calm and unhurried — generous vertical breathing room between sections (64px+), no aggressive dividers, and the warmth of the cream canvas carries the eye through transitions.
Imagery
Product photography is the dominant imagery: isolated product boxes (pill bottles and supplement boxes) photographed on white, presented as tilted mockups with soft shadows. The product packaging itself carries the color story — pink-capped boxes for the 'Stay Asleep' line, orange-capped boxes for 'Deep Sleep'. The hero composition pairs two product mockups at slight angles against a dark navy gradient, creating a still-life feel. No lifestyle photography, no people imagery beyond a single circular avatar in testimonials. Icons are minimal — simple line icons in nav (person, bag) and a small ring icon for the Oura data card. The overall visual density is low; whitespace and product photography carry the visual weight, not illustration or graphics.
Design notes
Agent Guide
## Quick Color Reference - text: #000000 (primary), #3d3d3d (body), #666666 (secondary) - background: #f2ede8 (page canvas), #ffffff (card surface), #1a365d (dark hero/data) - border: #e6e6e6 (hairline), #726f6d (input) - accent: #fae467 (Sunlit Yellow — badges, data highlights) - primary action: #fae467 (filled action) ## Example Component Prompts 1. **Hero with dark gradient:** Background linear-gradient from #1a365d to a slightly darker navy. Headline '48px Sandland-550 weight 500, #ffffff, letter-spacing -1.44px'. Subtext '18px weight 400, #e6e6e6'. Primary CTA '#fae467 fill, #000000 text, 20px radius, 12px 24px padding, 14px weight 500'. Two product mockup images right-aligned, slightly tilted. 2. **Product card:** 10px radius, #ffffff background, 0 4px 12px rgba(0,0,0,0.1) shadow, 20px padding. Yellow bestseller badge top-left ('#fae467 fill, 10px radius, 10px text #000, 0.036em tracking'). Product mockup image centered, 28px product name below in #000, 14px subtitle in #666. 3. **Testimonial card with dark data card pair:** Left card — #ffffff, 10px radius, circular 48px avatar, 5 yellow stars, 20px italic quote in #000, product thumbnail row at bottom. Right card — #1a365d background, 10-20px radius, two semi-circular gauge arcs (white stroke at 2-3px, 30% opacity tracks with full-opacity score fills), large 48px score numbers in #ffffff, uppercase 11px labels at 0.045em tracking, yellow '#fae467' percentage badge at bottom. 4. **Section heading block:** Centered, max-width 700px. Heading at 40px Sandland-550 weight 500, #000000, letter-spacing -1.2px. Paragraph at 16px weight 400, #3d3d3d, line-height 1.6. 5. **Cookie banner strip:** Full-width, fixed bottom, #ffffff background, 1px top border #e6e6e6. 12px body text #3d3d3d left, two buttons right: filled #000000 with white text 20px radius pill, and outlined #000000 1px border 20px radius pill.
Surface Alternation Pattern
The page follows a deliberate warm-cool rhythm: dark navy hero → cream canvas product section → white testimonial section. Each surface shift signals a change in narrative mode — dark for aspiration, cream for browsing, white for proof. New pages should maintain this alternation: never stack two cream sections without a white or dark break, and never place a dark card on a dark background.
Color Temperature as Narrative
The system uses color temperature to guide emotional pacing. Cream (#f2ede8) and warm whites create the default restful browsing state. Midnight Navy (#1a365d) enters only for hero moments and data proof — it signals 'nighttime' and 'science'. The single warm yellow (#fae467) is the system's only chromatic accent and should feel like a small light switched on in the otherwise muted space. Avoid adding cool grays, blues, or greens as accents — the palette's discipline is what makes the yellow and navy feel intentional.
Similar brands
Olipop
Same warm cream canvas with a single vivid accent color, pill-shaped CTAs, and generous whitespace — both use color temperature (warm/cool) to pace the page
Athletic Greens / AG1
Supplement ecommerce with clinical data cards paired against soft warm sections, dark navy for proof moments, minimal chromatic palette
Magic Spoon
Direct-to-consumer product cards on a warm neutral canvas, bold centered product photography, pill-shaped buttons, editorial spacing rhythm
Brumate
Product-first e-commerce with tilted product mockups on light backgrounds, dark hero bands, and a single accent color for CTAs and badges
Mela Vitamins
Warm-toned supplement brand with cream/white surfaces, pill-shaped CTAs, soft shadows, and a clean clinical feel built on color temperature contrast
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
