---
title: "Emma Lewisham — Skincare Store design system"
variant: extended
source: https://emmalewisham.com/en-us?shpxid=0971d560-2072-4df4-8dc7-b3fbdf44aeb5
captured_at: 2026-10-12
theme: light
industry: beauty
generator: Design DNA (https://four.wiralomi.com/style/emmalewisham-co-uk)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Emma Lewisham — Skincare Store · Design System

> Quiet luxury, expressed through space and restraint

**Theme:** light · **Industry:** beauty · **Source:** https://emmalewisham.com/en-us?shpxid=0971d560-2072-4df4-8dc7-b3fbdf44aeb5 · **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._

The page uses a nearly all-white canvas and a restrained announcement strip to create a calm, premium skincare storefront. Refined serif typography and minimal visible navigation give the first viewport a spacious, editorial feel.

## North star

Let generous white space and refined serif typography carry the luxury skincare identity; keep accents and interface chrome restrained.

## Overview

The visual strategy is defined by restraint: a white canvas dominates, while a muted warm-gray announcement band provides the only substantial contrasting area in the captured viewport. White text sits within that band, and the tiny pink cart marker is an incidental accent rather than a basis for the palette. Martina Plantijn supplies the measured text system, giving navigation and announcement copy a literary serif character; keep hierarchy clear through weight and scale rather than decorative effects. The layout places a slim shipping message above an exceptionally open field, with navigation content present but visually subdued in the screenshot. Generous negative space makes the page feel calm and premium instead of crowded. Product imagery is not visible in the supplied viewport, so preserve the quiet framing and avoid adding illustrative decoration. Treat surfaces as flat, with no prominent shadows or visible border system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Dominant page canvas and navigation surface; also used for text against the muted announcement band. |
| Warm Stone | `#bab7b2` | `--color-warm-stone` | surface | Muted inverse surface for the narrow shipping announcement strip at the top of the page. |
| Charcoal Ink | `#333333` | `--color-charcoal-ink` | neutral | Dark button fill measured on the skip-to-content control; not a dominant visible brand surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#bab7b2` (Warm Stone) · `--color-text` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#bab7b2` | 2:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Martina Plantijn | `--font-body` | webfont | 400, 700 | Measured family for body copy, captions, buttons, and navigation. | Cormorant Garamond |

- **Martina Plantijn:** Use measured regular and bold weights; retain natural casing and untracked serif text.

### Type scale — Major Third (ratio ≈ 1.25, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 16px | 400 | 1 | 0 | — | Martina Plantijn | General storefront copy and supporting page text. |
| caption | 14px | 400 | 1.86 | 0 | — | Martina Plantijn | Small supporting labels and compact explanatory text. |
| button | 16px | 700 | 1.38 | 0 | — | Martina Plantijn | Calls to action and functional button labels. |
| nav | 16px | 400 | 1 | 0 | — | Martina Plantijn | Primary navigation and the shipping announcement. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 6, 8, 10, 12, 14, 20, 60 px.
- Section rhythm 60px · element gap 8px · card padding — · max content width 1320px.

The captured page is exceptionally sparse: a narrow, full-width announcement strip sits at the top, followed by a large white field. Measured page max width is 1320px, with a comfortable density and a section gap of 60px. Navigation content is distributed across the header, while the announcement copy is centered. Preserve broad, uninterrupted negative space and use the measured spacing scale rather than introducing arbitrary gaps or a dense grid.

## Shape & elevation

- Radius: nav `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s ease` on interactive elements.

The captured interface is predominantly flat: no measured shadows or gradients define its appearance. The announcement strip is distinguished by its muted fill, not by a visible border or raised-card effect. Keep controls and surfaces visually integrated, using contrast and placement instead of layered elevation.

## Imagery

No meaningful product photography or editorial imagery is visible in the supplied viewport; the page reads primarily as typography and open canvas. The full-page capture remains almost entirely white, so do not invent image treatments or decorative illustrations. Where imagery appears on other parts of the storefront, let product photography feel quiet and considered, with restrained framing that does not compete with the page's whitespace.

## Components

### Shipping announcement

A slim full-width Warm Stone band with centered white serif copy announcing complimentary shipping.

### Primary navigation

A restrained header containing shopping and brand destinations; measured navigation uses Martina Plantijn at regular weight.

### Cart indicator

A small pink circular quantity marker appears near the upper-right area in the screenshot; treat it as a minor functional accent.

### Skip-to-content control

Measured as a Charcoal Ink button with white bold Martina Plantijn text; accessibility utility rather than a prominent visual motif.

### Measured component styles

- **Primary button** (“Skip to Content (Press Enter)”): background #333333 · text #ffffff · radius 0px · padding 5px · 700 16px Martina Plantijn
- **Navigation item** (“Complimentary shipping on all orders Sho”): transparent background · text #49369e · radius 0px · padding 0px · 400 16px Martina Plantijn

## Do

- Keep the page canvas white and visually uninterrupted.
- Use Warm Stone only for the announcement strip.
- Set storefront copy in an elegant serif style.
- Center the announcement message within its band.
- Preserve generous negative space around navigation.
- Keep utility accents small and subordinate.

## Don't

- Do not add saturated colors to the main interface.
- Do not fill the open canvas with invented content.
- Do not introduce heavy shadows or gradients.
- Do not make navigation visually dense.
- Do not treat illustration-only colors as core brand colors.
- Do not use oversized decorative interface elements.

## Agent prompt

Build a new page in Emma Lewisham's restrained premium skincare style. Use Gallery White (#ffffff) as the dominant canvas and keep the layout open, with broad negative space. A narrow full-width Warm Stone (#bab7b2) announcement band can carry centered white serif shipping copy. Use Martina Plantijn, or a close literary serif substitute, for navigation, body text, captions, and buttons; rely on measured weight and hierarchy rather than tracking or decorative effects. Reserve Charcoal Ink (#333333) for a discreet utility control, not a large brand surface. Keep navigation quiet, functional accents small, and surfaces flat. Avoid introducing unmeasured colors, shadows, gradients, or dense content blocks. Use the measured comfortable spacing rhythm and keep the overall composition calm and editorial.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Full-width announcement band above a spacious, minimal navigation area. | Shipping announcement, Primary destination links, Cart quantity indicator | Warm gray announcement band, Centered white serif copy, Open white canvas |

## Source CSS custom properties (selected)

```css
--text-pink: #e399ab;
--text-pink2: #e89aad;
--text-light: white;
--bg-color: #ffffff;
--border-color: #E2DBD0;
--body-font: "Martina Plantijn";
--title-font: "Regola Pro Book";
--dark-text: #414042;
--grid-border: #DBD7D0;
--bg-violet: #BBAACC;
--bg-light-pink: #f6e5e1;
--bg-pink: #e89aad;
--bg-card-hover: #ffffff;
--color-grey: #E9E8E4;
--article-h2-font-size-desktop: 1.7vw;
--number-font: "Roboto Mono";
--jdgm-primary-color: #49369E;
--jdgm-secondary-color: rgba(73,54,158,0.1);
--jdgm-star-color: #49369E;
--jdgm-write-review-text-color: white;
--jdgm-write-review-bg-color: #49369E;
--jdgm-paginate-color: #524EB7;
--jdgm-border-radius: 10;
--jdgm-reviewer-name-color: #49369E;
```

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