# Lunchconcept · Design system migration spec

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

> This site is worth including for its masterful use of massive, 3D metallic typography layered over editorial photography, creating a very distinct, premium aesthetic.

## 1. Identity DNA

Lunchconcept operates with the precision of a high-end fashion magazine curated by a gallery. Its system is built on stark editorial contrast and photographic scale, where every element serves the curation rather than decoration.

**One-liner:** A curation-first fashion platform with bold editorial photography and stark typography.
**Keywords:** fashion · independent designers · curation · editorial
**Analogy:** A high-end fashion magazine curated by a gallery

## 2. Color

The palette is a disciplined trio: a warm off-white ground provides a tactile, paper-like base for black type and photographic content. A single, high-chroma red is reserved exclusively for functional status, creating immediate visual hierarchy through restraint.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F4F1E4` | main background |
| `--ink` | `#000000` | body text |
| `--accent` | `#FF0000` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast editorial palette with a warm off-white base and a single bold red accent for status.

Color is applied with the intention of a curator selecting a single red pigment for a gallery label—its power derives entirely from its scarcity.

## 3. Typography

Typography operates on a dramatic scale shift, pairing a high-contrast serif for massive, sculptural display with a clean humanist sans for detail and navigation. This voice is direct, authoritative, and structurally integral to the layout, not merely informational.

- **Display:** high-contrast-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 1.0 | 400 | -1px | Massive 3D metallic hero typography |
| heading | 32px | 1.3 | 700 | -0.5px | Section titles like 'NEW IN' |
| body | 12px | 1.8 | 400 | 0.16px | Product details and navigation links |

## 4. Spacing

Spacing follows a tight editorial rhythm, compressing text and grid elements while granting expansive, deliberate whitespace around large-scale photographic and typographic moments.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 60 px
- **Rhythm:** Tight, editorial spacing with generous whitespace around large elements

## 5. Surfaces

Surfaces are defined by sharp, precise borders rather than depth cues. A single, consistent rule separates major content sections, maintaining a flat, print-like aesthetic where the page is the primary surface.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** 1px solid black on the bottom of the page section

## 6. Layout

The structural skeleton transitions from a full-bleed, typographic hero to a rigid, dense multi-column product grid. This creates a clear editorial progression from feature to catalog within a strict left-aligned framework.

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

**Skeleton:** Full-bleed photography followed by a rigid, dense multi-column product grid.

## 7. Motion & Interaction

Motion is functional and subtle, prioritizing content continuity over performance. Standard ease-in-out transitions on hover states provide feedback without interrupting the browsing flow.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth transitions on hover and top-level navigation

- **Hover:** Cursor pointer with smooth color or opacity transitions
- **Click:** Immediate state change with no heavy loading animations
- **Transition:** all 0.2s ease-in-out
- **Keyboard:** Standard focus states

## 8. Voice & Don'ts

The editorial voice is minimalist and direct, using short, bold, uppercase headlines and understated text links. This avoids cluttered layouts and promotional excess, letting the curation and photography communicate value.

- **Tone:** Direct, minimalist, and authoritative
- **Headline style:** Short, bold, uppercase, and impactful
- **CTA style:** Understated text links rather than prominent buttons
- **Avoid:** Cluttered layouts / Excessive promotional text / Playful or rounded elements

### Don'ts
- ❌ don't use rounded corners — screenshot shows strictly sharp, 90-degree edges throughout
- ❌ don't use colorful backgrounds — screenshot shows a consistent warm off-white (#F4F1E4) base
- ❌ don't use casual sans-serif fonts — screenshot shows a mix of a high-contrast serif and a clean humanist sans
- ❌ don't use drop shadows — screenshot shows completely flat, borderless product cards
- ❌ don't use bright, multi-colored accents — screenshot shows only a single, specific use of red (#FF0000) for status
- ❌ don't use centered text for body content — screenshot shows a strict left-aligned editorial structure

The system deliberately excludes rounded corners, drop shadows, colorful backgrounds, and playful elements—defining itself as much by what it refuses as by what it presents.

## System Prompt (paste into AI tool)

```
This site is a premium fashion e-commerce platform focusing on independent designers, using a striking editorial layout. Key colors include a warm off-white background (#F4F1E4) and a single high-chroma red accent (#FF0000) for status messages. Typography pairs a high-contrast serif for massive display elements with a clean humanist sans-serif for navigation and product details. The layout is highly structured, relying on a rigid grid and generous whitespace. Critical donts: never use rounded corners, keep backgrounds strictly off-white or black, and avoid any playful or cluttered UI patterns.
```