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

# Quince · Design System

> Considered essentials, presented with quiet editorial clarity

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.quince.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._

Quince pairs a restrained monochrome interface with fashion-led photography and a dense, browsable product assortment. Spacious editorial features and compact shopping grids alternate to keep discovery visual, practical, and easy to scan.

## North star

Keep the interface quiet and consistent; let polished product photography and clear shopping structure provide the visual emphasis.

## Overview

Quince’s visual strategy keeps the storefront quiet so products and campaign photography can lead. White is the dominant canvas, with near-black text, fine gray dividers, and occasional pale gray or warm stone section bands. A restrained peach accent appears on selected calls to action, while the deep slate footer provides the main dark counterpoint. The header layers an announcement strip, wordmark and utility controls, then a compact category navigation row. Editorial campaign panels use large lifestyle images with brief overlaid copy; product areas return to orderly multi-column grids with small titles, prices, ratings, and color swatches. Grosa carries nearly all interface and commerce text in compact, practical styles. Ivy Headline is reserved for a light, elegant display touch. Generous section breaks offset the dense merchandising, while cards remain mostly flat and photography stays crisp, unframed, and central.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, header, and most product and editorial section backgrounds; also supports light text on dark areas. |
| Soft Ink | `#21201f` | `--color-soft-ink` | brand | Default text, navigation, product details, and dark lettering on the peach accent. |
| Peach Signal | `#ffa273` | `--color-peach-signal` | accent | Selective call-to-action highlight, including campaign buttons; use sparingly against neutral content. |
| Cloud Gray | `#f7f7f7` | `--color-cloud-gray` | surface | Pale alternate surface used behind editorial product features and campaign panels. |
| Slate Footer | `#2d313f` | `--color-slate-footer` | surface | Large dark footer background, paired with light links, signup controls, and branding. |
| Quiet Divider | `#d3d2d2` | `--color-quiet-divider` | semantic | Fine navigation and interface hairlines that separate content without adding visual weight. |
| Warm Stone | `#dfdace` | `--color-warm-stone` | surface | Warm neutral section treatment, notably behind the Quince IRL social video gallery. |
| Product Gray | `#d9d9d9` | `--color-product-gray` | semantic | Subtle secondary outlines and separators, including edges around product and interface elements. |
| Footer Slate | `#575a65` | `--color-footer-slate` | semantic | Muted footer detail and supporting interface contrast within the dark footer; secondary to the main slate surface. |
| True Black | `#000000` | `--color-true-black` | neutral | Occasional dark outline, navigation detail, or control edge; not the dominant text color. |
| Silver Thread | `#bdbdbc` | `--color-silver-thread` | semantic | Low-emphasis fine borders and subtle interface details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Cloud Gray) · `--color-surface-2` → `#2d313f` (Slate Footer) · `--color-surface-3` → `#dfdace` (Warm Stone) · `--color-text` → `#21201f` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#d3d2d2` (Quiet Divider) · `--color-accent` → `#ffa273` (Peach Signal) · `--color-on-accent` → `#21201f` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#21201f` | `#ffffff` | 16.27:1 | AAA |
| `#21201f` | `#f7f7f7` | 15.18:1 | AAA |
| `#21201f` | `#2d313f` | 1.26:1 | fail |
| `#21201f` | `#dfdace` | 11.66:1 | AAA |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |
| `#ffffff` | `#2d313f` | 12.94:1 | AAA |
| `#ffffff` | `#dfdace` | 1.39:1 | fail |
| `#ffa273` | `#ffffff` | 1.97:1 | fail |
| `#ffa273` | `#f7f7f7` | 1.84:1 | fail |
| `#ffa273` | `#2d313f` | 6.57:1 | AA |

### Gradients

