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

# Cupshe · Design System

> A bright, image-led wardrobe for every getaway.

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

Cupshe’s homepage pairs a restrained, light interface with expansive vacation and fashion photography. Clean navigation and editorial section titles guide shoppers from seasonal categories to product discovery and brand storytelling.

## North star

Keep the interface quiet and legible so full-width vacation photography and shoppable fashion categories carry the page.

## Overview

The page uses white as its main canvas, letting saturated teal water, warm natural settings, and clothing photography carry most of the visual character. Near-black text and occasional deep charcoal panels provide contrast, while a pale cream tint appears in the announcement strip, promotional cards, and footer areas. KMR Melange Grotesk forms the site’s typographic voice: uppercase display and section headings sit above small, practical navigation and product details. The homepage alternates full-bleed campaign imagery with centered category headings, tiled fashion grids, and more editorial split layouts. Product cards and community imagery keep shopping discovery close to the visual storytelling. Sections feel open and straightforward rather than heavily framed; hairlines and subtle neutral dividers appear mainly in utility and footer regions. The result is a clean retail shell that gives seasonal imagery room to lead without sacrificing clear browsing paths.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, header, open content areas, and light card surfaces. |
| Midnight Ink | `#04040c` | `--color-midnight-ink` | brand | Inverse footer and promotional surfaces, subscribe button, and selected muted or utility text. |
| Soft Butter | `#fffeee` | `--color-soft-butter` | surface | Warm pale surface used in section and footer treatments, contrasting gently with white. |
| Cool Mist | `#f7f9fa` | `--color-cool-mist` | surface | Subtle product-card surface behind shopping content. |
| True Black | `#000000` | `--color-true-black` | semantic | Navigation, footer links, product details, and primary body text. |
| Linen Edge | `#eae9cf` | `--color-linen-edge` | neutral | Pale border tone, measured most prominently in footer dividers. |
| Cloud Line | `#ebebeb` | `--color-cloud-line` | neutral | Quiet neutral hairlines and separators; not a defining campaign color. |
| Charcoal Type | `#191919` | `--color-charcoal-type` | neutral | Secondary dark text appearing in headings and supporting copy. |
| Graphite Type | `#262626` | `--color-graphite-type` | neutral | Dark heading and text detail, used as a softer alternative to black. |
| Silver Veil | `#f2f2f3` | `--color-silver-veil` | neutral | Subtle navigation divider tone rather than a prominent section background. |
| Dune Line | `#deddcc` | `--color-dune-line` | neutral | Muted input-border tone in the measured form styling. |
| Stone Gray | `#d2d4d5` | `--color-stone-gray` | surface | Minor secondary surface; not a defining brand or campaign color. |
| Soft Charcoal | `#333333` | `--color-soft-charcoal` | neutral | Occasional supporting text, subordinate to the main black typography. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f9fa` (Cool Mist) · `--color-surface-2` → `#fffeee` (Soft Butter) · `--color-surface-3` → `#04040c` (Midnight Ink) · `--color-surface-4` → `#d2d4d5` (Stone Gray) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#04040c` (Midnight Ink) · `--color-text-subtle` → `#fffeee` (Soft Butter) · `--color-border` → `#eae9cf` (Linen Edge)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f7f9fa` | 19.89:1 | AAA |
| `#000000` | `#fffeee` | 20.66:1 | AAA |
| `#000000` | `#04040c` | 1.03:1 | fail |
| `#04040c` | `#ffffff` | 20.43:1 | AAA |
| `#04040c` | `#f7f9fa` | 19.35:1 | AAA |
| `#04040c` | `#fffeee` | 20.1:1 | AAA |
| `#fffeee` | `#ffffff` | 1.02:1 | fail |
| `#fffeee` | `#f7f9fa` | 1.04:1 | fail |
| `#fffeee` | `#04040c` | 20.1:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| KMRMelangeGrotesk-Regular | `--font-body` | webfont | 400, 700, 500 | Primary body copy, navigation, links, and product information. | DM Sans |
| KMRMelangeGrotesk-SemiBold | `--font-display` | webfont | 400, 500, 600 | Display and section headings, plus emphasized interface labels. | Montserrat |
| Muli-Light | `--font-muli-light` | webfont | 400, 700 | Limited light-weight supporting text. | Nunito Sans |
| KMRMelangeGrotesk-Light | `--font-kmrmelangegrotesk-light` | webfont | 400 | Occasional light heading treatment. | DM Sans |
| -apple-system | `--font-apple-system` | system | 400 | System-font fallbacks and select compact button or card labels. | Inter |
| KMRMelangeGrotesk-ExtraBold | `--font-kmrmelangegrotesk-extrabold` | webfont | 400 | Strong h1 emphasis. | Montserrat |

