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

# Subset · Design System

> Soft essentials, styled with editorial restraint.

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

Subset pairs organic-cotton innerwear with a quiet editorial storefront, using generous white space and warm product imagery. Refined serif headlines soften a practical sans-serif system, while restrained colour accents guide shopping actions.

## North star

Let editorial-quality organic-cotton photography lead, while a white-and-ivory interface keeps shopping clear and unforced.

## Overview

The page is built on a clean white canvas, with pale warm-ivory panels and occasional tan blocks separating merchandise and editorial features without heavy framing. Near-black text anchors navigation and product information; muted blue marks selected shopping or fit-guide actions, while orange appears sparingly in badges and review details. Terracotta reds and green hues are most prominent in campaign photography and should be treated as image content, not extra interface colours. FoundersGrotesk handles navigation, body copy, product labels and controls in a straightforward, compact manner. TTRamillas_Light gives section headlines a softer, editorial character. The layout alternates centered headings, product grids, category tiles and split image-copy features. Broad section breathing room offsets dense product cards, while real-life photography carries most of the visual warmth. Borders and component surfaces stay subtle; the overall effect is flat, composed and tactile.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#241f20` | `--color-soft-ink` | brand | Primary headings, body copy, navigation, links and product text. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and clean negative space around product and editorial sections. |
| Denim Blue | `#6487ba` | `--color-denim-blue` | accent | Shopping CTA and fit-guide action; a restrained cool counterpoint to warm photography. |
| Linen Ivory | `#f5f4ee` | `--color-linen-ivory` | surface | Product cards, category panels, pale section surfaces and quiet borders. |
| Apricot Signal | `#ff965b` | `--color-apricot-signal` | accent | Small NEW badges and review highlights; use as a limited attention cue. |
| Clay Red | `#bf381c` | `--color-clay-red` | semantic | Accent recorded in button data; visually, red is chiefly campaign and apparel imagery. |
| Cocoa Merlot | `#5c2722` | `--color-cocoa-merlot` | semantic | Measured accent with no clear recurring interface role; treat as a restrained supporting colour. |
| True Black | `#000000` | `--color-true-black` | neutral | Measured button and border detail; use only where a sharp outline or icon requires it. |
| Oat Beige | `#dbc3ad` | `--color-oat-beige` | surface | Warm campaign panel, notably the Advent Calendar split feature. |
| Meadow Green | `#8bbd78` | `--color-meadow-green` | semantic | Sparse text or supporting detail; green is also prominent in campaign imagery. |
| Quiet Gray | `#e4e4e4` | `--color-quiet-gray` | neutral | Secondary measured border tone; keep dividers understated. |
| Deep Pine | `#233736` | `--color-deep-pine` | accent | Dark green button detail, echoed by the hero CTA; use for high-contrast action surfaces. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f4ee` (Linen Ivory) · `--color-surface-2` → `#dbc3ad` (Oat Beige) · `--color-text` → `#241f20` (Soft Ink) · `--color-border` → `#f5f4ee` (Linen Ivory) · `--color-accent` → `#6487ba` (Denim Blue) · `--color-accent-2` → `#bf381c` (Clay Red) · `--color-accent-3` → `#5c2722` (Cocoa Merlot) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#241f20` | `#ffffff` | 16.26:1 | AAA |
| `#241f20` | `#f5f4ee` | 14.75:1 | AAA |
| `#241f20` | `#dbc3ad` | 9.62:1 | AAA |
| `#6487ba` | `#ffffff` | 3.67:1 | AA-large |
| `#6487ba` | `#f5f4ee` | 3.33:1 | AA-large |
| `#6487ba` | `#dbc3ad` | 2.17:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| FoundersGrotesk | `--font-body` | webfont | 400, 500, 700 | Navigation, body copy, product details, buttons, captions and labels. | DM Sans |
| TTRamillas_Light | `--font-display` | webfont | 400 | Large editorial section headings and campaign headline. | Cormorant Garamond |

- **FoundersGrotesk:** Mostly regular weight; use medium for eyebrow labels, slightly tracked captions and uppercase eyebrow text.
- **TTRamillas_Light:** Light, regular-weight serif with subtly tight tracking; preserve sentence case and an elegant, open rhythm.

