---
title: "LUNCH design system"
variant: extended
source: https://lunchconcept.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/lunchconcept-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# LUNCH · Design System

> Independent fashion in a quiet, image-led editorial frame

**Theme:** light · **Industry:** fashion · **Source:** https://lunchconcept.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

LUNCH pairs a warm off-white canvas and direct product grids with oversized fashion imagery and expressive display lettering. A lavender footer and restrained red accents add contrast without displacing the independent-designer editorial feel.

## North star

Let fashion imagery and oversized editorial lettering stand out against a warm, quiet canvas; keep commerce details small, black, and direct.

## Overview

The page uses a warm off-white canvas (#fcfaf1) as its main field, letting product photography and black text carry the storefront. Black (#000000) anchors navigation, product labels, and headings; bright red (#ff0000) appears as a small textual accent, including sold-out notices, rather than as a large button colour. A pale lavender (#b8aad0) footer forms a distinct closing band, while cream (#f4f1e4) marks the centered designer transition. Good Sans handles compact uppercase navigation and product metadata alongside uppercase section headings; the display treatment is more expressive, using an oversized Redaction-style wordmark and a dramatic italic serif-like designer heading. The structure alternates open canvas with dense, image-led merchandise rows. Product thumbnails sit in pale image fields with little visible framing, while a wide fashion photograph and oversized logo establish the opening visual. Spacing feels generous around editorial transitions and tighter around catalog labels.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Primary text and navigation, product names, footer copy, and the site's crisp hairline borders. |
| Warm Canvas | `#fcfaf1` | `--color-warm-canvas` | brand | Dominant page background behind the opening, product assortments, and explanatory copy. |
| Soft Lavender | `#b8aad0` | `--color-soft-lavender` | surface | Full-width closing footer band and the background behind its oversized LUNCH wordmark. |
| Signal Red | `#ff0000` | `--color-signal-red` | accent | Small textual accent, notably sold-out product status; not a large surface or primary CTA. |
| Parchment | `#f4f1e4` | `--color-parchment` | surface | Centered SHOP BY DESIGNER transition band between merchandise assortments. |

### Semantic aliases

`--color-canvas` → `#fcfaf1` (Warm Canvas) · `--color-surface` → `#b8aad0` (Soft Lavender) · `--color-surface-2` → `#f4f1e4` (Parchment) · `--color-text` → `#000000` (Editorial Ink) · `--color-border` → `#000000` (Editorial Ink) · `--color-accent` → `#ff0000` (Signal Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fcfaf1` | 20.08:1 | AAA |
| `#000000` | `#b8aad0` | 9.7:1 | AAA |
| `#000000` | `#f4f1e4` | 18.55:1 | AAA |
| `#ff0000` | `#fcfaf1` | 3.82:1 | AA-large |
| `#ff0000` | `#b8aad0` | 1.85:1 | fail |
| `#ff0000` | `#f4f1e4` | 3.53:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Good Sans | `--font-body` | webfont | 400, 700 | Navigation, headings, product labels, body copy, captions, and links throughout the storefront. | DM Sans |

- **Good Sans:** Use regular and bold weights; navigation and section headings are uppercase, while product and body copy stay compact and sentence case.

### Type scale — Golden Ratio (ratio ≈ 1.651, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 700 | 1.8 | 0.002em | uppercase | Redaction | Oversized LUNCH wordmark and expressive editorial display lettering. |
| h1 | 32px | 700 | 1 | 0.005em | uppercase | Good Sans | Primary uppercase storefront or merchandise-section heading. |
| h2 | 24px | 700 | 1.8 | 0.007em | uppercase | Good Sans | Uppercase subsection headings such as NEW IN and EXCLUSIVES. |
| body | 16px | 400 | 1.8 | 0.01em | — | Good Sans | Store introduction and explanatory editorial copy. |
| caption | 12px | 400 | 1.8 | 0.013em | — | Good Sans | Compact product names, prices, and small supporting labels. |
| nav | 12px | 400 | 1.8 | 0.013em | uppercase | Good Sans | Uppercase site navigation and menu labels. |
| link | 12px | 400 | 1.8 | 0.013em | uppercase | Good Sans | Small uppercase text links such as FIND OUT MORE. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 2, 5, 10, 20, 30, 60, 80 px.
- Section rhythm 80px · element gap 20px · card padding — · max content width 1400px.

A broad, centered storefront uses the measured 1400px maximum width and comfortable section rhythm. The opening is image-led, followed by a short centered introduction and dense product assortments. Catalog rows range from five columns to wider ten-column layouts in the measured sections, with compact metadata directly below imagery. A centered designer-transition band separates product groupings. The page closes with a full-width lavender footer; align its message and link groups as distinct areas.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface reads as flat and print-like: measured data reports no shadows, gradients, or component radii. Separate catalog items through image placement and open canvas rather than raised cards. Keep outlines and borders minimal; black is the measured border colour, while the lavender footer and cream designer band provide the clearest section separation.

## Imagery

Use fashion editorial photography as the dominant visual language: a striking wide campaign image anchors the opening, while product photography presents garments, accessories, and jewelry as individual catalog tiles. Keep product images clean and consistently framed against pale, often light-gray backgrounds. The measured page also shows a monumental dimensional LUNCH wordmark within the imagery; treat this as a brand-specific graphic rather than a generic interface decoration.

## Components

### Compact header navigation

Use small uppercase Good Sans labels in black, arranged unobtrusively around the storefront identity.

### Editorial introduction

Place concise centered brand copy and a small FIND OUT MORE text link on the warm canvas.

### Product tile

Show a clean product image with compact designer, item, price, and availability text beneath; links are black and status may use red.

### Product assortment

Arrange linked catalog tiles in a dense, image-forward row, with section headings such as NEW IN or EXCLUSIVES.

### Designer transition

Center an expressive SHOP BY DESIGNER heading on a narrow Parchment band.

### Closing footer

Use a full-width Soft Lavender field with a prominent closure message, grouped small links, and an oversized LUNCH wordmark.

### Measured component styles

- **Link** (“KLARA MARIE BLISS”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Good Sans
- **Navigation item** (“LUNCH CONCEPT”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Good Sans · uppercase

## Do

- Keep the main canvas warm off-white and visually quiet.
- Let product photography lead each assortment.
- Keep product names and prices compact beneath images.
- Use uppercase black labels for navigation and section headings.
- Reserve lavender for the closing footer treatment.
- Use red sparingly for textual status accents.
- Separate catalog groups with clear editorial breathing room.

## Don't

- Do not add shadows, gradients, or rounded card styling.
- Do not turn the red accent into a large CTA surface.
- Do not clutter product tiles with oversized metadata.
- Do not replace the warm canvas with stark white.
- Do not make every section a boxed card.
- Do not let decorative graphics overpower product imagery.

## Agent prompt

Build a fashion concept-store page in LUNCH's editorial style. Use Warm Canvas (#fcfaf1) for the main field and Editorial Ink (#000000) for navigation, headings, product labels, and links. Keep Signal Red (#ff0000) to restrained text accents, and use Parchment (#f4f1e4) for a centered category transition. Finish with a full-width Soft Lavender (#b8aad0) footer and a bold, oversized wordmark treatment. Use a clean sans-serif similar to DM Sans for compact uppercase navigation and readable catalog metadata, with a contrasting display face for brand moments. Lead with fashion photography, then arrange product images in dense, open grids with concise labels below. Favor flat surfaces, minimal borders, generous editorial pauses, and no shadows or rounded cards.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Tall, full-width opening area on the warm canvas; the measured first viewport is visually sparse. | brand introduction, visual-first entry | warm off-white field, oversized wordmark imagery |
| 2 | product-grid | Product assortment with five measured columns and compact labels beneath individual images. | browse product links, show price and availability | linked product tiles, pale image backgrounds, small black metadata, red status accents |
| 3 | category-nav | Short, centered single-column band separating merchandise groups. | designer discovery | Parchment background, centered display heading |
| 4 | product-grid | Wide merchandise grid; measured section uses ten columns and left-aligned section heading. | browse new arrivals, follow product links | compact product tiles, uppercase section label, image-led catalog |
| 5 | product-grid | Wide, left-aligned assortment grid continuing directly after the new-arrivals group. | browse exclusives, compare product options | linked catalog images, compact availability labels, uppercase section label |
| 6 | footer | Full-width lavender footer with a large message, grouped link columns, and a monumental wordmark. | read closure announcement, navigate support and account links | Soft Lavender background, bold black message, grouped footer links, oversized wordmark |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lunchconcept-com