Powder Blue
#d5e0eaSection bands, card borders, decorative dividers — the brand's secondary canvas, used to segment the page into editorial chapters without introducing contrast
Aevi Wellness
liveaevi.comWebsite preview
The design language
Aevi Wellness reads like a Nordic editorial spread translated into e-commerce: generous product photography overlapping a warm off-white canvas, whisper-weight typography that gives headlines room to breathe, and a single muted slate-blue accent that appears only where the brand needs to signal action or section shift. The palette is almost entirely achromatic — warm near-black text (#231f20), pure white surfaces, and a powder-blue band (#d5e0ea) that structures the page into editorial chapters. Components are barely-there: ultra-thin hairline borders, 2px corner radii on most elements, and 60px pill buttons for primary actions. The overall feel is clinical-luxury — the products themselves are the visual subject, and the interface stays out of their way.
Color palette
brand
Slate Bloom
#a3bfdbPrimary action buttons, active states — the single chromatic accent; its low saturation keeps it feeling clinical rather than commercial
neutral
Warm Ink
#231f20Primary text, hairline borders, card outlines, icon strokes — near-black with a warm undertone that softens the high-contrast text against white
True Black
#000000Icon fills, occasional heavy borders — used sparingly for graphical weight when maximum contrast is needed
Paper White
#ffffffPage background, card surfaces, text on dark blocks — the dominant canvas, never off-white or cream
Mist Gray
#5f6368Muted helper text, secondary metadata, low-priority labels — only when a softer reading level is needed without leaving the achromatic palette
Typography
Type scale
Major Second (1.125) · 16px basedisplay
54px · 300 · 1.08 · 0px trackingThe quick brown fox jumps
heading-xl
42px · 300 · 1.08 · 0px trackingThe quick brown fox jumps
heading-lg
36px · 300 · 1.09 · 0px trackingThe quick brown fox jumps
heading
28px · 300 · 1.1 · 0px trackingThe quick brown fox jumps
heading-sm
24px · 300 · 1.11 · 0px trackingThe quick brown fox jumps
body-lg
16px · 300 · 1.33 · 0px trackingThe quick brown fox jumps
body
14px · 300 · 1.31 · 0px trackingThe quick brown fox jumps
text-12
12px · 300 · 1.33The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Primary Font
- Weights
- 300
- Sizes
- 10px, 12px, 14px, 16px
- Line height
- 1.29, 1.3, 1.31, 1.33
Primary Font — detected in extracted data but not described by AI
Additional typeface
Primary Sans (custom, serif-influenced grotesque)
- Weights
- 300
- Line height
- 1.29–1.33
- Letter spacing
- normal
- Fallback
- Inter, Söhne, General Sans
Body text, button labels, badge text, list items, card metadata at weight 300 — the light weight is anti-convention for utility text and signals editorial restraint
Additional typeface
Tertiary Sans
- Weights
- 500
- Line height
- 1.29
- Fallback
- Inter, Söhne
Emphasized body copy, card descriptions — weight 500 lifts importance without breaking the light-typographic system
Additional typeface
Display Sans
- Weights
- 300
- Line height
- 1.08–1.11
- Letter spacing
- normal
- Fallback
- Inter, Söhne, Neue Haas Grotesk
All headlines and section titles at weight 300 with extremely tight leading — the whisper-weight headlines create authority through restraint, not volume
Additional typeface
Tertiary Font
- Weights
- 500
- Sizes
- 14px
- Line height
- 1.29
Tertiary Font — detected in extracted data but not described by AI
Additional typeface
Button Font
- Weights
- 500
- Sizes
- 14px
- Line height
- 1.21, 2.71
Button Font — detected in extracted data but not described by AI
Additional typeface
Heading Font
- Weights
- 300
- Sizes
- 24px, 28px, 36px, 42px, 54px
- Line height
- 1.08, 1.09, 1.1, 1.11
Heading Font — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 48px
- Card padding
- 16px
- Element gap
- 8px
Border radius
cards
2pxpills
60pxinputs
2pxbuttons
2pxSpacing scale
2px4px6px8px10px12px14px16px24px28px32px42px48px62px64px80px90px303pxGuidelines
Do
- Use #a3bfdb exclusively for the primary action button — never as a decorative fill, text color, or large background area
- Set all headlines at weight 300 with line-height between 1.08 and 1.11; never bold a heading
- Use the 60px radius only for the primary pill button; all other elements (cards, inputs, ghost buttons) use 2px
- Build section separation with #d5e0ea background bands and 1px #231f20 hairlines, not with shadows or large margins
- Let product photography fill its container edge-to-edge; do not pad or frame product images with whitespace
- Keep the palette 95%+ achromatic; any chromatic use must be functional (action, active state) — decorative color dilutes the editorial tone
- Use 4px as the base spacing unit and snap all gaps to multiples of 4 (4, 8, 16, 24, 32, 48)
Don’t
- Do not introduce a second accent color — the system is built on a single muted blue against achromatic neutrals
- Do not apply shadows, glows, or blur to any element; the elevation philosophy is hairline borders only
- Do not use border-radius larger than 2px on anything except the primary pill button (60px)
- Do not set headings at weight 400 or above; weight 300 is the system voice and any heavier weight breaks the editorial register
- Do not use vibrant or saturated colors for icons, links, or hover states — keep all interactive chrome in the existing palette
- Do not pad product photography with large gutters or contained frames; images should bleed
- Do not use colored or filled backgrounds for cards; the card surface is always #ffffff with a 1px border
Components
Primary Pill Button
Main call-to-action (e.g., 'Create Your Routine')Filled background #a3bfdb, white text at 14px weight 500, 60px border-radius, 16px horizontal padding and 12px vertical padding. No shadow. The pill shape is the only soft radius in the system — everything else is sharp.
Ghost / Outlined Button
Secondary actions, filter triggersTransparent background, 1px border in #d5e0ea, text in #231f20, 2px radius, 16px horizontal and 8–12px vertical padding. Sits quietly next to the primary pill without competing.
Editorial Section Card
Content blocks for features, product categories, reviewsWhite background (#ffffff), 1px hairline border in #231f20, 2px radius, 16px internal padding. No shadow, no elevation — the border alone defines the surface. Often overlaps with photography behind it.
Product Hero Banner
Full-bleed hero on landing and category pagesFull-viewport-width background image (product photography), overlaid with a large display headline (54px, weight 300) and a primary pill CTA. The brand wordmark is set at display size as a decorative overlay, not a heading.
Press Logo Strip
Social proof band of media mentionsSits on a #d5e0ea background band, logos rendered in #231f20 at uniform height, evenly spaced across the full width. No card containers — the band itself is the container.
Testimonial Block
Customer reviews carousel#d5e0ea background, 5-star row in #231f20 above body text at 14px weight 300, quoted review text centered, product name and reviewer attribution in small caps below at 10–12px. 2px radius container.
Hairline Divider
Structural separation between content blocks1px line in #d5e0ea or #231f20, full-width or section-width. Used more often than spacing alone to define page structure.
Product Category Card
Grid cards linking to product categories (Bestsellers, New, Face Care)Full-bleed photography with a category label overlaid in the bottom-left corner at 14px weight 300 white text. No border, no padding, no shadow — pure image with typographic caption.
Header Navigation
Top-level site navigationTransparent or white background, logo left, nav links center or right in 14px weight 300, no background fill on active state — active state indicated by underline in #a3bfdb or color shift to #231f20.
Badge / Tag
Product tags, labels, status indicators1px border in #d5e0ea, background #ffffff or #d5e0ea, 2px radius, 6–8px vertical padding, text 10–12px weight 300 in #231f20. Minimal footprint.
Input Field
Email capture, search, form fields1px bottom border in #231f20 (no side or top borders), transparent background, placeholder text 14px weight 300, focus state darkens the border to #000000. No fill, no box.
Icon
Utility and decorative iconsStroke-based, 1px weight, #231f20 fill, 16–20px size. Minimal, clinical — no rounded ends, no filled variants. Icons never carry color.
Surfaces & elevation
Level 0
Paper White
#ffffffBase page canvas, card surfaces, product image backgrounds
Level 1
Powder Blue Band
#d5e0eaSection dividers, press strip, testimonial background — editorial chapter break
Level 2
Slate Bloom
#a3bfdbPrimary action surface, occasional highlight wash — the only chromatic surface
Level 3
Warm Ink
#231f20Inverted dark surface for text-heavy or closing sections
The design intentionally avoids shadows, glows, and blur effects entirely. All elevation is communicated through 1px hairline borders in #231f20 or #d5e0ea, through the #d5e0ea background band that separates editorial chapters, and through photography that bleeds beyond its logical container to create depth. The absence of shadow is a deliberate Nordic-apothecary choice — surfaces feel printed rather than digital.
Layout & imagery
Layout
Max-width ~1200px centered, but hero and section bands break out to full-bleed. The page reads as a sequence of full-width editorial chapters: a full-bleed product hero with overlaid wordmark, a press logo strip on a #d5e0ea band, a split editorial section (image left, text right with framed photography), a testimonial carousel on a #d5e0ea band, and a 3-column product category grid. Sections alternate between white and powder-blue to create rhythm. The navigation is a minimal top bar. Section gaps are 48px but feel larger because of the band-to-band color contrast. The layout is text-left/image-right in editorial sections and centered-stacked in product grids.
Imagery
Photography is the dominant visual medium. Product shots are tightly cropped, often with overlapping bottles and dropper applicators creating editorial collage compositions. Lifestyle portraits are natural-light, intimate close-ups (faces, hands applying product), always desaturated or black-and-white in the editorial sections. Press imagery uses a grainy, high-contrast treatment. No illustration, no 3D renders, no abstract graphics — every image is photographic. Imagery is full-bleed and overlapping rather than contained in cards, and labels float over the bottom corner of the image in plain white type. The object is always the subject; there is no lifestyle staging or environmental context.
Design notes
Agent Guide
Quick Color Reference - text: #231f20 - background: #ffffff - border: #231f20 (hairline) or #d5e0ea (soft) - accent: #d5e0ea (section bands, ghost button borders) - primary action: #a3bfdb (filled action) Example Component Prompts 1. Create a Primary Action Button: #a3bfdb background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 3. Create an editorial card: background #ffffff, 1px border in #231f20, 2px radius, padding 16px. Body text at 16px weight 300 in #231f20. 4. Create a testimonial block: background #d5e0ea, padding 32px, centered text at 14px weight 300 in #231f20, 5-star row above in #231f20, attribution below in 10px small caps. 5. Create a press logo strip: background #d5e0ea, logos evenly spaced, rendered in #231f20 at uniform height, padding 24px vertical.
Typography Voice
The most distinctive typographic choice is the exclusive use of weight 300 across the entire system — from body copy to the 54px display headlines. This whisper weight is uncommon in beauty/ecommerce, where most brands default to 500–700 for authority. Here, weight 300 signals clinical confidence: the products speak, the type stays out of the way. Line-heights are notably tight on display (1.08–1.11) and comfortable on body (1.29–1.33), creating a clear contrast between editorial headers and readable utility text. No italic, no decorative serifs in the system itself; serif italics appear only in partner logos and editorial content.
Similar brands
Tata Harper
Same editorial-meets-clinical beauty language: hairline borders, light typography, generous product photography, nearly monochrome with one soft accent
Noble Panacea
Similar ultra-minimal skincare aesthetic with whisper-weight headlines, full-bleed product photography, and an almost entirely achromatic palette
Lesse
Same Nordic apothecary mood — sparse layout, product-forward imagery, thin sans-serif at light weights, subtle blue-gray accents on white
Sigil Scent
Shared editorial restraint: weight 300 type, hairline dividers, near-monochrome palette with a single dusty accent, photography that overlaps layout edges
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