### Type scale — Major Third (ratio ≈ 1.281, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 400 | 1.24 | -0.01em | — | TTRamillas_Light | Hero campaign headline in the central overlay. |
| h2 | 40px | 400 | 1.24 | -0.01em | — | TTRamillas_Light | Centered editorial and section titles across the homepage. |
| h3 | 24px | 400 | 1.4 | 0 | — | FoundersGrotesk | Subsection headings and selected feature titles. |
| body | 20px | 400 | 1.53 | 0 | — | FoundersGrotesk | Supporting descriptions and review text. |
| caption | 17px | 400 | 1.53 | 0.025em | — | FoundersGrotesk | Product metadata and compact supporting labels. |
| button | 15px | 400 | 1.53 | 0.028em | — | FoundersGrotesk | Shopping, fit-guide and newsletter actions. |
| link | 20px | 400 | 1.53 | 0 | — | FoundersGrotesk | Navigation and inline shopping links. |
| eyebrow | 16px | 500 | 1.53 | 0.05em | uppercase | FoundersGrotesk | Small uppercase campaign and feature pre-headings. |

## Spacing & layout

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

The homepage uses a broad centered canvas, with measured content width up to 1408px, and alternates full-width campaign imagery with contained merchandise grids. Product collections favor three columns; category navigation expands to four or five image tiles. Split features place image and copy side by side, while titles are typically centered. Sections have a comfortable, unhurried rhythm, with clear white intervals between blocks. Dense product-card information sits close to merchandise imagery, contrasted with spacious review and editorial areas.

## Shape & elevation

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

The interface is predominantly flat, with no measured shadow system. Pale ivory card surfaces and restrained borders distinguish merchandise from the white canvas without floating-card effects. The hero uses a translucent overlay above its photograph, and split campaign blocks rely on adjacent colour fields rather than depth. Keep outlines subtle and avoid decorative elevation.

## Imagery

Photography is the primary visual language: close product views show fabric and colour, while lifestyle images feature diverse models in natural poses and warm interiors. The opening hero uses a soft-focus, full-bleed campaign image behind a translucent pale text panel. Product grids use consistent, isolated garment views against warm light surfaces. Avoid illustration-led or 3D styling; let real materials and bodies provide texture.

## Components

### Announcement and navigation

A narrow green campaign strip sits above a white navigation row, with compact links, centered wordmark, and utility actions.

### Hero campaign panel

Full-width lifestyle image with a centered translucent light panel, serif headline, brief copy, dark green CTA and review proof.

### Product card grid

Three-column merchandise display with warm ivory card backgrounds, garment photography, concise details, colour swatches and quick-add controls.

### Category tiles

Image-led category cards with centered labels and product counts; arrange multiple cards in a single horizontal row.

### Editorial split feature

Pair a large lifestyle or campaign image with centered text and a single action on a contrasting warm panel.

### Review carousel

Centered serif heading, a thin divider, multiple testimonial columns, compact reviewer details and minimal pagination dots.

### Newsletter signup

Footer signup area with a short discount headline, privacy note, email input and blue action button.

### Measured component styles

- **Primary button** (“3-Pack $55 $60”): background #6487ba · text #ffffff · border 1px solid #000000 · radius 0px · padding 5px · 400 16px FoundersGrotesk
- **Secondary button** (“S”): background #f5f4ee · text #241f20 · border 1px solid #f5f4ee · radius 0px · padding 4px 8px 6.4px 8px · 700 17.008px FoundersGrotesk
- **Link** (“NEW”): transparent background · text #241f20 · radius 0px · padding 0px · 400 17.008px FoundersGrotesk
- **Input**: transparent background · text #333333 · border 1px solid #211d1d · radius 0px · padding 18px 40px 18px 18px · 400 14px FoundersGrotesk
- **Card** (“Quick add +”): background #f5f4ee · text #241f20 · radius 0px · padding 0px · 400 17.008px FoundersGrotesk
- **Badge** (“NEW”): background #ff965b · text #ffffff · radius 0px · padding 8px 10px · 500 13px FoundersGrotesk

## Do

- Keep the canvas predominantly white and use ivory for quiet section or card separation.
- Use the light serif face for prominent editorial headings.
- Keep navigation, product information and controls in a clear sans-serif.
- Let apparel and lifestyle photography provide the strongest colour.
- Use blue and deep pine selectively for clear actions.
- Keep cards flat, with subtle surface contrast rather than shadows.

## Don't

- Do not turn campaign reds from product photography into default interface colours.
- Do not crowd section headings against adjacent content.
- Do not use heavy shadows or raised dashboard-style cards.
- Do not apply the display serif to every label and product detail.
- Do not add gradients or decorative effects absent from the page.
- Do not make every CTA brightly coloured or equally prominent.