- `linear-gradient(rgb(33, 32, 31), rgb(33, 32, 31))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| grosa | `--font-body` | webfont | 400, 500 | Primary storefront typeface for navigation, body copy, product details, buttons, labels, and links. | Inter |
| ivy-headline | `--font-display` | webfont | 300 | Light display face for the principal headline role and occasional editorial wordmark-like emphasis. | Cormorant Garamond |

- **grosa:** Mostly regular and medium weights; compact interface sizing, with uppercase buttons and spaced uppercase eyebrows.
- **ivy-headline:** Light weight with an elegant serif character; keep usage scarce and let sans-serif commerce text dominate.

### Type scale — Custom (ratio ≈ 1.846, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 300 | 1.42 | 0 | — | ivy-headline | Light editorial headline in campaign and hero content. |
| body | 13px | 400 | 1.46 | 0 | — | grosa | Product descriptions, supporting copy, and general storefront text. |
| caption | 11.5px | 400 | 1.46 | 0 | — | grosa | Small secondary labels and compact supporting details. |
| button | 12px | 500 | 1.2 | 0.05em | uppercase | grosa | Uppercase calls to action and shopping controls. |
| nav | 13px | 500 | 1.23 | 0 | capitalize | grosa | Category navigation and concise menu labels. |
| link | 10px | 500 | 1.46 | 0.061em | — | Grosa | Compact supporting links and secondary actions. |
| eyebrow | 11px | 500 | 1.33 | 0.05em | uppercase | grosa | Uppercase section labels above editorial and product modules. |

OpenType features in use: `"clig" 0, "liga" 0`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1, 2, 5, 7, 8, 10, 11, 12, 14, 22, 50, 155 px.
- Section rhythm 72px · element gap 11px · card padding — · max content width 1303px.

A wide, centered storefront uses a measured maximum content width of 1303px, with full-bleed campaign photography at the top. The page alternates horizontal editorial features, category circles, and six-column product grids; a three-column feature area and wider social gallery add variation. The section rhythm is comfortable, with generous separation between major modules, while individual product tiles remain tightly packed. Text and headings align to the start of their content areas, and the footer uses four columns.

## Shape & elevation

- Radius: button `50%` · media `50%` · nav `5px` · pill `9999px`
- Shadow `sm` (other, button): `rgba(0, 0, 0, 0.15) 0px 3.2px 6.4px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.1) 0px 2px 10px 0px`
- Motion: standard transition `0.35s cubic-bezier(0.645, 0.045, 0.355, 1)` on interactive elements.

The page is largely flat, relying on white space, image contrast, and fine gray hairlines instead of raised cards. Product tiles have minimal framing and little visible depth. Small utility controls may use restrained shadows, while the header and footer remain clearly differentiated by bands and color rather than layered card treatments.

## Imagery

Photography is the main expressive element: polished apparel and home-product images, models in natural poses, styled interiors, and product cutouts on pale backgrounds. Campaigns use wide lifestyle panels with brief overlay copy; product grids use consistent, isolated product framing. Circular category thumbnails create a distinct browse pattern. The Quince IRL area uses social-style video tiles rather than illustrations or 3D imagery.

## Components

### Store header

Stacked announcement, wordmark and search utilities, then a compact horizontal category navigation row on white.

### Campaign hero

Full-width fashion imagery with short white overlay copy and a rounded light SHOP NOW action.

### Circular category navigation

A multi-row carousel of circular product or model thumbnails, each with a concise category label.

### Product grid

Dense multi-column product tiles with photography, small product names and prices, ratings, color swatches, and occasional badges.

### Editorial feature split

Large lifestyle image and overlay text sit beside a compact grid of related merchandise; pale bands separate some features.

### Social video gallery

Quince IRL uses a horizontal row of video tiles on a warm stone surface, with small pill-shaped SHOP actions.

### Footer and signup

A deep slate footer combines email signup, app promotion, several link columns, social links, and a large wordmark.

### Measured component styles

- **Primary button**: background #ffa273 · text #21201f · radius 0px · padding 0px · 400 13.9991px grosa
- **Secondary button** (“SHOP NOW”): transparent background · text #21201f · border 1px solid #000000 · radius 79.9949px · padding 8.1px 10.8px 7.2px 10.8px · 500 10.7993px grosa · uppercase
- **Link** (“Sweaters”): transparent background · text #21201f · radius 0px · padding 0px · 400 13.9991px grosa
- **Input**: transparent background · text #ffffff · border 1px solid #ffffff · radius 0px · padding 26px 23px 23px 28px · 500 11.9992px grosa
- **Badge** (“Free white glove delivery”): background #eeeeec · text #21201f · radius 0px · padding 5px 9.5px · 400 10.9993px grosa
- **Navigation item** (“Quince Account Sign In Wishlist US $50 C”): transparent background · text #21201f · radius 0px · padding 0px · 400 13.9991px grosa

## Do

- Use white as the primary canvas and preserve clear whitespace between major modules.
- Let lifestyle and product photography carry the campaign personality.
- Keep product grids orderly, with compact titles, prices, ratings, and swatches.
- Use peach only for selected calls to action and small highlights.
- Reserve the dark slate surface for a distinct, information-rich footer.
- Use the serif display face sparingly and keep utility text in the sans-serif.

## Don't

- Do not apply bright accent colors broadly across the storefront.
- Do not turn every product into a raised or heavily bordered card.
- Do not let campaign copy overwhelm the photography.
- Do not use oversized or decorative typography for routine product details.
- Do not introduce unrelated gradients or ornamental effects.
- Do not compress editorial sections until the page loses its comfortable rhythm.

## Agent prompt

Build a polished Quince-style ecommerce page with a restrained, editorial storefront feel. Use Gallery White (#ffffff) as the main canvas, Soft Ink (#21201f) for text and navigation, Quiet Divider (#d3d2d2) for fine hairlines, and Peach Signal (#ffa273) only for selected calls to action. Create a stacked store header, a wide lifestyle campaign, circular category browsing, and tidy multi-column product grids. Alternate these with image-led editorial features and a warm Quince IRL-style video gallery. Use compact Grosa-like sans-serif typography for commerce details and a light serif display face only for prominent editorial headings. Keep cards mostly flat, photography crisp, product information easy to scan, and the Slate Footer (#2d313f) visually distinct. Favor measured spacing and clear section breaks over decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image beneath the stacked store header, with copy and CTA on the right. | primary shop CTA, campaign message | wide lifestyle photography, white text overlay, pill button |
| 2 | category-nav | Two-row circular thumbnail carousel with category labels and a side control. | browse by category, horizontal carousel | circular image crops, compact labels, next control |
| 3 | product-grid | Six-column product grid with section heading and shop action. | new-arrival discovery, product quick scanning | product photography, price and rating, color swatches |
| 4 | feature-split | Large campaign image beside a smaller three-column merchandise grid. | shop the collection, editorial discovery | image overlay copy, product tiles, pale section band |
| 5 | product-grid | Six-column product row beneath a heading and shop link. | best-seller browsing, compare product options | product images, badges, ratings and swatches |
| 6 | feature-split | Large editorial campaign image paired with a six-item product grid. | collection exploration, shop collection CTA | lifestyle photography, overlay copy, product grid |
| 7 | product-grid | Six-column merchandise grid with a section heading and shop action. | gift-guide browsing, product comparison | gift imagery, price and rating, availability badges |
| 8 | feature-grid | Three equal image-led editorial tiles with text and actions overlaid. | learn about the brand, browse best sellers | three-column photography, bottom-aligned copy, accent buttons |
| 9 | testimonials | Six-column row of product-linked review cards. | read customer opinions, discover reviewed products | product thumbnails, star ratings, short quotes |
| 10 | video | Horizontal social video gallery on a warm stone section background. | watch customer videos, shop featured looks | video thumbnails, small shop pills, carousel controls |
| 11 | product-grid | Six-column product assortment repeated across two rows. | continue product discovery, browse varied categories | mixed-category product tiles, ratings, swatches and badges |
| 12 | footer | Four-column dark footer with signup and app promotion at left, link groups, and legal strip below. | email signup, app discovery, service navigation | slate background, light links, large wordmark |

## Source CSS custom properties (selected)

```css
--animation-header-duration: 300ms;
--web-ui-spacing-space-2: 2px;
--web-ui-spacing-space-4: 4px;
--web-ui-spacing-space-6: 6px;
--web-ui-spacing-space-8: 8px;
--web-ui-spacing-space-10: 10px;
--web-ui-spacing-space-12: 12px;
--web-ui-spacing-space-16: 16px;
--web-ui-spacing-space-20: 20px;
--web-ui-spacing-space-24: 24px;
--web-ui-spacing-space-32: 32px;
--web-ui-spacing-space-40: 40px;
--web-ui-spacing-space-48: 48px;
--web-ui-spacing-space-56: 56px;
--web-ui-spacing-space-64: 64px;
--web-ui-spacing-space-72: 72px;
--web-ui-spacing-space-80: 80px;
--web-ui-spacing-space-100: 100px;
--web-ui-spacing-space-120: 120px;
--web-ui-spacing-section-carousel-indent: 16px;
--web-ui-sizes-min-h-input-text-area: 100px;
--web-ui-sizes-max-h-input-text-area: 400px;
--swiper-theme-color: #007aff;
--toastify-color-light: #fff;
--toastify-color-dark: #121212;
--toastify-color-info: #3498db;
--toastify-color-success: #07bc0c;
--toastify-color-warning: #f1c40f;
--toastify-color-error: #e74c3c;
--toastify-color-transparent: rgba(255,255,255,0.7);
--toastify-icon-color-info: #3498db;
--toastify-icon-color-success: #07bc0c;
--toastify-icon-color-warning: #f1c40f;
--toastify-icon-color-error: #e74c3c;
--toastify-toast-background: #fff;
--toastify-font-family: sans-serif;
--toastify-text-color-light: #757575;
--toastify-text-color-dark: #fff;
--toastify-text-color-info: #fff;
--toastify-text-color-success: #fff;
```

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