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

# Sackville & Co. · Design System

> Playful product stories in bold, open space

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

Sackville & Co.’s storefront pairs a warm off-white canvas with oversized product imagery and confident, clean typography. Product drops, collaborations, and compact catalog grids create a playful editorial rhythm without conventional ecommerce chrome.

## North star

Let large, expressive product imagery and FoundersGrotesk typography lead, while keeping the interface flat, pale, and uncluttered.

## Overview

The page is grounded in a warm pale canvas (#f3f4ee), which lets colorful campaign imagery and product photography carry most of the visual energy. Ink-dark text (#231f20) keeps product names, prices, and navigation legible, while Sackville blue (#245dc5) appears prominently in the age-gate screen and as a crisp outline accent. A vivid red-orange section (#f52302) is reserved for a featured product block, rather than used as a general interface color. FoundersGrotesk drives nearly all typography: oversized uppercase headlines contrast with comparatively small product details and generously led body text. A very small amount of TimesNow SemiLight adds a softer serif note. The layout alternates full-bleed product and campaign images with restrained product grids, keeping the page image-led while allowing broad pale intervals to reset the eye. Product cards are flat and minimally framed; thin borders and occasional outlined controls provide structure without heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#f3f4ee` | `--color-gallery-white` | brand | Main page canvas and recurring section background, including the spacious intervals between product features. |
| Sackville Blue | `#245dc5` | `--color-sackville-blue` | brand | Age-gate text and outlined over-21 control; a crisp brand accent in headings and borders. |
| Soft Ink | `#231f20` | `--color-soft-ink` | neutral | Primary product names, prices, body copy, links, and most navigation text. |
| True Black | `#000000` | `--color-true-black` | neutral | Appears in some navigation text; secondary to the softer measured ink color. |
| Paper White | `#f8f8f8` | `--color-paper-white` | surface | Light section surface; visually close to the main canvas and used as a quiet background. |
| Peach Blush | `#ffc6a6` | `--color-peach-blush` | surface | Warm section surface and product-image backdrop, most visible behind catalog photography. |
| Signal Vermilion | `#f52302` | `--color-signal-vermilion` | accent | Distinctive red-orange background for the featured I LOVE NY grinder section. |
| Coral Note | `#f04736` | `--color-coral-note` | semantic | Limited coral-colored heading or text detail; not a principal interface color. |
| Clay Accent | `#b45e42` | `--color-clay-accent` | semantic | Muted terracotta text within campaign or product content, not a core UI surface. |
| Mauve Gray | `#b8a5a6` | `--color-mauve-gray` | semantic | Rare muted text color, likely confined to small content details. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Small navigation surface detail; not the dominant page background. |
| Charcoal Brown | `#383435` | `--color-charcoal-brown` | neutral | Occasional secondary text tone, visually close to the primary soft ink. |

### Semantic aliases

`--color-canvas` → `#f3f4ee` (Gallery White) · `--color-surface` → `#f8f8f8` (Paper White) · `--color-surface-2` → `#ffc6a6` (Peach Blush) · `--color-text` → `#231f20` (Soft Ink) · `--color-text-muted` → `#f3f4ee` (Gallery White) · `--color-border` → `#245dc5` (Sackville Blue) · `--color-accent` → `#245dc5` (Sackville Blue) · `--color-accent-2` → `#ffc6a6` (Peach Blush) · `--color-accent-3` → `#f52302` (Signal Vermilion)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#231f20` | `#f3f4ee` | 14.74:1 | AAA |
| `#231f20` | `#f8f8f8` | 15.35:1 | AAA |
| `#231f20` | `#ffc6a6` | 10.77:1 | AAA |
| `#f3f4ee` | `#f8f8f8` | 1.04:1 | fail |
| `#f3f4ee` | `#ffc6a6` | 1.37:1 | fail |
| `#245dc5` | `#f3f4ee` | 5.51:1 | AA |
| `#245dc5` | `#f8f8f8` | 5.74:1 | AA |
| `#245dc5` | `#ffc6a6` | 4.03:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| FoundersGrotesk | `--font-body` | webfont | 400 | Primary display, headings, navigation, links, body copy, and product information. | Space Grotesk |
| TimesNow SemiLight | `--font-timesnow-semilight` | webfont | 400 | Sparse serif contrast in secondary product or editorial details. | Cormorant Garamond |

- **FoundersGrotesk:** Regular weight throughout; headlines often uppercase, with compact line heights and oversized scale.
- **TimesNow SemiLight:** Used sparingly at regular weight for a softer, editorial note beside the dominant sans serif.

### Type scale — Perfect Fifth (ratio ≈ 1.519, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 129.5px | 400 | 0.8 | 0 | — | FoundersGrotesk | Oversized campaign or hero display lettering. |
| h1 | 99px | 400 | 0.8 | 0 | uppercase | FoundersGrotesk | Large uppercase age-gate and primary headline text. |
| h2 | 85px | 400 | 0.94 | 0 | — | FoundersGrotesk | Prominent product feature and editorial section headings. |
| h3 | 72px | 400 | 1 | 0 | uppercase | FoundersGrotesk | Uppercase collection or feature headings. |
| h4 | 60.5px | 400 | 0.8 | 0 | — | FoundersGrotesk | Secondary feature titles and large product names. |
| body | 16px | 400 | 2.19 | 0 | — | FoundersGrotesk | Supporting copy and product descriptions. |
| nav | 38px | 400 | 1.15 | 0 | uppercase | FoundersGrotesk | Large uppercase navigation labels, especially in expanded navigation. |
| link | 23px | 400 | 1 | 0 | uppercase | FoundersGrotesk | Uppercase calls to action and prominent product links. |

OpenType features in use: `"liga"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 2, 5, 6, 9, 10, 19, 20, 21, 22, 26, 40, 43, 58, 60, 64 px.
- Section rhythm 60px · element gap 2px · card padding — · max content width 1354px.

The measured page content reaches a maximum width of 1354px, with comfortable density and a measured 60px section gap. Most featured sections are single-column and image-led, often using full-bleed media; catalog sections switch to centered product grids of three or four columns. Headings and product details generally align to the start, while one merchandise grid centers its text. Broad pale intervals give the long scroll a relaxed, gallery-like cadence.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is largely flat, with no measured shadows or gradient treatments. Image blocks and colored section bands provide depth and contrast instead of card elevation. Thin rules and outlined controls do the limited structural work; product cards remain visually open, with text placed directly below the imagery.

## Imagery

Photography dominates: polished close-ups of metal accessories, lifestyle and fashion campaign collages, product stills, and collaboration imagery. Large campaign panels are often full-bleed or nearly full-width; catalog items sit on soft peach backdrops. Two full-width video sections interrupt the still-image sequence. Saturated hues inside product graphics and campaign imagery belong to the media, not necessarily to the interface palette.

## Components

### Age gate

Split-screen entry panel with a blue-toned campaign image and a pale canvas area. The over-21 option is a large blue outlined oval; the under-21 option is unframed.

### Featured product panel

Large image-led product feature with product title and price set in oversized, dark sans-serif type against the pale canvas.

### Campaign media block

Full-width still-image or video panel showing product collaborations and lifestyle campaigns, with minimal surrounding interface decoration.

### Product grid card

Flat product image over a light peach field, followed by a small uppercase descriptor, dark product title, and price.

### Collection grid

Multi-column product listing with compact image tiles, straightforward labels, and ample pale space around the grid.

### Color-block feature

Featured product content sits within a saturated red-orange section, creating a deliberate contrast with the otherwise pale page.

### Measured component styles

- **Primary button** (“I’M OVER 21”): transparent background · text #245dc5 · border 4px solid #245dc5 · radius 50% · padding 0px · 400 99px FoundersGrotesk · uppercase
- **Link** (“PLATINUM POWERHOUSE SILVER GILDED GRINDE”): transparent background · text #231f20 · radius 0px · padding 0px · 400 16px FoundersGrotesk
- **Navigation item** (“STORIES”): transparent background · text #231f20 · radius 0px · padding 0px · 400 38.16px FoundersGrotesk · uppercase

## Do

- Use Gallery White (#f3f4ee) as the main page canvas.
- Let product photography occupy large, uninterrupted areas.
- Use FoundersGrotesk-style sans typography for most content.
- Set prominent campaign headlines in oversized uppercase type where appropriate.
- Keep catalog cards flat with concise labels and prices.
- Reserve Sackville Blue (#245dc5) for crisp brand accents and outlines.
- Use strong color blocks selectively for featured products.

## Don't

- Don't add drop shadows to product cards.
- Don't turn every section into a boxed card.
- Don't use saturated accent colors as the default page background.
- Don't crowd large campaign imagery with extra interface controls.
- Don't make product metadata compete with the product title.
- Don't mistake colors inside campaign artwork for global UI colors.

## Agent prompt

Build a new ecommerce page in Sackville & Co.’s image-led editorial style. Use Gallery White (#f3f4ee) as the broad canvas, Soft Ink (#231f20) for core copy and product names, and Sackville Blue (#245dc5) for selective brand outlines or accents. Keep the interface flat and let oversized campaign photography, product images, and occasional video define the rhythm. Use a FoundersGrotesk-like sans serif with bold scale changes: expressive uppercase feature headings, then compact product labels and clear prices. Alternate expansive single-product storytelling with tidy multi-column product grids, leaving generous pale intervals between sections. Peach Blush (#ffc6a6) can support product-image fields; reserve Signal Vermilion (#f52302) for a single intentional feature band. Avoid card shadows, heavy borders, and generic dense storefront chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split age-check entry with full-height campaign media beside a pale text and choice panel. | age confirmation, over-21 choice | blue outlined oval control, large uppercase text, split screen |
| 2 | product-showcase | Single-column, full-bleed campaign feature centered on the featured pierced ashtray. | featured product link | large campaign image, small product caption |
| 3 | product-showcase | Single-column, full-bleed campaign collage focused on the pierced bowler bag. | featured product link | fashion collage, image overlay caption |
| 4 | video | Full-bleed video panel occupying a single-column section. | video playback | edge-to-edge media |
| 5 | product-showcase | Single featured product presentation with an image and text in a restrained two-part composition. | back-in-stock cue, product link | product still, large dark title, price |
| 6 | product-showcase | Single-column, full-bleed product campaign image. | featured product link | colorful campaign artwork, small image caption |
| 7 | product-showcase | Single-column full-bleed collaboration image on the pale page. | limited-edition cue, featured product link | collaboration media, image caption |
| 8 | video | Full-bleed single-column video panel. | video playback | edge-to-edge video |
| 9 | product-grid | Multi-row product catalog with multiple image cards and left-aligned product details. | product browsing, sold-out status | product image tiles, small descriptors, names and prices |
| 10 | product-showcase | Single-column, full-bleed product campaign image. | featured product link | lifestyle product photograph, small caption |
| 11 | product-grid | Four-column centered product grid with image tiles and compact information below. | product browsing | four-column catalog, product imagery, prices |
| 12 | product-showcase | Featured product composition in a saturated red-orange section band. | back-in-stock cue, product link | red-orange background, large dark product title |
| 13 | other | Short, mostly empty pale section between featured content and the following catalog. | visual breathing room | plain canvas |
| 14 | product-grid | Compact product listing with two hat items and their details. | product browsing | product imagery, product names, prices |

## Source CSS custom properties (selected)

```css
--kl-reviews-color-light-gray: #e9e9eb;
```

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