# Typology · Design system migration spec

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

> This site is a prime example of minimalist e-commerce design, using a restrained aesthetic to convey purity and scientific credibility.

## 1. Identity DNA

The design system for Typology is built on a principle of clinical purity, where every choice serves a purpose. It operates like a modern apothecary, combining scientific precision with the editorial restraint of a high-end magazine.

**One-liner:** A minimalist, premium skincare brand focused on clean ingredients and scientific precision.
**Keywords:** clean · scientific · minimal · premium · skincare
**Analogy:** A modern apothecary meets high-end editorial magazine.

## 2. Color

The color system is an exercise in monochromatic restraint, built on black, white, and subtle grays. This strict palette creates a neutral, high-contrast canvas that allows product photography and typography to command attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F4F4F2` | card background |
| `--bg-quiet` | `#FBF9F7` | quiet area |
| `--ink` | `#141414` | body text |
| `--ink-soft` | `#4F4F4F` | secondary text |
| `--muted` | `#909090` | placeholder |
| `--line` | `rgba(212, 212, 212, 1)` | divider |

**Color principle:** Monochromatic restraint with high-contrast typography to evoke clinical purity.

The overarching principle is to use color as a neutral container, never as a decorative element.

## 3. Typography

Typography is the primary voice of the interface, utilizing a clean, functional grotesque sans-serif. The type scale is structured to create clear hierarchy, with navigation and CTAs consistently set in uppercase to establish a direct, authoritative tone.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 500 | -1.5px | Headlines and large section titles. |
| h1 | 48px | 1.1 | 500 | -1px | Primary page headings. |
| h2 | 32px | 1.2 | 500 | -0.5px | Section subheadings. |
| body | 15px | 1.5 | 400 | 0px | Main body text and descriptions. |
| small | 13px | 1.5 | 400 | 0.2px | Captions, labels, and metadata. |
| micro | 10px | 1.0 | 400 | 0.26px | Small navigation and utility text. |

**Type rules:**
- Navigation and utility text are always uppercase.
- Headlines use tight tracking and a heavy weight.
- Body text maintains a clean, neutral sans-serif appearance.

## 4. Spacing

Layout rhythm is governed by a consistent 4px base grid, creating a structured and predictable spatial system.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous whitespace for an airy, premium feel.

## 5. Surfaces

Surface treatment is minimal and intentional, relying on generous whitespace rather than decorative borders. Where separation is required, thin 1px lines in black or dark gray are used, and a single, deep shadow is employed sparingly to create subtle depth.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.3) 0px 30px 70px 0px
- **Borders:** Thin 1px borders in black or dark gray, used sparingly for separation and buttons.

## 6. Layout

The layout skeleton begins with full-bleed photographic heroes that establish immediate visual impact. This transitions into clean, structured grids designed for clear product discovery and content organization.

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

**Skeleton:** Full-width photographic heroes followed by clean, structured grids for product discovery.

## 7. Motion & Interaction

Motion philosophy is one of subtle, functional feedback rather than decoration. Transitions are smooth and standardized, using transform-based animations to provide clear interactive cues on elements like buttons and links.

- **Durations:** micro 200ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for hover states on buttons and links.
  - Transform-based animations for subtle interactive feedback.

- **Hover:** Subtle background color or opacity shifts, often with a transition.
- **Click:** Immediate visual feedback, typically via color change.
- **Transition:** Standardized 0.2s to 0.3s transitions for color, background, and transform properties.
- **Keyboard:** Standard focus outlines are likely, though not explicitly visible in the static capture.

## 8. Voice & Don'ts

The editorial voice is clinical, direct, and sophisticated, mirroring the precision of the visual system. Headlines are short and declarative, and the tone avoids casual language or flowery jargon in favor of clear, action-oriented communication.

- **Tone:** Clinical, direct, and sophisticated.
- **Headline style:** Short, bold, and declarative, often in all caps.
- **CTA style:** Action-oriented and clear, always in uppercase.
- **Avoid:** Overly casual or bubbly language. / Excessive use of exclamation marks. / Vague or flowery marketing jargon.

### Don'ts
- ❌ don't use rounded, bubbly shapes — screenshot shows sharp, geometric rectangles and squares.
- ❌ don't use vibrant, saturated accent colors — screenshot shows a strictly monochromatic palette.
- ❌ don't use decorative or script fonts — screenshot shows a clean, functional grotesque sans-serif.
- ❌ don't clutter the interface with many borders or boxes — screenshot shows a clean, borderless layout with ample whitespace.
- ❌ don't use heavy drop shadows everywhere — screenshot shows a single, subtle deep shadow used sparingly.
- ❌ don't use lowercase for primary navigation and CTAs — screenshot shows consistent uppercase styling for these elements.

The system deliberately avoids vibrant accents, rounded shapes, decorative type, and interface clutter to maintain its core identity of scientific minimalism.

## System Prompt (paste into AI tool)

```
This is a premium, minimalist skincare e-commerce site for Typology Paris. The design DNA is clinical, clean, and sophisticated, relying on a strict monochromatic palette (black, white, and off-white/gray) and a functional grotesque sans-serif typeface (Post Grotesk). The layout is spacious and editorial, using large-scale photography and bold, uppercase typography for headlines and navigation. Key hex colors are #FFFFFF for backgrounds, #F4F4F2 for soft surfaces, and #141414 for primary ink. Critical donts: never use vibrant accent colors, avoid rounded or bubbly shapes, and never use decorative or script fonts. The interface should feel precise, scientific, and high-end.
```
