Bone Canvas
#fefcf8Primary page background — warm off-white, the entire site sits on this paper-like canvas rather than pure white
Adam Lippes
adamlippes.com
Website preview
The design language
Adam Lippes is a monochrome editorial atelier built on cream paper (#fefcf8) with Optima typography and full-bleed fashion photography. The interface is deliberately restrained: zero chromatic accents, zero decorative gradients, near-zero corner radii — the photographic plate IS the design. Product imagery carries all visual weight inside a dense five-column grid; UI chrome recedes behind hairline rules and uppercase tracked nav. Buttons are stark black fills or ghost outlines against the warm canvas, and the only tonal shifts between pages come from the photography itself, never from UI chroma.
Color palette
neutral
Press White
#ffffffAlternate surface for product cards, input fields, and crisp overlays that need to separate from Bone Canvas
Onyx Black
#000000Primary text, hairline rules, filled action buttons, icon strokes, and nav borders. The structural ink of the system
Graphite
#403f3eSecondary text and icon color — a softened black for less critical copy and outline button borders
Carbon
#121212Deep alt-black for button borders, dark badges, and high-contrast text on white surfaces where pure black feels too harsh
Iron
#1d1d1dButton border accent — a near-black used for refined button outlines
Slate
#2f2f2fBadge and secondary text — sits between Graphite and Carbon for mid-emphasis labels
Stone
#4c4c4aBody text secondary and subtle borders — warm-leaning gray that pairs with the cream canvas without going cold
Ash
#b2b0aeLight neutral action fill for buttons on dark surfaces.
Typography
Type scale
Major Second (1.125) · 16px baseheading
24px · 400 · 1.2 · 0.74px trackingThe quick brown fox jumps
text-16
16px · 400 · 1.8The quick brown fox jumps
body
14px · 400 · 1.4 · 0.43px trackingThe quick brown fox jumps
text-13
13px · 400 · 1.2The quick brown fox jumps
text-12
12px · 400 · 1.3The quick brown fox jumps
text-11
11px · 400 · 1.7The quick brown fox jumps
caption
10px · 400 · 1.2 · 0.31px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Optima
- Weights
- 400
- Sizes
- 10, 11, 12, 13, 14, 16, 24px
- Line height
- 1.20–1.50 depending on size
- Letter spacing
- 0.0310em at body sizes, 0.0640em on uppercase nav and button labels
- Fallback
- Avenir Next, Futura PT, or ITC Avant Garde Gothic
Primary typeface across all UI — nav, buttons, body, headings. Optima's humanist flares and geometric curves carry the brand's editorial luxury; its narrow proportions let dense 5-column product grids breathe without feeling cramped. Nav and button text is uppercase at 11–12px with wide tracking (0.0640em); body sits at 14px, larger body/links at 16px, subheadings at 24px.
Additional typeface
Arial
- Weights
- 400
- Sizes
- 13px
- Line height
- 1.20
- Letter spacing
- normal
- Fallback
- Helvetica, Inter
System fallback used sparingly for button and icon labels when Optima is unavailable — do not introduce as a primary face.
Additional typeface
GTStandard-M
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.5
GTStandard-M — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1440px
- Section gap
- 48px
- Card padding
- 16px
- Element gap
- 10px
Border radius
cards
0pxpills
1000pxbadges
40pxbuttons
0pxSpacing scale
1px2px3px5px6px8px9px10px12px13px14px15px16px17px20px24px26px30px32px40px50px60pxGuidelines
Do
- Use Onyx Black (#000000) as the only fill for primary action buttons; pair with Press White text and 12px Optima uppercase at 0.0640em tracking.
- Set page background to Bone Canvas (#fefcf8), never pure white — the warm off-white is the system's identity.
- Use 0px corner radius on all product cards, buttons, and section dividers; the only rounded elements are badges (40px) and the legacy pill button (1000px).
- Render nav and button labels in uppercase Optima at 11–12px with letter-spacing 0.0640em; this tracking is what makes the interface read as editorial rather than utilitarian.
- Use 1px Onyx Black hairlines as the primary structural divider in place of cards or boxes.
- Maintain a 5-column product grid with 10px element gap and 16px card padding; keep product names lowercase in Optima 14px.
- Keep all UI chrome flat and monochrome; let photography provide every color and visual interest.
Don’t
- Do not introduce any chromatic color, gradient, or accent hue — the system is intentionally 0% colorful.
- Do not use rounded corners on product cards, category banners, or section dividers — sharp edges are non-negotiable.
- Do not add drop shadows to product cards, buttons, or images; shadows are reserved for the nav and one promo card.
- Do not use a sans-serif replacement font for body or nav; Optima (or Avenir Next as substitute) is the brand voice.
- Do not break the cream-on-black inversion; dark sections must be full-bleed photography, never solid color blocks.
- Do not use color, weight, or size alone to indicate state; pair with an underline, border, or tracking change.
- Do not use emoji, icons with color, or decorative illustrations — the only iconography is monochrome line glyphs (account, cart, search, arrows).
Components
Top Navigation Bar
Site-wide navigation with centered wordmarkFull-width, white background, 1px Onyx Black hairline bottom border, subtle rgba(0,0,0,0.05) 0 4px 5px shadow. Left side: 5 uppercase nav links in Optima 11px, weight 400, letter-spacing 0.0640em, color Onyx Black. Center: ADAM LIPPES wordmark in Optima, uppercase, tracking 0.0640em, 2-line stacked. Right: SEARCH label, account icon, cart icon with circular count badge. Total height ~60px, z-index fixed.
Filled Action Button — Onyx
Primary CTA (Shop Now, View All)Solid Onyx Black (#000000) background, Press White (#ffffff) text, Optima 12px uppercase, letter-spacing 0.0640em, weight 400. Padding 12px 20px. Radius 0px (sharp corners — editorial). No shadow. Hover: invert to white bg / black border / black text.
Ghost Button
Secondary or low-emphasis actionTransparent or Bone Canvas background, 1px Onyx Black border, Onyx Black text, Optima 12px uppercase, letter-spacing 0.0640em. Same padding and sharp corners as filled variant.
Hero Overlay Text Block
Headline + subtext + CTA on full-bleed editorial imagerySits in the left third of a full-bleed image. Heading in Optima 24px, weight 400, Onyx Black, letter-spacing ~0.74px. Subtext in Optima 14px, Stone (#4c4c4a). CTA is a filled Onyx button. Left-aligned, vertically centered to the model or composition.
Product Card
Individual SKU in the 5-column product gridWhite or transparent background, no border, 0px radius. Product image on white seamless background, no frame. Below image: product name (e.g. 'anais top') in Optima 14px Onyx Black lowercase, price right-aligned ('€1.470,95') in Optima 14px. Below: small horizontal color swatches (8×8px squares with 1px Onyx Black border, 5px gap). Optional hairline underline indicator for promotional items. Card padding 16px. No hover lift — only subtle image zoom or text underline.
Category Banner Card
Editorial section promo (Spring Knitwear, Seasonal Dresses)Two-column layout, each card full-bleed cropped model photo, text overlay in left third. Heading in Optima 24px Onyx Black. Subtext in Optima 14px Stone. CTA is filled Onyx button. No card border or background — the photo is the card.
Circular Carousel Arrow
Pagination control on product grid24×24px circle, Stone (#b2b0ae) fill, small black arrow icon centered. No border, no shadow. Sits at the vertical midpoint of the product row.
Cart Count Badge
Numeric indicator on the cart icon in navSmall circular badge, Onyx Black background, white numeral inside, ~16px diameter. Top-right corner of the cart icon.
Color Swatch
Product variant color indicator8×8px square, no radius, 1px Onyx Black border. Sits in a horizontal row under the product card with 5px gaps. Active swatch gets a slightly heavier border or filled interior.
Email Signup Bar
Footer promotional stripFull-width, Bone Canvas background, 1px Onyx Black hairline top border. Single line: 'Sign up for emails and save 10% on your first purchase' in Optima 12–14px Onyx Black left-aligned, with a + icon (expand) on the far right. Padding 16px vertical.
Text Link
Inline navigation or action linkOptima 16px Onyx Black, no underline by default, underline on hover. Lowercase. Used for product names, footer links.
Promo Hairline Rule
Section divider and emphasis marker1px Onyx Black horizontal line, used to separate product cards, section headers, and the nav. The system's primary structural divider — replaces cards and boxes.
Surfaces & elevation
Level 0
Bone Canvas
#fefcf8Primary page background — the entire site rests on this warm off-white.
Level 1
Press White
#ffffffProduct card backgrounds, input fields, and overlays that need a slightly brighter separation from the canvas.
Elevation is a whisper, not a shout. Shadows are used only where strictly necessary — a barely-there drop under the nav, a single soft card lift — because the design philosophy treats photography as the only element allowed to project off the page. UI chrome stays flat against the cream canvas.
Top navigation bar
rgba(0, 0, 0, 0.05) 0px 4px 5px 0px
Promo card
rgba(0, 0, 0, 0.15) 0px -8px 24px 0px
Layout & imagery
Layout
Full-bleed editorial layout with no fixed background containers. Navigation is a single fixed white bar at the top with a hairline bottom border. The hero is a full-viewport split: large model photograph right, text overlay block left over a separate concrete-textured panel. Below, a 5-column product grid spans the full page width with no gutters between cards — just hairline rules and product metadata. Two-column category banners follow (Spring Knitwear, Seasonal Dresses) at full width, each a single photo with left-aligned text overlay. The footer is a single full-width hairline-bordered strip with the email signup. Content max-width is ~1440px but hero, category banners, and product grid are all edge-to-edge. Vertical rhythm is compact: 48px between major sections, 10px between metadata rows, no dramatic whitespace.
Imagery
Editorial fashion photography dominates every screen. Hero and category banners use full-bleed models photographed against concrete, plaster, or warm neutral architectural backdrops — high-key lighting, editorial crop, tight framing on garments. Product grid images are clean white-seamless studio shots with no model, no shadow, no props — the object alone on a white field. All photography is desaturated toward warm gray, matching the cream canvas. Iconography is minimal: monochrome line icons for account, cart, search, and carousel arrows, no color fills.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 (Onyx Black) - background: #fefcf8 (Bone Canvas) - surface: #ffffff (Press White) - border: #000000 (Onyx Black, 1px hairline) - accent: none (no chromatic accent in the system) - primary action: #000000 (filled action) **Example Component Prompts** 1. *Create a product card*: white seamless background image at full card width, no border, 0px radius. Below: product name in Optima 14px lowercase #000000 left-aligned, price in Optima 14px #000000 right-aligned, 10px row gap. Underneath: row of 8×8px color swatches with 1px #000000 border, 5px gap. Total card padding 16px. No shadow, no hover lift. 2. *Create a filled action button*: #000000 background, #ffffff text, Optima 12px uppercase, letter-spacing 0.0640em, weight 400. Padding 12px 20px. Radius 0px. No shadow. 3. *Create a hero overlay block*: left third of a full-bleed editorial image. Heading in Optima 24px #000000 letter-spacing 0.74px. Subtext in Optima 14px #4c4c4a. Filled #000000 button with white uppercase text, 0px radius, 12px 20px padding. Vertically centered. 4. *Create a category banner card*: full-bleed cropped model photo, no border or background. Text overlay in left third: heading Optima 24px #000000, subtext Optima 14px #4c4c4a, filled #000000 button below. Text vertically centered. 5. *Create a top nav bar*: full width, #ffffff background, 1px #000000 bottom border, subtle rgba(0,0,0,0.05) 0 4px 5px shadow. Left: 5 uppercase Optima 11px nav links at 0.0640em tracking, #000000. Center: stacked 'ADAM' / 'LIPPES' wordmark in Optima uppercase. Right: 'SEARCH' label, account icon, cart icon with small #000000 circular count badge.
Photography Direction
Photography is a design token. Hero and category imagery is shot against concrete, plaster, and warm architectural surfaces with high-key directional lighting. Models are framed tight to the garment — often waist-up — with neutral expressions. Product-only images use a white seamless background with no props, no shadow, and a straight-on or three-quarter view. The overall photographic palette desaturates toward warm gray, so it harmonizes with Bone Canvas (#fefcf8) and never introduces competing chroma. Any page built with this system must commission or select photography in this register; the layout cannot save the system from off-brand imagery.
Similar brands
The Row
Same monochrome editorial restraint — cream canvas, uppercase tracked nav, product photography as the only color, sharp-cornered product cards.
Khaite
Same luxury-fashion 5-column product grid, dense hairline dividers, and stark black CTA buttons on warm off-white backgrounds.
Toteme
Same quiet-luxury approach: minimal nav chrome, serif-adjacent display typography, full-bleed editorial imagery with monochrome product grids.
Jil Sander
Same minimalist fashion house identity — uppercase tracked wordmark, product-first layout, zero decorative UI elements, photography carries the brand.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