## Agent prompt

Build a new Subset-style fashion storefront page with a calm editorial tone. Use Gallery White (#ffffff) as the main canvas and Linen Ivory (#f5f4ee) for soft card and section surfaces; use Soft Ink (#241f20) for readable copy. Pair TTRamillas_Light-style serif display headings with a practical FoundersGrotesk-style sans-serif for navigation, product details and controls. Lead with authentic organic-cotton lifestyle photography, then organize shopping content into clean product grids and image-led category tiles. Reserve Denim Blue (#6487ba) and Deep Pine (#233736) for clear, occasional actions; keep Apricot Signal (#ff965b) to small badges. Keep the composition flat, spacious and centered, with warm imagery, understated dividers and no ornamental shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign photography with centered translucent copy panel. | Campaign CTA, Review proof | Serif headline, Dark green button, Image overlay |
| 2 | product-grid | Centered heading above a three-column product collection. | Quick add, Variant selection, Review counts | Ivory cards, Product photography, Small NEW badges |
| 3 | feature-split | Two-column image and warm beige campaign panel. | Campaign explanation, Single CTA | Lifestyle image, Oat Beige surface, Centered copy |
| 4 | category-nav | Centered heading above four image-led category tiles. | Category discovery, Direct category links | Editorial photography, Caption strips |
| 5 | feature-grid | Centered title with three evenly spaced editorial feature columns. | Brand education, Benefit scanning | Image panels, Overlay labels, Short captions |
| 6 | testimonials | Centered title, thin divider and three testimonial columns. | Review carousel, Verified customer context | Italic quote text, Pagination dots, Minimal controls |
| 7 | category-nav | Centered heading above five side-by-side image category cards. | Shop by category, Product-count cues | Model photography, Ivory caption area |
| 8 | feature-split | Two-column lifestyle image and centered explanatory copy. | Fit guidance, Sizing CTA | Lifestyle photo, Blue action button |
| 9 | gallery | Centered social heading above a wide multi-image feed. | Social discovery, Instagram handle link | Lifestyle image tiles, Carousel pagination |
| 10 | other | Three-column strip of service benefits with simple icons. | Reassurance messaging | Small circular icons, Centered captions |
| 11 | footer | Three-column footer signup and link groups above a compact legal bar. | Email signup, Support navigation | Outlined input, Blue submit action, Compact link lists |

## Source CSS custom properties (selected)

```css
--oke-widget-spaceAbove: 20px;
--oke-widget-spaceBelow: 20px;
--oke-starRating-spaceAbove: 0px;
--oke-starRating-spaceBelow: 0px;
--oke-button-backgroundColor: #6487BA;
--oke-button-backgroundColorHover: #6487BA;
--oke-button-backgroundColorActive: #6487BA;
--oke-button-textColor: #FFFFFF;
--oke-button-textColorHover: #FFFFFF;
--oke-button-textColorActive: #FFFFFF;
--oke-button-borderColor: #6487BA;
--oke-button-borderColorHover: #6487BA;
--oke-button-borderColorActive: #6487BA;
--oke-button-borderRadius: 0px;
--oke-button-borderWidth: 1px;
--oke-button-fontWeight: 400;
--oke-button-fontSize: 14px;
--oke-button-fontFamily: 'Basis Grotesque Bold',sans-serif, sans-serif;
--oke-border-color: #233735;
--oke-border-width: 1px;
--oke-text-primaryColor: #000000;
--oke-text-secondaryColor: #000000;
--oke-text-small: 16px;
--oke-text-regular: 16px;
--oke-text-large: 16px;
--oke-text-fontFamily: inherit;
--oke-avatar-backgroundColor: #E5E5EB;
--oke-avatar-placeholderTextColor: #2C3E50;
--oke-highlightColor: #FF965B;
--oke-shadingColor: #F7F7F8;
--oke-attributeBar-shadingColor: #FF965B;
--oke-attributeBar-borderColor: #9A9DB1;
--oke-attributeBar-backgroundColor: #E3E3E3;
--oke-attributeBar-markerColor: #FFFFFF;
--oke-filter-backgroundColor: #FFFFFF;
--oke-filter-backgroundColorActive: #6487BA;
--oke-filter-borderColor: #6487BA;
--oke-filter-borderColorActive: #6487BA;
--oke-filter-textColor: #6487BA;
--oke-filter-textColorActive: #FFFFFF;
```

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