Oxblood
#66040cRed accent for outlined action borders, linked labels, and lightweight interactive emphasis.
Advene
advenedesign.comWebsite preview
The design language
Advene reads as an art-gallery catalog printed on warm parchment: a luxury accessories brand whose interface behaves like an editorial spread rather than a storefront. The canvas is a muted stone-warm gray (#dfe0db) rather than clinical white, and the entire palette is pulled from natural pigments — oxblood, olive, sage, buttercream — with a single unexpected electric blue for outlined actions. Typography is a single humanist serif (Signifier) at restrained sizes, paired with a widely-tracked monospace (Pitch) for micro-labels, creating a tension between book-like body text and almost architectural small caps. Layout is full-bleed and split-screen, sections are separated by generous air rather than dividers, and imagery is treated as artwork — halftone dots, oversized letterforms, and tight portrait crops that bleed edge-to-edge. The overall effect is restrained, expensive, and deliberate: nothing is decorative, everything earns its space.
Color palette
brand
accent
Olive Khaki
#9a9260Secondary accent for borders and subdued interactive elements where oxblood would overpower
Buttercream
#f7dc99Soft champagne surface for the announcement bar and decorative letterform washes
Pale Buttercream
#f8e9acLightest cream tint for subtle washes and hover states on yellow surfaces
Cobalt Outline
#007affOutlined action border only — the one break in the earth-tone palette, used for ghost pill buttons that need to read as interactive without filling
neutral
Parchment Stone
#dfe0dbPrimary page canvas — the warm stone-gray ground that replaces clinical white throughout the entire site
Bone White
#eeefeaElevated card and section surface, one step lighter than the canvas
Pure White
#ffffffNav background, pill button fills, card surfaces needing maximum contrast against the stone canvas
Carbon
#000000Primary text, hairline borders, icon strokes — the dominant ink of the system
Graphite
#3c3c3bNav text, secondary text where pure black feels too heavy
Ash
#808080Muted body text, inactive states, dividers and borders at lower hierarchy
Inkstone
#121212Deep surface for inverted sections and dark text on light cream backgrounds
Sage Stone
#c1c19fEarthy neutral surface for product swatches and muted backgrounds — sits between canvas and accent
Typography
Type scale
Major Second (1.125) · 11px baseheading
36px · 1.15 · 0.8px trackingThe quick brown fox jumps
heading-sm
28px · 1.2 · 0.5px trackingThe quick brown fox jumps
subheading
24px · 400 · 1.3The quick brown fox jumps
body
18px · 400 · 1.5The quick brown fox jumps
body-sm
14px · 400 · 1.67The quick brown fox jumps
text-13
13px · 400 · 1.2The quick brown fox jumps
caption
11px · 400 · 1.7 · 0.7px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Signifier
- Weights
- 400
- Sizes
- 14px, 18px, 24px
- Line height
- 1.20–1.67
- Fallback
- GT Super, National 2, Tiempos Text, Lora
Primary serif for all body text, headlines, nav links, and product names. Used at 14px for UI labels and body, 18px for reading copy and about-section paragraphs, 24px for subheadings and feature titles. The single typeface carrying the entire brand voice — its humanist warmth prevents the editorial layout from feeling cold or corporate
Additional typeface
Pitch
- Weights
- 400, 700
- Sizes
- 11px
- Line height
- 1.60–1.70
- Letter spacing
- 0.0640em
- Fallback
- JetBrains Mono, IBM Plex Mono, Söhne Mono
Monospace micro-label for announcement bar text, footer notes, and editorial captions. The wide tracking (0.064em) gives it an almost architectural, typeset feel — it reads as 'this is a label, not a sentence'. Bold weight 700 for emphasis within labels
Additional typeface
Arial
- Weights
- 400
- Sizes
- 13px
- Line height
- 1.20
- Fallback
- system-ui sans-serif
System fallback for icon glyphs and button icons only — not used for prose
Additional typeface
GTStandard-M
- Weights
- 400
- Sizes
- 18px
- Line height
- 1.50
Secondary body face appearing in isolated content blocks — same humanist register as Signifier but used for distinction in long-form passages
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1440px
- Section gap
- 80-120px
- Card padding
- 40px
- Element gap
- 12px
Border radius
cards
0pxlinks
20pxpills
41pxbuttons
20pxSpacing scale
1px2px3px4px5px6px8px10px11px12px15px18px20px24px30px35px40px50px60px63px70px120pxGuidelines
Do
- Set the page background to Parchment Stone (#dfe0db) — never use pure white as the base canvas; the warm gray is what makes the palette feel editorial
- Use Signifier at 18px with 1.5 line-height for all body prose; 14px is for UI labels only
- Apply the 41px pill radius to primary hero CTAs and the 20px radius to secondary outlined buttons — the two-radius system creates a clear visual hierarchy
- Pair roman and italic weights within a single heading (e.g. 'The Age Bag: / Our Award-Winning Classic') for editorial section titles
- Use Pitch at 11px with 0.064em letter-spacing for all micro-labels, captions, and the announcement bar — the monospace is what makes small text feel typeset rather than default
- Treat photographs as full-bleed edge-to-edge panels in the hero, not as contained cards with padding
- Apply the halftone dot filter to editorial/storytelling images, not to product catalog shots
Don’t
- Do not add drop shadows to cards, buttons, or nav — depth comes from surface color shifts only
- Do not use Cobalt (#007aff) as a filled background; it is an outlined-action border color only
- Do not use bold (700) weight in Signifier for body text or headlines — weight 400 with italic is the system's emphasis mechanism
- Do not introduce a second serif or sans-serif body face; the entire prose system runs on Signifier at three sizes
- Do not place product images inside rounded containers; product photography is always sharp-cornered and full-bleed
- Do not use Ash (#808080) for primary text — it is for inactive states and de-emphasized metadata only
- Do not separate sections with visible dividers or rules; rely on generous whitespace and surface color changes
Components
Announcement Bar
Top-of-page site-wide message stripFull-width band with Buttercream (#f7dc99) background, centered Pitch monospace at 11px with 0.064em tracking in Carbon (#000000). Right-aligned close (×) glyph. Height ~36px. No border, no shadow — sits flush against the nav below.
Header Navigation
Primary site navigation with centered wordmarkWhite (#ffffff) background, 1px Carbon (#000000) bottom border. Layout: left-aligned nav links ('Shop', 'About') at 14px Signifier; centered spaced-caps logotype 'ADVENE' at ~18px with wide tracking; right-aligned utility links ('Account', 'EUR €', 'Cart') at 14px. Nav text in Graphite (#3c3c3b). Height ~60px.
Split Hero Panel
Full-viewport editorial opening imageFull-bleed 50/50 split. Left and right panels each contain an edge-to-edge photograph (tight crop of model with product, or model with large decorative letterform). No padding, no gutters between panels. Images bleed to all viewport edges. The right panel may contain an oversized flat color letterform (buttercream 'A') that overlaps the photograph as a graphic layer.
Shop CTA Pill Button
Primary call-to-action overlaid on heroPositioned bottom-left of hero, white (#ffffff) background, 1px Carbon (#000000) border, 41px border-radius (full pill). Text 'Shop Advene →' at 14px Signifier in Carbon. Padding 10px 24px. The 41px radius is the signature shape — more generous than standard pills, creating a 'pebble' silhouette.
Outlined Action Button
Secondary interactive element with chromatic borderTransparent background, 1px Cobalt Outline (#007aff) border, 20px border-radius. Text in Cobalt. The single break in the earth-tone palette — used sparingly for actions that need to feel 'switched on' without filling with color. Padding 10px 20px.
Halftone Image Treatment
Artistic image processing for editorial sectionsPhotograph converted to coarse halftone dot pattern in a single warm tone (sage or olive). Applied to a ~400px wide portrait or product image. Creates a print/risograph aesthetic that distinguishes editorial photography from product photography.
About Section
Brand story with image + text compositionTwo-column layout: left column has a halftone-treated image (~400px wide), right column has body text in 18px Signifier at 1.5 line-height in Carbon. A small decorative 'A' monogram (olive or oxblood) and a grid/dots icon appear as ornamental elements. A 'Read more About →' link in 14px Signifier with arrow appears below the text block.
Press List
Media mentions and pull quoteTwo-column layout. Left column: vertical list of publication names (Forbes, Vogue, Harper's Bazaar, Wallpaper*, Marie Claire) in 14px Signifier, each followed by a colon. Active/selected item (e.g. 'Wallpaper*:') in Carbon; others in Ash (#808080). Right column: pull quote in 18px Signifier with em-dash and attribution. A thin olive (#9a9260) underline marks the active publication.
Product Feature Section
Hero product showcase with editorial headingFull-bleed image (left, ~50% width) of a model/product portrait with desaturated/monochrome treatment. Right column: heading in mixed roman + italic Signifier (e.g. 'The Age Bag:' in regular, 'Our Award-Winning Classic' in italic) at 28-36px. The italic+roman pairing within a single heading is a signature editorial device.
Vertical Side Tab
Fixed edge navigation for section discoveryThin vertical strip on the right viewport edge, ~30px wide, containing vertically rotated text ('Discover') in Pitch monospace at 11px. Oxblood (#66040c) text on parchment background. Functions as a section anchor rather than a primary nav.
Arrow Link
Inline text link with directional indicator14px Signifier text in Carbon, followed by a thin arrow glyph (→). No underline by default; underline or color shift on hover. Used for 'Read more', 'Shop Advene', and all editorial CTAs. The arrow is the system's universal 'continue reading' signal.
Surfaces & elevation
Level 0
Parchment Canvas
#dfe0dbBase page background — the warm stone ground
Level 1
Bone Card
#eeefeaFirst elevation above canvas, used for section panels
Level 2
White Card
#ffffffHighest elevation for nav, buttons, and product cards needing maximum contrast
Level 3
Buttercream Wash
#f7dc99Chromatic surface for announcement bar and decorative letterform overlays
The design deliberately avoids drop shadows and material elevation. Depth is achieved exclusively through surface color shifts (canvas → bone → white) and generous whitespace. This flat, print-like treatment reinforces the editorial catalog metaphor — pages are printed sheets, not floating cards on glass.
Layout & imagery
Layout
Full-bleed page model with no centered max-width container constraining the hero. The hero is a 50/50 split-screen occupying the full viewport height, with edge-to-edge photography on both halves. Below the hero, sections follow a two-column text+image pattern, each column occupying roughly 40-50% of the viewport width with generous gutters. The about section uses left-image/right-text; the press section uses left-list/right-quote. Section transitions are seamless — no visible dividers, just surface color shifts from Parchment Stone to Bone White, or generous vertical air (80-120px). Navigation is a thin top bar (white background, 1px bottom border) with a centered spaced-caps wordmark. A vertical side tab on the right edge provides section anchoring. The overall rhythm is slow and generous — sections breathe with 80-120px vertical gaps, and content columns never feel cramped.
Imagery
Photography is editorial fashion-shoot quality: tight portrait crops of models holding or wearing Advene accessories, often cropped at the face or torso to keep the product as the focal point. The split-hero pairs a black-clad model holding a chartreuse bag with a white-dressed model against a neutral backdrop — high contrast between dark/light and between product color/scene. Imagery is treated as fine art: full-bleed panels that bleed to viewport edges, halftone dot processing on storytelling images (about section), and occasional desaturated/monochrome treatment on product feature sections. A large flat-color letterform (the 'A' monogram in buttercream) acts as a graphic overlay, blending product photography with print design. No icons in the conventional sense — all small glyphs are thin-line and monochrome.
Design notes
Agent Guide
## Quick Color Reference - Canvas: #dfe0db (Parchment Stone) - Surface: #eeefea (Bone White) - Text: #000000 (Carbon) - Border: #000000 (Carbon) at 1px - Brand accent: #66040c (Oxblood) for links and critical accents - primary action: #007aff (outlined action border) ## Example Component Prompts 1. **Split Hero Panel**: Full-viewport height, 50/50 split. Left panel: edge-to-edge photograph of model in black holding chartreuse handbag. Right panel: edge-to-edge photograph of model in white dress with oversized buttercream (#f7dc99) 'A' letterform overlaid as a flat graphic. Bottom-left of left panel: white pill button, 41px radius, 1px Carbon border, 10px 24px padding, text 'Shop Advene →' in 14px Signifier #000000. 2. **Announcement Bar**: Full-width strip, ~36px height, background #f7dc99. Centered text 'Free shipping worldwide from New York' in Pitch 11px, letter-spacing 0.7px, color #000000. Right-aligned × close glyph in Carbon. 3. **Press List Section**: Two-column layout, Parchment canvas background. Left column: vertical list of publication names in 14px Signifier — 'Forbes:', 'Vogue:', 'Harper's Bazaar:', 'Wallpaper*:', 'Marie Claire:' — with 'Wallpaper*:' active in Carbon, others in #808080 Ash. Each name followed by a thin #9a9260 underline for the active item. Right column: pull quote in 18px Signifier Carbon, with em-dash and italicized attribution. 4. **Product Feature Heading**: 28px Signifier, left-aligned, color Carbon. Set 'The Age Bag:' in roman weight 400, then 'Our Award-Winning Classic' in italic weight 400 on the next line. 36px vertical space below heading before body content. 5. **About Section with Halftone Image**: Left column ~400px wide: portrait photograph processed with coarse halftone dot pattern in olive (#9a9260) tone, sharp corners, no border. Right column: body text in 18px Signifier Carbon, line-height 1.5, max-width ~520px. Below text: 'Read more About →' link in 14px Signifier Carbon with arrow glyph. 60px vertical gap above and below the section.
Shape Language
The system operates on exactly two radius values: 20px for secondary buttons and links, and 41px for primary hero CTAs. The 41px pill is a signature shape — it's more generous than a standard 9999px stadium pill, creating a distinct 'pebble' silhouette that reads as handcrafted rather than utility. Cards and images are always sharp-cornered (0px radius). There are no rounded containers in the system — the pill is the only rounded element. This binary shape system (pill vs. sharp) creates a clear visual distinction between interactive elements and content.
Diagonal Split Gradient
A distinctive 45-degree hard-edge gradient (not a smooth blend) appears on decorative dividers: `linear-gradient(45deg, [warm tone] 0%, [warm tone] 49%, [contrast] 50%, [contrast] 100%)`. The hard 50% split with no transition zone is a print/editorial device — it mimics a torn edge or a color-block layout in a magazine spread. Use warm-to-black for dark mode dividers, warm-to-white for light mode. Never use smooth gradient transitions.
Similar brands
The Row
Same editorial-catalog treatment: warm neutral palette, serif-only typography, full-bleed photography, and an almost complete absence of UI chrome — the products and art direction do all the work
Aesop
Same earthy, muted color palette with unexpected chromatic accents, generous whitespace between sections, and a restrained approach to UI elements that feels more like a design publication than a store
Toteme
Same split-screen hero composition with edge-to-edge photography, centered wordmark navigation, and a single serif typeface carrying the entire brand voice
Bottega Veneta
Same luxury restraint: warm neutral canvas, pill-shaped outlined CTAs, oversized decorative typography elements, and a palette drawn entirely from natural pigments with no neon or synthetic hues
Maison Margiela
Same print-catalog aesthetic with monospace micro-labels, editorial section headings mixing roman and italic, and a design that prioritizes art direction over e-commerce conventions
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
