Ink
#121212Primary text, nav links, button labels, footer copy — the near-black (not pure) gives the page a slightly warmer, printed feel rather than a screen feel
Maisonmargiela
maisonmargiela.comWebsite preview
The design language
Maison Margiela operates on a radical editorial restraint: the interface is nearly invisible so that photography and product carry the entire experience. The palette is 100% achromatic — no chromatic accent exists anywhere in the system — using a near-black ink (#121212) against warm off-whites (#f7f7f2, #eaeae6) and pure white (#ffffff) to evoke gallery walls and atelier surfaces. Typography is custom and whispered, never shouted: Margiela Sans at low weights with extreme letter-spacing on small uppercase labels, and Margiela Serif with hairline negative tracking for the wordmark and editorial captions. Surfaces are flat, shadowless, and borderless; hierarchy is created by typographic scale and whitespace, not chrome. Components feel like printed matter — announcement strips, centered nav, full-bleed image plates, and tiny ghost text-links — not software.
Color palette
neutral
Paper
#ffffffPage canvas, input fills, button text on dark — the clean base against which warm off-white sections layer
Atelier White
#f7f7f2Light supporting surface for subtle backgrounds and section separation.
Linen
#eaeae6Deeper warm neutral for tertiary sections, input borders, subtle dividers — sits one step below Atelier White in the surface stack
Stone
#898989Supporting neutral for secondary UI, dividers, and muted labels.
Graphite
#484847Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Pebble
#bababaInput field borders, form field outlines, subtle structural dividers
Smoke
#818181Disabled button text and inactive state labels
Charcoal
#333333Long-form body text in editorial blocks where the slightly lighter tone than Ink reduces visual weight over long reads
Pure Black
#000000SVG icon fills, logo lockup, strict black-tone elements where maximum contrast is required
Typography
Type scale
Minor Third (1.2) · 16px baseserif-heading
20px · 400 · 1.3 · -0.08px trackingThe quick brown fox jumps
serif-heading-sm
18px · 400 · 1.3 · -0.07px trackingThe quick brown fox jumps
text-16
16px · 400 · 1.5The quick brown fox jumps
text-15
15px · 700 · 1The quick brown fox jumps
serif-body
14px · 500 · 1.4 · -0.06px trackingThe quick brown fox jumps
text-13
13px · 400 · 1The quick brown fox jumps
eyebrow
12px · 500 · 1.4 · 0.8px trackingThe quick brown fox jumps
text-11
11px · 700 · 1The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Margiela Sans
- Weights
- 375, 400, 475, 500, 600, 700
- Sizes
- 8, 10, 11, 12, 13, 14, 15, 16
- Line height
- 1.00, 1.20, 1.40, 1.50, 1.60
- Letter spacing
- 0.0070em, 0.0100em, 0.0670em, 0.0770em, 0.0910em, 0.1250em
- Fallback
- Inter or Neue Haas Grotesk with letter-spacing adjusted per size
All UI text, navigation, buttons, labels, captions. The custom sans is the structural voice of the system. Weights 375-500 handle body and nav; 600-700 appear in micro-labels at the upper edge. The extreme letter-spacing (0.067-0.125em) applied to the smaller sizes is a signature choice — uppercase micro-text at 8-12px breathes like engraved metalwork rather than digital UI. The narrow weight range (no display-weight condensation) means type never yells; hierarchy comes from tracking and size, not boldness.
Additional typeface
Margiela Serif
- Weights
- 400
- Sizes
- 14, 18, 20
- Line height
- 1.30, 1.40
- Letter spacing
- -0.0040em, -0.0020em
- Fallback
- Cormorant Garamond or Adobe Caslon Pro at weight 400 with negative tracking
The wordmark 'Maison Margiela Paris', editorial pull-quotes, product name captions, and serif body in select sections. Single weight (400) only, with hairline negative tracking (-0.004 to -0.002em) that makes the serif feel drawn rather than typeset. It appears sparingly — when it does, it signals a shift from UI to editorial register.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Section gap
- 80-120px
- Card padding
- 16-24px
- Element gap
- 16px
Border radius
cards
0pximages
0pxinputs
9999pxbuttons
0pxSpacing scale
3px4px5px6px8px12px15px16px17px20px28px32px35px40px48px64px98px156px178pxGuidelines
Do
- Use Margiela Sans for all UI, navigation, buttons, labels, and captions — the system has no second sans family
- Apply uppercase + letter-spacing 0.067-0.125em to all text at 12px and below to create the engraved-label feel
- Build hierarchy through size, tracking, and weight — never through color, borders, or shadows, which are absent from the system
- Let full-bleed photography carry the visual weight; the UI must remain a thin whisper around it
- Use only ghost text-links as actions — there is no filled or outlined button variant in this system
- Reach for Margiela Serif 14-20px only at moments that demand an editorial register: the wordmark, product name captions, pull-quotes
- Use the three-surface stack (#ffffff → #f7f7f2 → #eaeae6) to create depth instead of shadows or borders
Don’t
- Do not introduce any chromatic color — the palette is 100% achromatic; adding accent hues breaks the gallery-wall discipline
- Do not use border-radius on any component other than pill inputs (9999px); cards, images, buttons, and tiles must have 0px radius
- Do not apply box-shadow to any element; depth comes from surface color and whitespace alone
- Do not create a filled or outlined button variant — all actions are ghost text-links in Ink
- Do not set body text below 13px or above 16px without moving to the Serif family; the sans scale is tightly bounded
- Do not use bold (weight 700) for long-form text; reserve heavier weights for short uppercase labels where tracking does the work
- Do not use pure #000000 for body text or links — Ink #121212 is the text color throughout; pure black is reserved for SVG icon fills
Components
Announcement Bar
Site-wide top stripFull-bleed horizontal band, Atelier White (#f7f7f2) background, Ink (#121212) text. Content is a single line of Margiela Sans 12px, weight 400, letter-spacing 0.8px, centered or left-aligned with a close (×) icon flush right. Height ≈ 40px. No border, no shadow.
Primary Navigation
Main site navigationWhite background, no border, no shadow. Three-zone layout: left cluster (category links), center (wordmark logo), right cluster (utility links + icons). Links are Margiela Sans 12-13px, weight 400, letter-spacing 0.8-0.85px, uppercase, Ink color with no underline. Vertical padding 16-20px. The wordmark is Margiela Serif 14-18px centered.
Ghost Text Link
Inline and standalone text actionInk (#121212) Margiela Sans 12px, weight 500-600, letter-spacing 0.8px, uppercase. No background, no border, no underline at rest. Underline appears on hover, 1px from baseline. Padding 0. This is the primary CTA pattern — there is no filled button anywhere in the system.
Hero Image Plate
Full-bleed editorial heroFull-viewport-width image with no border, no radius, no overlay. Caption block (product name in Margiela Serif 18-20px + ghost CTA 'DESCUBRA MÁS' in uppercase sans) sits bottom-center or bottom-left, white text on the image, 32-48px above bottom edge. Aspect ratio follows image source, not a fixed ratio.
Pill Input Field
Form input, search fieldFully rounded (9999px radius), 1px border in Pebble (#bababa) or Linen (#eaeae6), background Paper (#ffffff) or transparent. Text in Margiela Sans 13-14px Ink, placeholder in Stone (#898989). Padding 12px 20px. Focus state: border darkens to Ink (#121212), no glow ring.
Tab Pair Link
Binary navigation between paired destinationsTwo ghost text links side by side, separated by 24-32px gap, same uppercase Margiela Sans 12px style. Example: MUJER / HOMBRE. Active state: Ink color and optional 1px underline; inactive: Stone (#898989). No background fill, no pill, no border.
Utility Icon Button
Search, account, wishlist, cart in navIcon-only, 16-20px SVG in Ink (#121212) or Pure Black (#000000), no background, no border, no padding beyond the icon hit area. Label appears as uppercase Margiela Sans 12px text to the left of icon for nav text-links; icons are naked in the right cluster.
Editorial Caption Block
Image caption / product name labelCentered or left-aligned text overlay on imagery. Product name in Margiela Serif 18-20px weight 400, letter-spacing -0.08px, white. Followed by ghost text CTA in Margiela Sans 12px uppercase, white, 16px below. No background, no backdrop blur.
Product Tile (implied)
Product listing cellSquare or portrait image flush to grid, no card chrome. Product name and price in Margiela Sans 13-14px, Ink, 12-16px below image, left-aligned. No border, no radius, no shadow. Grid cells butt directly against neighbors or sit on Linen background with 16-20px gutters.
Section Divider (implicit)
Vertical rhythm between editorial sectionsNo visible divider line. Sections are separated by 80-120px vertical whitespace and/or a surface color shift from Paper to Atelier White. The page reads as a continuous scroll, not a series of boxed blocks.
Footer
Site footerAtelier White (#f7f7f2) or Paper background, flush to viewport edges. Columns of Margiela Sans 12-13px uppercase links in Ink, 24-32px between columns, 16px between links within a column. Wordmark repeated at top in Margiela Serif. No background blocks, no social icon backgrounds, no newsletter card.
Surfaces & elevation
Level 1
Canvas
#ffffffPage base, announcement bar, full-bleed image plates behind white-text overlays
Level 2
Atelier White
#f7f7f2Warm off-white for secondary sections, product detail backgrounds, cart drawer, editorial blocks
Level 3
Linen
#eaeae6Tertiary surface for nested elements, input fills, subtle banded sections
Shadows are absent from this system. Depth and separation are achieved through surface color shifts (white → f7f7f2 → eaeae6) and the natural contrast of full-bleed photography. Components never float — they sit flush on the page like prints on paper.
Layout & imagery
Layout
Full-bleed, edge-to-edge layout with no max-width container — photography and sections span the full viewport. The nav is a single horizontal row with a centered wordmark and flanking link clusters. Hero is a single full-viewport image plate with a small bottom caption block. Below the fold, sections alternate between full-bleed photography plates and narrow centered text blocks (Margiela Serif captions and ghost CTAs). No card grids, no multi-column product tables, no sidebar layouts — the page is a vertical scroll of image + caption + link, one section at a time. Vertical rhythm is generous (80-120px section gaps) to mimic a printed lookbook rather than a catalog.
Imagery
Imagery is editorial fashion photography: full-bleed, no crops, no rounded corners, no frames. Subjects are products (a black patent Tabi pump on translucent vinyl) and models in conceptual styling (denim jacket against draped industrial sheeting) with desaturated, cool, slightly muted color grading. The photography carries slight coolness and grain that complements the warm off-white surfaces. Logos, badges, illustrations, and icons-only screens are absent — the system does not draw, it photographs. Image density is high in the hero, then gives way to near-text-only editorial sections.
Design notes
Agent Guide
Quick Color Reference: - text: #121212 (Ink) - background: #ffffff (Paper) - secondary background: #f7f7f2 (Atelier White) - border: #bababa (Pebble) or #eaeae6 (Linen) - muted text: #898989 (Stone) - primary action: no distinct CTA color Example Component Prompts: 1. Create a top navigation bar: white (#ffffff) background, no border, no shadow, vertical padding 18px. Three zones — left links (Mujer, Hombre, Unisex, Sobre nosotros, Residencias), center wordmark in Margiela Serif 18px, right links (Buscar, Cuenta, Lista de deseos, Cesta). All links in Margiela Sans 12px weight 400, letter-spacing 0.8px, uppercase, #121212. Hit area includes 12px horizontal padding around text. 2. Create a full-bleed hero image plate: viewport-width image with no border and no radius, aspect ratio determined by source. Bottom-center caption block, 48px above bottom edge: product name in Margiela Serif 20px #ffffff, letter-spacing -0.08px; below it 16px gap, a ghost text-link 'DESCUBRA MÁS' in Margiela Sans 12px weight 500, uppercase, #ffffff, letter-spacing 0.8px, with no background or border. 3. Create a tab pair: two ghost text-links 'MUJER' and 'HOMBRE' side by side, 24px gap, both in Margiela Sans 12px weight 600 uppercase, letter-spacing 0.8px. Active tab in #121212 with 1px underline; inactive tab in #898989 with no underline. No background fill, no border, no pill shape. 4. Create a pill search input: 9999px border-radius, 1px border in #bababa, background #ffffff, padding 12px 20px, Margiela Sans 14px #121212 text, placeholder in #898989. On focus, border becomes #121212; no box-shadow or glow ring. 5. Create a footer: background #f7f7f2, flush to viewport edges, no border, no shadow. Top row: Margiela Serif 18px wordmark centered. Below: 3-4 columns of Margiela Sans 12px weight 400 uppercase #121212 links, 24-32px between columns, 16px between rows. No newsletter card, no social icon backgrounds.
Type Behavior Notes
The Margiela Sans letter-spacing pattern is size-dependent and inverts the usual web convention: smaller sizes get wider tracking, larger sizes get tighter (or normal) tracking. Micro text at 8px carries 0.125em (1px) tracking because at that size the letters would otherwise merge. Body text at 14px carries only 0.01em — a hair of breathing room. This means the system never looks 'stamped' at body sizes, but reads as engraved metalwork at caption sizes. The Serif runs the opposite direction with -0.002 to -0.004em, pulling the wordmark and editorial captions into a tight, drawn quality.
Editorial Tone
The entire system is an exercise in restraint as luxury signal. There is no accent color, no gradient, no drop shadow, no rounded card, no filled button, no icon badge, no progress indicator chrome, no celebratory animation language. The interface earns trust by disappearing. Every page should feel like turning a page in a printed lookbook — generous whitespace, a single image or sentence, a whispered invitation to 'DESCUBRA MÁS' (discover more). An AI agent building new pages should resist the urge to add UI density; the system's confidence comes from how little it shows.
Similar brands
The Row
Same editorial restraint — near-invisible UI, achromatic palette, uppercase tracked nav, full-bleed photography as the primary visual element
Aesop
Custom serif wordmark, warm off-white surfaces, no chromatic accent, ghost text-link actions, and a literary tone that treats the page as editorial
Bottega Veneta
Full-bleed high-fashion imagery, centered wordmark, uppercase tracked nav, warm neutral canvas — the same 'the product is the only color' philosophy
Jil Sander
Achromatic palette, generous whitespace, sans-serif micro-labels, and the same reductive design discipline that strips UI to its essential surfaces
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
