Umber
#945c26Accent text on specific badges; provides a rare, earthy color pop.
Aesop
aesop.comWebsite preview
The design language
The design evokes a scholarly apothecary's formulary, where every element is presented with meticulous precision. It operates on a starkly limited palette of warm off-white and charcoal, creating a high-contrast, text-forward environment. A rigid, architectural layout with sharp 0px corners dominates, reinforcing a sense of order and clinical quality. The system's signature is the typographic tension between the humanist serif 'Zapf-Humanist' for expressive headlines and the neutral sans-serif 'SuisseIntl' for all functional text, lending an air of classicism to a modern digital interface.
Color palette
accent
neutral
Parchment
#fffef2Primary page background, light surfaces.
Charcoal
#333333Primary text, UI icons, primary buttons, borders.
Ink Black
#000000Hero section text, high-emphasis text elements.
Carbon
#252525Footer background, secondary dark surfaces.
Stone
#666666Secondary body text.
Slate
#d6d5ccCarousel scrollbar track.
Alabaster
#ffffffText on dark backgrounds, rare highlight surfaces.
Typography
Type scale
Major Second (1.125) · 12px basetext-31
31px · 400 · 1.33The quick brown fox jumps
heading
30px · 400 · 1.2The quick brown fox jumps
heading-sm
18px · 700 · 1.33The quick brown fox jumps
text-16
16px · 400 · 1.2The quick brown fox jumps
body
14px · 400 · 1.6The quick brown fox jumps
text-12
12px · 400 · 1.5The quick brown fox jumps
caption
11px · 400 · 1.7The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
SuisseIntl
- Weights
- 400, 700
- Sizes
- 11px, 12px, 14px, 16px, 18px, 30px
- Line height
- 1.20-2.86
- Fallback
- Inter, Helvetica Neue
The workhorse font for all UI text, body copy, navigation, product titles, and buttons. Its neutrality provides a stable, legible foundation for the more expressive serif.
Additional typeface
Zapf-Humanist
- Weights
- 400
- Sizes
- 31px
- Line height
- 1.33
- Fallback
- Optima, Palatino
Reserved for major, atmospheric headlines. Its humanist serif form contrasts with the clinical sans-serif, adding an editorial, classic quality.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1600px
- Section gap
- 96-128px
- Card padding
- 24px
- Element gap
- 8-16px
Border radius
tags
0pxcards
0pxinputs
0pxbuttons
0pxSpacing scale
4px5px6px7px8px10px12px13px15px16px17px18px20px23px24px30px32px35px40px60px73px100px113px180pxGuidelines
Do
- Use Zapf-Humanist exclusively for large, emotive headlines, otherwise default to SuisseIntl.
- Maintain sharp 0px corners on all rectangular UI elements like cards, buttons, and inputs.
- Rely on generous whitespace (96px+ between sections) for separation, not dividers or shadows.
- Center-align text and imagery within product cards and feature blocks.
- Use the Parchment (#fffef2) and Charcoal (#333333) combination for primary content.
- Keep layouts simple: centered stacks or balanced multi-column grids.
- Use the Dark Action Button for all primary purchasing actions.
Don’t
- Do not use rounded corners on any element other than circular icon buttons.
- Do not use drop shadows or any other 3D-effect for elevation.
- Do not introduce new colors; the palette is intentionally restricted.
- Do not use gradients.
- Do not place text over complex parts of images; ensure high contrast.
- Do not use lifestyle photography that shows models or hands using products.
- Do not create complex, overlapping, or asymmetrical layouts.
Components
Product Card — Animal
Product Carousel Section — New and Notable
Hero CTA Banner
Dark Action Button
Primary call-to-action, such as 'Add to Cart'.Background: Charcoal (#333333). Text: Parchment (#fffef2). Padding: 12px 24px. Radius: 0px. No border. Font: SuisseIntl.
Outline Navigation Button
Secondary header actions like 'Email sign up' or 'Search'.Background: transparent. Text: Charcoal (#333333). Border: 1px solid rgba(51, 51, 51, 0.2). Padding: ~8px 16px. Radius: 0px. Font: SuisseIntl.
Text Link
Inline navigation or tertiary actions.Background: transparent. Text: Charcoal (#333333). No border or padding. Underlined on hover. Font: SuisseIntl.
Hero Outline Button
Main CTA within the hero section.Background: transparent. Text: Alabaster (#FFFFFF) or Ink Black (#000000) depending on hero video. Border: 1px solid matching text color. Padding: 12px 24px. Radius: 0px. Font: SuisseIntl.
Text Input / Select
Form fields for user input or selection.Background: Parchment (#fffef2). Text: Charcoal (#333333). Border: 1px solid rgba(51, 51, 51, 0.2). Radius: 0px. Padding: ~12px 20px.
Informational Badge
Small text labels above product titles, e.g., 'New addition'.Background: transparent. Text: Charcoal (#333333). Radius: 0px. Font: SuisseIntl, 11px, bold.
Circular Arrow Button
Carousel navigation controls.Background: transparent. Border: none. Radius: 9999px. Contains a simple arrow icon in Charcoal (#333333).
Surfaces & elevation
This system actively avoids shadows for elevation. Depth and hierarchy are achieved through typographic scale, stark color contrast between Parchment (#fffef2) and Charcoal (#333333), and generous whitespace, not through layered surfaces or drop shadows. This creates a flat, graphic, and print-inspired aesthetic.
Layout & imagery
Layout
The page follows a highly structured, architectural model with a generous max-width of around 1600px, within which content is neatly centered. The structure is a vertical stack of full-width bands, often alternating between the Parchment background and full-bleed imagery or video in the hero. Vertical rhythm is defined by expansive gaps (96px+) between sections. Content is arranged in simple, centered stacks or rigid 3-column grids for product carousels. This methodical, spacious, and grid-based approach reinforces the brand's precision and focus.
Imagery
The visual language for imagery is stark and artifact-like. Product photography features items isolated and centrally framed against the Parchment (#fffef2) background, akin to specimens in a lab or objects in a gallery. There is a deliberate absence of lifestyle context, models, or hands. The focus is purely on the product's form, amber glass, and typographic labels. Hero sections may use moody, atmospheric video focusing on texture and sensation (e.g., fur, water) rather than direct product use, providing a sensory counterpoint to the clinical product shots.
Design notes
Agent Guide
### Quick Color Reference - **Page Background**: `Parchment` (#fffef2) - **Primary Text**: `Charcoal` (#333333) - **Primary CTA Background**: `Charcoal` (#333333) - **Primary CTA Text**: `Parchment` (#fffef2) - **Borders**: `rgba(51, 51, 51, 0.2)` ### Example Component Prompts 1. **Hero Section**: "Create a full-screen hero with a dark, atmospheric video background. Center-align the text. The headline should be 'For discerning canines' in `Zapf-Humanist`, 31px, `Alabaster` (#FFFFFF). Below it, add body text in `SuisseIntl`, 18px, `Alabaster`. Finally, add an outline button with text 'Discover more ->', 1px `Alabaster` border, 0px radius, and padding 12px 24px." 2. **Product Carousel Section**: "Create a product carousel on a `Parchment` (#fffef2) background. The section heading 'New and notable' should be 30px `SuisseIntl`, color `Charcoal` (#333333). Arrange three product cards in a row. Each card has a 0px radius, `Parchment` background, and centered content. Product image on top, then the product name 'Animal' in 18px `SuisseIntl` bold, then description in 14px `SuisseIntl`. Below it, add a dark action button with text 'Loading...' using `Charcoal` background, `Parchment` text, 0px radius, and 12px 24px padding." 3. **Text Input Field**: "Design a text input field for a form. It should have a `Parchment` (#fffef2) background, 0px radius, and a 1px solid border of `rgba(51, 51, 51, 0.2)`. Placeholder text should be `SuisseIntl`, 14px, `Charcoal` (#333333). The input's padding should be approximately 12px 20px."
Similar brands
Byredo
Similar minimalist product photography, monochrome palettes, and premium typographic focus.
Le Labo
Shares the 'apothecary' label aesthetic, reliance on typography for branding, and a refined e-commerce experience.
SSENSE
Employs a similar brutalist-inspired grid layout and a strong, singular sans-serif font as a core identity element.
Vitra
Swiss design sensibility with a focus on gridded layouts, high-quality typography (sans-serif), and clean product presentation.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
