# Loveseen · Design system migration spec

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

> A strong example of how photography-first design can create a luxurious and inclusive brand experience.

## 1. Identity DNA

Loveseen operates as a curated gallery of beauty photography, where the design system serves as the neutral, refined frame. The system establishes a warm, skin-tone inspired neutral palette and elegant serif typography, creating a sophisticated canvas where product imagery takes center stage.

**One-liner:** A premium beauty e-commerce site driven by high-impact photography and elegant serif typography.
**Keywords:** luxury beauty · editorial photography · inclusive · refined · product-focused
**Analogy:** A curated gallery of beauty photography

## 2. Color

The color system is a warm, skin-tone inspired neutral palette with deep navy ink, creating a sophisticated canvas for photography. The palette avoids high-chroma accent colors, using muted neutral tones for borders and interfaces to let imagery dominate.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAF6F5` | main background |
| `--bg-soft` | `#FFFDFB` | card background |
| `--bg-quiet` | `#F2EDE7` | quiet area |
| `--ink` | `#00091B` | body text |
| `--ink-soft` | `#E0D2D1` | secondary text |
| `--muted` | `#E0D2D1` | placeholder |
| `--muted-soft` | `#E0D2D1` | weak hint |
| `--line` | `rgba(0,9,27,0.1)` | divider |

**Color principle:** Warm, skin-tone inspired neutral palette that lets photography dominate.

The principle is clear: color exists to support photography, not to compete with it.

## 3. Typography

Typography employs a didone-serif for display and a geometric-sans for body copy, establishing an elegant, editorial voice. The system enforces all-caps for navigation and UI elements, with tight letter-spacing on display type and generous letter-spacing on uppercase UI text for refined clarity.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 400 | -1px | Brand logo and main headings |
| heading | 30px | 1.2 | 400 | 0.5px | Subheadings and secondary titles |
| body | 16px | 1.25 | 400 | 0.4px | Body copy and navigation links |
| caption | 13px | 1.5 | 400 | 0.43px | Smaller text and utility labels |

**Type rules:**
- All-caps for navigation and UI elements
- Tight letter-spacing on display type
- Generous letter-spacing on uppercase UI text

## 4. Spacing

Generous vertical spacing between sections establishes a rhythmic, breathing pace throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing between sections

## 5. Surfaces

Surfaces are defined by minimal depth, using 1px solid borders in muted neutral tones and avoiding heavy drop shadows or 3D effects. The design relies on whitespace and imagery to create visual separation and hierarchy.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid borders using muted neutral tones

## 6. Layout

The layout skeleton begins with full-bleed hero imagery, establishing immediate photographic impact. This transitions into grid-based sections for product and editorial content, maintaining generous whitespace to showcase photography.

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

**Skeleton:** Full-bleed hero imagery followed by grid sections

## 7. Motion & Interaction

Motion philosophy centers on subtlety and refinement, with fade-in and slide-up animations enhancing the editorial feel. All transitions use smooth, cubic-bezier easing with durations between 0.3s and 0.6s, creating a polished, immediate interface response.

- **Durations:** micro 220ms · small 400ms · medium 600ms
- **Easing:** `cubic-bezier(0.39, 0.575, 0.565, 1)`
- **Patterns:**
  - fade-in
  - slide-up

- **Hover:** Opacity changes and subtle color shifts
- **Click:** Immediate state change with smooth transitions
- **Transition:** All transitions applied universally with 0.3s to 0.6s durations
- **Keyboard:** Standard focus management with visible outlines

## 8. Voice & Don'ts

The editorial voice is confident, inclusive, and sophisticated, using elegant headlines in the didone-serif display font. Calls-to-action are minimal and uppercase, often outlined or plain text, maintaining a clean interface that prioritizes content.

- **Tone:** Confident, inclusive, and sophisticated
- **Headline style:** Elegant, often using the didone serif display font
- **CTA style:** Minimal, uppercase, often outlined or plain text
- **Avoid:** Loud colors / Decorative UI elements / Cluttered layouts

### Don'ts
- ❌ Don't use high-chroma accent colors — screenshot shows a muted, neutral palette.
- ❌ Don't use heavy drop shadows or 3D effects — screenshot shows flat, clean surfaces.
- ❌ Don't use rounded corners on cards or buttons — screenshot shows sharp, clean edges.
- ❌ Don't use lowercase text for navigation — screenshot shows all-caps UI elements.
- ❌ Don't use bold weights for body text — screenshot shows a consistent 400 weight.
- ❌ Don't use busy background patterns — screenshot shows solid, soft neutral backgrounds.

The system deliberately avoids loud colors, decorative UI elements, and cluttered layouts to maintain its refined, photography-first aesthetic.

## System Prompt (paste into AI tool)

```
A premium beauty e-commerce site driven by high-impact photography and elegant serif typography. The brand identity is defined by a warm, skin-tone inspired neutral palette (bg #FAF6F5, ink #00091B) that lets imagery dominate. Typography uses a didone-serif for display (GlossyDisplayWeb) and a geometric-sans for body (BeausiteWeb), both with generous letter-spacing in uppercase. Critical don'ts: Do not use bright accent colors, do not apply heavy shadows, and do not use rounded corners on UI elements. Maintain a clean, editorial aesthetic with minimal UI chrome and generous whitespace to showcase the product photography.
```