- **KMRMelangeGrotesk-Regular:** Use regular weight for compact, clear retail copy; measured navigation and captions are commonly 14px.
- **KMRMelangeGrotesk-SemiBold:** Headings often use uppercase styling; keep letter spacing neutral and use semibold emphasis.
- **Muli-Light:** Use a light, unobtrusive voice where secondary copy needs softer emphasis.
- **KMRMelangeGrotesk-Light:** Measured for the h3 role; retain a light, open appearance rather than bold emphasis.
- **-apple-system:** Use for pragmatic utility text where the measured page falls back to a native sans serif.
- **KMRMelangeGrotesk-ExtraBold:** Measured h1 is uppercase; use sparingly for prominent hierarchy.

### Type scale — Perfect Fourth (ratio ≈ 1.303, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1.4 | 0 | uppercase | KMRMelangeGrotesk-SemiBold | Large uppercase campaign or hero display headlines. |
| h1 | 50px | 400 | 1.4 | 0 | uppercase | KMRMelangeGrotesk-ExtraBold | Strong uppercase primary page or campaign heading. |
| h2 | 44px | 400 | 3.3 | 0 | uppercase | KMRMelangeGrotesk-SemiBold | Uppercase section headings above category and product content. |
| h3 | 40px | 400 | 1.4 | 0 | — | KMRMelangeGrotesk-Light | Light-weight editorial heading within brand storytelling. |
| h4 | 36px | 400 | normal | 0 | — | KMRMelangeGrotesk-SemiBold | Semibold subheadings and supporting feature titles. |
| body | 16px | 400 | normal | 0 | — | KMRMelangeGrotesk-Regular | Default copy, descriptions, and brand-story text. |
| caption | 14px | 400 | 1.57 | 0 | — | KMRMelangeGrotesk-Regular | Compact product details and secondary labels. |
| nav | 14px | 400 | 1.57 | 0 | — | KMRMelangeGrotesk-Regular | Header navigation and utility links. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 32, 40, 56, 72 px.
- Section rhythm 40px · element gap 6px · card padding 133px · max content width 1360px.

The header combines a slim announcement strip, centered wordmark, utility icons, and a horizontal category navigation row. A broad 1360px measured page max width supports the desktop composition, while campaign sections break into full-bleed media. Category and product areas use tiled grids, often separated by centered headings; editorial blocks shift to split layouts. The measured spacing system is compact, with a 40px section gap and smaller element gaps, balanced by generous photographic areas. Footer information resolves into dense, aligned columns.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is largely flat, with white canvases and photographic surfaces doing the visual work. The measured shadow list is empty, and component corners are square in the sampled controls and cards. Use thin neutral borders and dividers sparingly for forms, navigation, and footer organization; cookie and promotional panels read as layered blocks through placement and contrasting fills rather than pronounced shadows.

## Imagery

Photography is the primary visual language: models wear seasonal swim, resort, and everyday clothing in pools, gardens, homes, and outdoor settings. Hero and campaign imagery spans the available width; category tiles use varied crops with small overlay labels. Product grids prioritize clear garment visibility, while community imagery adds a candid lifestyle feel. A few video placements support the campaign storytelling; there is no illustration-led or 3D visual system.

## Components

### Announcement strip

A narrow pale cream band carries centered promotional copy above the brand header; keep the message compact and high contrast.

### Store header

Center the Cupshe wordmark, place utility icons alongside it, and use a separate horizontal row for category navigation.

### Campaign hero

Use full-bleed vacation photography with oversized headline treatment, supporting copy, paired shopping links, and restrained carousel indicators.

### Category tiles

Arrange fashion categories as image-led grids with small, legible labels positioned over each photograph.

### Product cards

Keep product photography prominent; pair it with compact names, prices, and simple shopping controls on light surfaces.

### Subscribe form

Use a pale input surface, understated border treatment, and a dark square-cornered SUBSCRIBE button.

### Footer

