---
title: "Adam Lippes design system"
variant: extended
source: https://adamlippes.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/adamlippes-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Adam Lippes · Design System

> Quiet luxury, framed as a fashion editorial

**Theme:** light · **Industry:** fashion · **Source:** https://adamlippes.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Adam Lippes presents a luxury fashion homepage built around expansive seasonal campaign imagery and restrained product discovery. A warm ivory canvas, black Optima typography, and sparse interface details keep the clothing and photography in focus.

## North star

Let large, art-directed fashion photography lead, and keep every interface element quiet against warm ivory and black.

## Overview

The page uses a warm off-white canvas (#fefcf8) as a quiet frame for nearly edge-to-edge campaign photography. Black (#000000) carries the navigation, headings, and most text; pale stone surfaces and hairlines (#e4e2df) provide subtle separation, while the measured blue accent (#0000ee) is limited and should not be mistaken for a defining visual motif. Optima is used throughout at regular weight, giving labels and headings a refined, softly classical character without heavy typographic contrast. The layout alternates full-bleed campaign moments with paired editorial tiles and compact horizontal product carousels. Text overlays sit directly on photography, centered on hero campaigns and aligned to the left in the paired feature area. Generous image areas contrast with dense, low-profile product and footer details. Buttons are simple dark or ivory rectangles with restrained type; borders, shadows, and decorative UI remain minimal so the imagery supplies most of the color and texture.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Runway Ink | `#000000` | `--color-runway-ink` | brand | Primary navigation, headlines, product labels, footer links, and the dark hero Shop Now button. |
| Warm Ivory | `#fefcf8` | `--color-warm-ivory` | brand | Page canvas and light button fill; also appears as light text over campaign images. |
| Soft Stone | `#e4e2df` | `--color-soft-stone` | surface | Subtle section surfaces and the dominant hairline border color between interface elements. |
| Muted Greige | `#cdcbc8` | `--color-muted-greige` | surface | Measured media surface tone; supporting neutral rather than a defining brand color. |
| Link Blue | `#0000ee` | `--color-link-blue` | accent | Measured link accent seen sparingly in crawler data; not a prominent color in the screenshots. |
| Soft Black | `#121212` | `--color-soft-black` | semantic | Near-black button text and minor text details, visually close to the main ink. |

### Semantic aliases

`--color-canvas` → `#fefcf8` (Warm Ivory) · `--color-surface` → `#e4e2df` (Soft Stone) · `--color-surface-2` → `#cdcbc8` (Muted Greige) · `--color-text` → `#000000` (Runway Ink) · `--color-text-muted` → `#fefcf8` (Warm Ivory) · `--color-border` → `#e4e2df` (Soft Stone) · `--color-accent` → `#0000ee` (Link Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fefcf8` | 20.49:1 | AAA |
| `#000000` | `#e4e2df` | 16.24:1 | AAA |
| `#000000` | `#cdcbc8` | 12.97:1 | AAA |
| `#fefcf8` | `#e4e2df` | 1.26:1 | fail |
| `#fefcf8` | `#cdcbc8` | 1.58:1 | fail |
| `#0000ee` | `#fefcf8` | 9.17:1 | AAA |
| `#0000ee` | `#e4e2df` | 7.27:1 | AAA |
| `#0000ee` | `#cdcbc8` | 5.81:1 | AA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Optima | `--font-body` | webfont | 400 | Site-wide headings, body copy, navigation, product labels, captions, links, and buttons. | Cormorant Garamond |

- **Optima:** Regular weight throughout; restrained title case or uppercase navigation, with no measured letter spacing.

### Type scale — Perfect Fifth (ratio ≈ 1.5, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 400 | 1.4 | 0 | — | Optima | Campaign hero headings, centered over full-bleed imagery. |
| body | 16px | 400 | 1 | 0 | — | Optima | Campaign supporting copy and general page text. |
| caption | 12px | 400 | 1.3 | 0 | — | Optima | Compact product names, prices, and small supporting labels. |
| button | 14px | 400 | 1.2 | 0 | — | Optima | Shop Now and Shop Knitwear calls to action. |
| nav | 14px | 400 | 1.3 | 0 | — | Optima | Primary category navigation and compact menu links. |
| link | 12px | 400 | 1.3 | 0 | — | Optima | Product links and secondary calls to action. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 1, 2, 5, 6, 8, 10, 12, 15, 16, 20, 30, 32 px.
- Section rhythm 32px · element gap 8px · card padding — · max content width 1400px.

The page follows a long, vertically scrolling storefront structure on a warm ivory canvas, with a measured maximum content width of 1400px. A slim header leads into large full-bleed hero campaigns, alternating with a two-column editorial feature and horizontal product carousels. Campaign copy is centered over most full-width imagery, while paired feature headings align left. Section rhythm is image-led and spacious, with compact product details and a dense multi-column footer. The measured spacing system is compact internally, so preserve the clear contrast between large media bands and small interface labels.

## Shape & elevation

- Radius: button `50%` · nav `50%`
- Shadow `sm` (nav): `rgba(0, 0, 0, 0.05) 0px 4px 5px 0px`
- Motion: standard transition `0.1s ease` on interactive elements.

The page reads as largely flat: no prominent card shadows or raised panels. Fine pale borders separate selected interface areas, while imagery creates the main sense of depth through its composition and lighting. Keep overlays limited to campaign copy and simple calls to action; the measured navigation shadow is subtle.

## Imagery

Use polished luxury fashion photography as the primary visual material: full-frame seasonal campaign images, model-led editorial tiles, and isolated product images in carousels. Cropping is confident and immersive, often showing models at large scale with campaign text overlaid directly on the image. Keep image color and texture natural; avoid filters, illustrations, or decorative graphics that compete with the garments.

## Components

### Slim global navigation

Warm ivory header with centered Adam Lippes wordmark, left-aligned category links, and compact search, account, and bag controls.

### Campaign hero

Full-bleed fashion image with centered Optima title and supporting line; place a simple dark Shop Now button beneath.

### Editorial feature pair

Two side-by-side fashion image tiles with left-aligned copy and restrained Shop Knitwear or Shop Now links.

### Campaign feature

Large seasonal image section with centered title and short descriptive line layered directly over the photography.

### Horizontal product carousel

Compact row of isolated garment images with small product names and prices; use subtle controls and minimal decoration.

### Light CTA button

Plain ivory rectangular button with black or near-black Optima text, used over imagery where a dark button is not appropriate.

### Multi-column footer

Compact columns of store, service, and social links alongside a currency selector and newsletter email form.

### Measured component styles

- **Primary button** (“Skip to content”): background #000000 · text #fefcf8 · radius 0px · padding 0px 30px · 400 14px Optima
- **Secondary button** (“Shop Now”): background #fefcf6 · text #000000 · radius 0px · padding 0px 30px · 400 14px Optima
- **Link** (“joan top”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Optima
- **Input**: transparent background · text #000000 · radius 0px · padding 0px 98px 0px 0px · 400 12px Optima
- **Navigation item** (“NEW ARRIVALS READY-TO-WEAR Denim Dresses”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Optima

## Do

- Use #fefcf8 as the dominant page canvas.
- Set navigation and primary text in #000000.
- Give campaign photography generous, prominent space.
- Keep Optima-like typography regular and understated.
- Alternate full-bleed campaigns with concise product rows.
- Place campaign copy directly over imagery with clear contrast.

## Don't

- Do not introduce bright colors as a major interface theme.
- Do not add heavy borders, shadows, or raised card treatments.
- Do not let product metadata outweigh the imagery.
- Do not use bold, oversized interface typography.
- Do not add decorative gradients or prominent graphic motifs.
- Do not turn the campaign sections into boxed panels.

## Agent prompt

Build a new luxury fashion storefront page in the Adam Lippes visual style. Use Warm Ivory (#fefcf8) for the main canvas and Runway Ink (#000000) for navigation, headings, product labels, and primary actions. Use Soft Stone (#e4e2df) only for quiet separators; Link Blue (#0000ee) is measured but should remain unobtrusive. Use an Optima-like regular typeface, with understated labels and no heavy weight contrast. Organize the page as a slim centered-logo header, expansive model-led campaign imagery with concise overlay copy, paired editorial tiles, and horizontal product carousels with compact names and prices. Keep buttons rectangular and plain, selecting dark or ivory fills for image contrast. Finish with a restrained multi-column footer and newsletter form. Preserve whitespace around text, keep photography in control, and avoid prominent shadows or card framing.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed two-image campaign with centered overlay copy and a dark CTA. | campaign message, primary shop CTA | edge-to-edge photography, centered text overlay, dark rectangular button |
| 2 | video | Full-width collaboration campaign with image and video media. | collaboration discovery, Shop Now CTA | full-bleed media, centered overlay, light button |
| 3 | feature-grid | Two editorial image tiles side by side, with left-aligned text. | category discovery, tile-level shopping links | paired photography, left-aligned copy, minimal CTAs |
| 4 | hero | Full-bleed seasonal campaign image with centered text overlay. | seasonal collection discovery, Shop Now CTA | large campaign image, centered overlay copy |
| 5 | product-grid | Horizontal multi-item product carousel with small names and prices. | browse products, carousel navigation | isolated garment imagery, compact captions, subtle controls |
| 6 | video | Full-width evening campaign media with centered overlay text. | eveningwear discovery, Shop Now CTA | full-bleed video imagery, centered copy, light button |
| 7 | product-grid | Horizontal product carousel with isolated garments and compact captions. | product browsing, carousel navigation | product cutouts, small price labels, minimal controls |
| 8 | footer | Compact multi-column footer with links, locale controls, and newsletter form. | newsletter signup, service navigation, locale selection | multi-column links, email field, minimal separators |

## Source CSS custom properties (selected)

```css
--color-background: 0,0,0;
--gradient-background: #000000;
--color-foreground: 255,255,255;
--color-prescroll: 255,255,255;
--color-background-contrast: 128,128,128;
--color-shadow: 254,252,246;
--color-button: 254,252,246;
--color-button-text: 18,18,18;
--color-secondary-button: 0,0,0;
--color-secondary-button-text: 254,252,246;
--color-link: 254,252,246;
--color-badge-foreground: 255,255,255;
--color-badge-background: 0,0,0;
--color-badge-border: 255,255,255;
--payment-terms-background-color: rgb(0 0 0);
--font-body-family: 'Optima', sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-family: 'Optima', sans-serif;
--font-heading-style: normal;
--font-heading-weight: 400;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--media-border-opacity: 0.05;
--media-border-width: 1px;
--media-radius: 0px;
--media-shadow-opacity: 0.0;
--media-shadow-horizontal-offset: 0px;
--media-shadow-vertical-offset: 4px;
--media-shadow-blur-radius: 5px;
--media-shadow-visible: 0;
--product-card-corner-radius: 0.0rem;
--product-card-text-alignment: left;
--product-card-border-width: 0.0rem;
--product-card-border-opacity: 0.1;
--product-card-shadow-opacity: 0.0;
--product-card-shadow-visible: 0;
--product-card-shadow-horizontal-offset: 0.0rem;
--product-card-shadow-vertical-offset: 0.4rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/adamlippes-com