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

# Cider · Design System

> Expressive fashion campaigns on a crisp, minimal canvas

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

Cider pairs a restrained black-and-white storefront with full-bleed fashion campaign imagery in warm, seasonal palettes. A compact utility header and slim service strip give way to a scrollable editorial collage of category and collection promotions.

## North star

Keep the interface quiet and monochrome so full-bleed fashion photography and its editorial overlays lead the experience.

## Overview

The page uses a white canvas and near-monochrome interface so the campaign photography carries nearly all of the visual colour. Black anchors the navigation, service strip, icons and key text; muted greys appear in secondary copy and fine footer rules. The images supply the warm leather, autumnal brown, cream and occasional cool neutrals, but these are photographic content rather than a reusable brand palette. A compact sans-serif utility system sits above oversized campaign imagery. The hero overlays a large, high-contrast editorial headline and supporting copy directly on the photograph, while later blocks alternate split category tiles with wide collection banners. The composition is deliberately image-led, using edge-to-edge media and narrow white separators instead of decorative containers. Repeated, clearly framed promotional areas create a steady browsing rhythm, while the header and footer remain practical and understated.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, header and footer background, and the narrow dividers between campaign images. |
| Runway Ink | `#000000` | `--color-runway-ink` | neutral | Navigation and utility text, icons, the announcement band, and primary dark interface details. |
| Soft Charcoal | `#333333` | `--color-soft-charcoal` | neutral | Secondary footer links and subdued supporting text. |
| Quiet Line | `#e5e5e5` | `--color-quiet-line` | neutral | Fine footer and interface separators; keep rules subtle against the white canvas. |
| Muted Graphite | `#999999` | `--color-muted-graphite` | neutral | Low-emphasis footer copy and muted text details. |
| Cloud Grey | `#f1f1f1` | `--color-cloud-grey` | surface | Minor pale footer or interface details; not a defining campaign or brand colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Runway Ink) · `--color-text-muted` → `#333333` (Soft Charcoal) · `--color-text-subtle` → `#999999` (Muted Graphite) · `--color-border` → `#e5e5e5` (Quiet Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#999999` | `#ffffff` | 2.85:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Neue | `--font-body` | system | 400, 700 | Measured interface font for navigation, body text, captions and headings. | Inter |

- **Helvetica Neue:** Measured roles use regular and bold weights; utility text is often uppercase, while navigation and captions retain mixed case.

### Type scale — Custom (ratio ≈ 2.571, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 700 | 1.14 | 0 | uppercase | Helvetica Neue | Large uppercase campaign or page heading; campaign lettering may be image artwork. |
| body | 14px | 700 | 1.15 | 0 | uppercase | Helvetica Neue | Bold uppercase promotional labels and compact emphasis copy. |
| caption | 12px | 400 | 1.33 | 0 | — | Helvetica Neue | Small supporting copy and secondary campaign details. |
| nav | 14px | 400 | 1.43 | 0 | — | Helvetica Neue | Regular-weight storefront navigation and utility links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 5, 8, 10, 12, 16, 20, 24, 48 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1416px.

The measured page uses a comfortable-density layout with a maximum content width of 1416px, close to the viewport width shown. A compact horizontal header centers the Cider wordmark between navigation and utility controls; a narrow black service strip sits directly beneath. The hero and subsequent campaign blocks use full-bleed media, with split tiles and wide banners creating varied alignment. White separators define image boundaries. The measured spacing scale is built around a 4px base, with a 48px section gap; preserve generous campaign breathing room without adding arbitrary card padding.

## Shape & elevation

- Radius: input `2px` · pill `9999px`
- No box shadows measured: the page is flat.

The measured system reports no shadows, and the screenshots reinforce a flat, print-like presentation. Separate content with white space, image boundaries and restrained hairlines rather than raised cards. Keep the header and service strip clearly stacked, but avoid unnecessary depth effects or decorative containers.

## Imagery

Fashion photography is the dominant visual system: large campaign portraits, styling details, and seasonal category imagery fill nearly the entire page. The first hero frames a reclining model across a warm leather setting, with white editorial copy and a bordered CTA overlaid on the left. Later promotions alternate paired portrait tiles and panoramic collection artwork. Treat these colours as image-specific, not UI tokens.

## Components

### Utility header

White horizontal bar with menu and category links at left, centered Cider wordmark, and search plus compact account, wishlist and shopping icons at right.

### Service announcement strip

Slim black band immediately beneath the header, using small white shipping and returns messages arranged across the bar.

### Campaign hero

Full-width fashion image with a large white editorial headline, short supporting line and outlined shop CTA overlaid near the left edge.

### Split category tiles

Adjacent edge-to-edge campaign images with centered white uppercase category labels and narrow white separation.

### Collection banner

Wide image-led promotion with oversized collection lettering and a small contrasting shop action embedded in the composition.

### Footer and app links

White footer with grouped company and help links, app-store actions, signup and social details, separated by fine grey rules.

### Measured component styles

- **Link** (“NEW IN”): transparent background · text #000000 · radius 0px · padding 0px · 400 0px Helvetica Neue
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 700 12px Helvetica Neue
- **Navigation item** (“Sale”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Helvetica Neue

## Do

- Keep the storefront interface black and white.
- Let campaign photography dominate each promotional block.
- Use restrained sans-serif typography for interface copy.
- Place concise campaign copy directly over imagery when legible.
- Use white separators to define image-grid boundaries.
- Keep utility navigation compact and easy to scan.

## Don't

- Do not treat photographed browns as brand colour tokens.
- Do not add gradients or decorative colour accents.
- Do not place every campaign inside a rounded card.
- Do not add shadows to the flat storefront surfaces.
- Do not let interface chrome compete with the imagery.
- Do not invent spacing or radii beyond measured values.

## Agent prompt

Build a new Cider-style fashion storefront page with a clean, white Gallery White (#ffffff) canvas and restrained Runway Ink (#000000) interface. Keep navigation compact, with a centered wordmark, utility controls, and a slim dark service strip. Use full-bleed fashion photography as the primary content; treat warm campaign colours as image content, not brand tokens. Arrange promotions as a large editorial hero, split category tiles, and wide collection banners, separated by crisp white boundaries. Use Helvetica Neue or a close sans-serif substitute such as Inter, with regular navigation, bold uppercase promotional labels, and strong editorial headings. Keep the layout flat: no shadows, no ornamental gradients, and only quiet rules such as Quiet Line (#e5e5e5) in supporting areas. Make the imagery and concise overlays the focus.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Full-bleed campaign gallery beneath a compact header and service strip, followed by a multi-column footer. | category navigation, campaign links, search and account utilities, app-store links | centered wordmark, black announcement band, split image tiles, editorial hero overlay, fine footer rules |

## Source CSS custom properties (selected)

```css
--cmp-brand-color: #ff4603;
--cmp-primary-color: #ff4603;
--cmp-info-color: #000;
--cmp-success-color: #52bf30;
--cmp-danger-color: #fb2222;
--cmp-warning-color: #ffbc3a;
--cmp-text-color: #000;
--cmp-active-color: #fff;
--cmp-font-size-9: 9px;
--cmp-font-size-10: 10px;
--cmp-font-size-12: 12px;
--cmp-font-size-14: 14px;
--cmp-font-size-16: 16px;
--cmp-font-size-18: 18px;
--cmp-font-size-20: 20px;
--cmp-font-size-24: 24px;
--cmp-font-size-28: 28px;
--cmp-font-size-36: 36px;
--cmp-font-size-44: 44px;
--cmp-font-weight-lighter: 400;
--cmp-font-weight-bold: 700;
--cmp-font-weight-bolder: 900;
--cmp-base-font-family: Helvetica Neue,-apple-system,system-ui,Helvetica,Arial,Roboto,sans-seri;
--cmp-price-integer-font-family: Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif;
--cmp-border-color: #000;
--cmp-border-width-base: 1px;
--cmp-border-radius-sm: 2px;
--cmp-border-radius-md: 4px;
--cmp-border-radius-lg: 10px;
--cmp-border-radius-max: 20px;
--cmp-popover-text-color: #fff;
--cmp-popover-background: #000;
--cmp-button-font-size: 14px;
--cmp-button-font-weight: 700;
--cmp-button-color: #fff;
--cmp-button-text-color: #000;
--cmp-background-color: #fae5de;
--cmp-button-border-color: #000;
--cmp-button-border-width: 2px;
--cmp-button-border-radius: 20px;
```

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