# Cupofcouple · Design system migration spec

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

> A sophisticated example of how strict geometry and monochrome typography can elevate lifestyle photography into a high-end editorial experience.

## 1. Identity DNA

Cupofcouple operates as a curated gallery of high-end lifestyle photography, where every design decision exists to frame the image, not compete with it. The system is built on a principle of strict geometry and monochrome restraint, treating the interface as a precise, minimal structure for visual storytelling.

**One-liner:** A refined digital journal documenting fashion, travel, and design with editorial precision.
**Keywords:** visual diary · creative studio · lifestyle · fashion · architecture
**Analogy:** A curated gallery of high-end lifestyle photography.

## 2. Color

The palette is intentionally reduced to a monochrome foundation: a light gray field for surfaces, deep black for typography, and semi-transparent dark lines to define structure. This limited scope ensures that color in the photographs themselves carries all the emotional weight.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F0F0F0` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#000000` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--line` | `rgba(0,0,0,0.8)` | divider |

**Color principle:** Minimalist monochrome palette with strict geometric borders to prioritize photography.

The guiding principle is that color is reserved for the content, never the container.

## 3. Typography

Typography establishes a deliberate voice through contrast. Elegant didone serifs with high stroke contrast command headlines, while navigation and metadata use a clean, uppercase sans-serif with generous letter-spacing to create a refined, low-contrast hierarchy.

- **Display:** didone-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Main brand logo title |
| heading | 32px | 1.2 | 400 | 0px | Article headlines |
| body | 16px | 1.2 | 400 | 0px | Primary text and navigation |
| small | 10px | 1.2 | 400 | 0px | Metadata, tags, and dates |

**Type rules:**
- Headlines use elegant didone serifs with high stroke contrast.
- Navigation and metadata use clean, uppercase sans-serif with generous letter-spacing.
- Body text maintains a consistent 400 weight for a refined, low-contrast look.

## 4. Spacing

Spacing follows a generous, structured rhythm, with ample internal padding within cards and consistent vertical spacing to maintain the grid's clean lines.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 18 / 24 / 32 / 48 / 60 px
- **Rhythm:** Generous internal padding for cards and structured vertical spacing for the grid.

## 5. Surfaces

Depth is communicated not through shadow but through boundary. A thin, 1px border using a semi-transparent dark tone creates a strict grid structure, defining surfaces and compartments with architectural clarity.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Shadows:**
  - 1px 0px 0px 0px rgba(240, 240, 240, 1)
- **Borders:** Thin 1px borders using rgba(0, 0, 0, 0.8) to create a strict grid structure.

## 6. Layout

The layout skeleton is a strict rectangular grid, with the border lines themselves acting as the primary structural dividers. This creates a compartmentalized, gallery-like presentation where each cell is a defined stage for visual content.

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

**Skeleton:** Strict rectangular grid with visible border lines acting as structural dividers.

## 7. Motion & Interaction

Motion philosophy is one of subtlety and precision, using simple opacity-based transitions to suggest state changes without disrupting the editorial stillness. All interactions are brief and linear, maintaining the system's clean, static aesthetic.

- **Durations:** micro 220ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity transitions on hover (0.25s linear 0.2s delay).
  - General 0.3s transitions on interactive elements.

- **Hover:** Subtle opacity changes on text links and images.
- **Click:** Standard pointer cursor interactions.
- **Transition:** All elements transition smoothly (0.3s).
- **Keyboard:** Standard browser focus outlines.

## 8. Voice & Don'ts

The editorial voice is sophisticated, minimal, and curated, communicating through understated, text-based navigation and elegant serif headlines. This tone is maintained by a strict set of prohibitions against visual clutter and decorative excess.

- **Tone:** Sophisticated, minimal, and curated.
- **Headline style:** Elegant serif typography in all caps for high-impact visual weight.
- **CTA style:** Understated, text-based navigation without prominent buttons.
- **Avoid:** Vibrant colors / Rounded corners / Shadows for elevation

### Don'ts
- ❌ Don't use vibrant accent colors — screenshot shows a strict monochrome palette.
- ❌ Don't use rounded corners — screenshot shows sharp, zero-radius edges.
- ❌ Don't use drop shadows for depth — screenshot uses thin borders for structure.
- ❌ Don't use bold font weights — screenshot shows uniform 400 weight across all text.
- ❌ Don't use sans-serif for headlines — screenshot shows serif typography for all titles.
- ❌ Don't use cluttered layouts — screenshot uses a spacious, grid-based structure with hairline dividers.

They deliberately avoid vibrant colors, rounded corners, and shadows for elevation, committing instead to a pure, geometric structure that lets photography command full attention.

## System Prompt (paste into AI tool)

```
A refined editorial portfolio and visual diary for a creative studio. The design uses a monochrome palette of light gray backgrounds and dark gray/black typography, with no accent colors. It features a strict, zero-radius grid structure where thin borders define sections. Typography contrasts elegant didone serifs for headlines with humanist sans-serifs for navigation. Never use rounded corners, drop shadows, or vibrant accent colors; instead, maintain the minimalist, structured aesthetic. Key colors: Background #F0F0F0, Ink #000000, Line rgba(0,0,0,0.8).
```