Combine service benefits, link columns, newsletter signup, app references, and payment details across light and dark zones.

### Measured component styles

- **Primary button** (“SUBSCRIBE”): background #04040c · text #ffffff · radius 0px · padding 0px 30px · 500 14px KMRMelangeGrotesk-SemiBold
- **Link** (“Long Weekend Treat. 10% Off 3+ Items. Sh”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px KMRMelangeGrotesk-Regular
- **Input**: background #f5f3e3 · text #04040c · radius 0px · padding 0px 0px 0px 46px · 500 14px -apple-system
- **Card** (“View More”): background #f7f9fa · text #000000 · radius 0px · padding 0px 0px 531px 0px · 400 14px -apple-system
- **Navigation item** (“New & Trending Dresses Knits & Sweaters ”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px -apple-system

## Do

- Let fashion and destination photography lead each major section.
- Use Gallery White (#ffffff) as the primary interface canvas.
- Reserve Midnight Ink (#04040c) for inverse panels and strong actions.
- Use uppercase display headings to establish clear retail hierarchy.
- Keep category labels and product details compact and easy to scan.
- Alternate full-width campaigns with structured shopping grids.

## Don't

- Do not add a bright interface accent absent from the measured palette.
- Do not put heavy borders around every card or section.
- Do not obscure product photography with oversized controls.
- Do not make navigation compete with the campaign imagery.
- Do not use rounded-card styling; measured sampled corners are square.
- Do not treat colors inside campaign photography as interface tokens.

## Agent prompt

Build a fashion-retail page in Cupshe’s clean, vacation-led style. Use Gallery White (#ffffff) for the canvas, True Black (#000000) for most navigation and copy, and Midnight Ink (#04040c) for dark promotional panels and primary subscribe actions. Soft Butter (#fffeee) can warm announcement and footer surfaces; keep borders subtle with Linen Edge (#eae9cf). Set headings in an uppercase, semibold geometric sans and body text in a clean regular sans, with compact product captions. Structure the page with a quiet header, large photographic campaign, image-led category tiles, shoppable product cards, and editorial brand content. Use broad imagery, square corners, restrained dividers, and open white space between content groups. Keep controls clear but visually secondary to the clothing photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Announcement strip above centered wordmark, utility icons, and horizontal category navigation. | promotion message, category browsing, utility shortcuts | pale announcement band, centered logo, compact nav links |
| 2 | hero | Full-bleed campaign image with centered headline, short subcopy, two shopping links, and carousel indicators. | campaign carousel, shop by category | edge-to-edge photography, large overlay headline, paired CTAs |
| 3 | category-nav | Centered section title above a multi-tile category photography grid. | category discovery, direct category links | photo tiles, overlay labels, centered heading |
| 4 | hero | Full-width seasonal lifestyle image with centered campaign copy and shopping links. | seasonal campaign, shop the edit | wide photography, centered overlay copy |
| 5 | feature-grid | Three adjacent lifestyle-photo cards with short editorial headings and shopping links. | shop by style, editorial discovery | three-column imagery, text overlays, compact CTAs |
| 6 | feature-grid | Two large side-by-side lifestyle photographs with overlay copy. | shop resortwear, shop swim | paired image panels, overlay labels |
| 7 | video | Full-bleed video-led lifestyle panel with a centered message and discovery action. | brand storytelling, discover more | large video surface, centered overlay CTA |
| 8 | product-grid | Centered heading and tabs above a multi-column product card grid. | new arrivals tab, best sellers tab, product discovery | product photography, name and price, wishlist controls |
| 9 | feature-split | Editorial split composition with brand imagery, prominent statement, values list, and learn-more link. | brand introduction, values overview | two-column layout, editorial heading, text and image |
| 10 | gallery | Section heading and discovery link above a horizontal row of fashion images. | style inspiration, browse more looks | image gallery, compact section header |
| 11 | gallery | Community introduction followed by a large multi-image social-style gallery. | community proof, customer style discovery | user-style imagery, editorial introduction |
| 12 | cta | Dark two-column app promotion with benefits alongside phone and app-store visuals. | app download, welcome offer | inverse dark surface, phone mockup, store badges |
| 13 | footer | Service-benefit row above multi-column links, newsletter form, brand details, and payment marks. | newsletter signup, customer support, footer navigation | light footer surface, link columns, subscription input |

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