# Merit · Design system migration spec

> Source: https://www.meritbeauty.com  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in restrained, premium e-commerce design, perfectly balancing functionality with a high-end editorial aesthetic.

## 1. Identity DNA

The Merit design system operates with the deliberate economy of a curated magazine spread, where every element earns its place through restraint and refinement. It achieves sophistication not through accumulation, but through the precise calibration of contrast, space, and typographic voice.

**One-liner:** Minimalist premium beauty brand with an editorial layout.
**Keywords:** minimalist · effortless · editorial · refined
**Analogy:** A curated magazine spread

## 2. Color

The color system is a strict, high-contrast dialogue between pure black and white, softened only by a considered range of warm off-whites and grays. This binary foundation creates a stage for product imagery to command full attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FAF9F7` | card background |
| `--bg-quiet` | `#FAF9F7` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#62605E` | placeholder |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast black on white with warm, soft grays.

The principle is absolute: color serves only to create contrast and direct focus, never for decoration.

## 3. Typography

The typographic hierarchy is built on a deliberate tension between an elegant **Didone serif** for display headlines and a clean **grotesque sans-serif** for all functional text. This pairing assigns a voice of editorial authority to key messages while maintaining clarity for interface navigation.

- **Display:** didone-serif
- **Body:** grotesque-sans
- **Mono:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 400 | -0.5px | Hero headlines |
| subtitle | 13px | 1.3 | 400 | 1.5px | Uppercase labels |
| body | 16px | 1.15 | 400 | 0.5px | General text |

**Type rules:**
- Didone serif for elegant display headings
- Clean grotesque sans for navigation and body text
- Uppercase tracking for labels

## 4. Spacing

The rhythm of the layout is defined by generous, systematic spacing that prioritizes visual breathing room over density.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 40 / 64 / 80 px
- **Rhythm:** generous

## 5. Surfaces

Surfaces are rendered flat and borderless, with depth communicated solely through typography and layout hierarchy. A single, purposeful rule—1px solid black—defines the primary button, reinforcing a system of deliberate, minimal intervention.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid black on primary buttons

## 6. Layout

The skeleton is anchored by a full-width editorial split hero, presenting large imagery alongside a serif headline. Below, a clean, standard grid organizes content, ensuring a consistent and predictable reading path.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Split screen hero, standard grid for content

## 7. Motion & Interaction

Motion philosophy is one of restrained enhancement, using smooth opacity and transform transitions to guide attention without disruption. Interactive feedback is communicated through subtle, linear state changes, maintaining the interface's composed demeanor.

- **Durations:** micro 200ms · small 400ms · medium 600ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth opacity and transform fades for images
  - Subtle linear transitions for interactive states

- **Hover:** Subtle opacity reduction
- **Click:** Standard pointer
- **Transition:** Ease-out transforms for UI elements
- **Keyboard:** Standard focus management

## 8. Voice & Don'ts

The editorial voice is sophisticated and direct, favoring short, evocative serif phrases for headlines and minimalist, action-oriented language for calls to action. It deliberately avoids exclamation points, sales jargon, and any language that might compromise the refined tone.

- **Tone:** Sophisticated and direct
- **Headline style:** Short, evocative serif phrases
- **CTA style:** Minimalist and action-oriented
- **Avoid:** Exclamation points / Sales jargon / Cluttered UI

### Don'ts
- ❌ Don't use bright neon colors — the palette is strictly black, white, and soft warm grays.
- ❌ Don't use heavily rounded corners — the design favors sharp or very subtle radii.
- ❌ Don't use sans-serif for display headlines — the primary headline style is an elegant didone serif.
- ❌ Don't create cluttered layouts — maintain significant whitespace and breathing room.
- ❌ Don't use drop shadows on primary elements — the design is flat and relies on typography for hierarchy.
- ❌ Don't use all-caps for body text — it is reserved for short uppercase labels and navigation.

The system's power lies as much in what it forbids—bright neon, heavy rounding, cluttered layouts, drop shadows—as in what it permits.

## System Prompt (paste into AI tool)

```
Design a minimalist, premium e-commerce interface inspired by an editorial magazine spread. The layout relies on a strict black and white color palette with soft, warm off-white backgrounds. Use a didone serif for expressive headlines and a clean grotesque sans-serif for body text and UI elements. Ensure there is generous whitespace and avoid cluttering the visual field. Critical constraints: Never use drop shadows on main cards or buttons, keep interactive states subtle, and maintain the elegant, refined tone of a high-end beauty brand.
```
