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

# Ashley & Co. · Design System

> Quietly expressive scent, presented with editorial restraint.

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

Ashley & Co. pairs a warm, restrained palette with immersive product imagery and an editorial approach to shopping. Spacious image-led sections, compact sans-serif navigation, and delicate serif headlines make the storefront feel calm and tactile.

## North star

Let calm warm space and considered product photography lead; keep interface text quiet, compact, and editorial.

## Overview

The page is anchored by Gallery Sand (#f6f3f0), an uninterrupted warm canvas that lets product photography establish most of the mood. A pale butter surface (#faf9ea) distinguishes the scent-selector band, while Charcoal Gray (#3c3c3c) carries most navigation and supporting copy. Black (#000000) appears in selected text and interface details; fine gray borders separate quiet areas rather than framing every card. Neue Haas Grotesk Text handles compact navigation, captions, and controls, while Martina Plant brings a softer editorial voice to prominent headlines and selected body copy. The opening hero uses a large, asymmetrical photographic composition with small text blocks placed directly over the image. Further down, category imagery, product collections, journal stories, and ethos content alternate through broad, spacious sections. The layout feels like a curated magazine, with varied column counts and oversized photography rather than repeated boxed modules.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Sand | `#f6f3f0` | `--color-gallery-sand` | brand | Dominant page canvas and recurring section background, giving product imagery a warm, quiet setting. |
| Soft Charcoal | `#3c3c3c` | `--color-soft-charcoal` | neutral | Primary muted text for navigation, footer content, headings, and many text-only links. |
| Editorial Black | `#000000` | `--color-editorial-black` | semantic | Selected heading, link, and button text, plus interface details and dark image-led contrast. |
| Butter Mist | `#faf9ea` | `--color-butter-mist` | surface | Distinct pale surface for the scent-selector section, separating it from the warm canvas. |
| Quiet Line | `#dedfdb` | `--color-quiet-line` | neutral | Subtle hairlines and footer boundaries; use sparingly to divide content without boxes. |
| Pure White | `#ffffff` | `--color-pure-white` | semantic | Light navigation and text over dark photographic areas; not a general page background. |

### Semantic aliases

`--color-canvas` → `#f6f3f0` (Gallery Sand) · `--color-surface` → `#faf9ea` (Butter Mist) · `--color-text` → `#000000` (Editorial Black) · `--color-text-muted` → `#3c3c3c` (Soft Charcoal) · `--color-text-subtle` → `#ffffff` (Pure White) · `--color-border` → `#dedfdb` (Quiet Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f6f3f0` | 19:1 | AAA |
| `#000000` | `#faf9ea` | 19.8:1 | AAA |
| `#3c3c3c` | `#f6f3f0` | 9.98:1 | AAA |
| `#3c3c3c` | `#faf9ea` | 10.4:1 | AAA |
| `#ffffff` | `#f6f3f0` | 1.11:1 | fail |
| `#ffffff` | `#faf9ea` | 1.06:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Haas Grotesk Text | `--font-neue-haas-grotesk-text` | webfont | 500, 400 | Navigation, captions, compact links, buttons, and utility text. | Inter |
| Martina Plant | `--font-body` | webfont | 400, 500 | Editorial display headings and some larger descriptive copy. | Cormorant Garamond |

- **Neue Haas Grotesk Text:** Use regular and medium weights; interface text is small, mostly sentence case, with occasional uppercase category labels.
- **Martina Plant:** Use regular or medium weight with a natural, unforced case; headlines feel delicate rather than bold.

### Type scale — Augmented Fourth (ratio ≈ 1.449, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 500 | 1.1 | -0.005em | — | Martina Plant | Large serif headline introducing the hero story. |
| h2 | 24px | 500 | 1.1 | -0.005em | — | Martina Plant | Serif section titles and editorial subheadings. |
| body | 20px | 400 | 1.1 | 0.014em | — | Martina Plant | Serif descriptive copy for selected feature and editorial text. |
| caption | 12px | 500 | 1.2 | 0 | — | Neue Haas Grotesk Text | Compact sans-serif product labels and supporting metadata. |
| button | 12px | 500 | 1.2 | 0 | — | Neue Haas Grotesk Text | Small medium-weight sans-serif action labels. |
| nav | 12px | 400 | 1.2 | 0 | — | Neue Haas Grotesk Text | Small regular sans-serif primary and utility navigation. |
| link | 12px | 500 | 1.2 | 0 | — | Neue Haas Grotesk Text | Compact medium-weight sans-serif links and calls to action. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 5, 10, 15, 20, 30, 80, 120 px.
- Section rhythm 120px · element gap 15px · card padding — · max content width 1410px.

The measured page max width is 1410px, but the visual system frequently lets photography approach the viewport edges. Sections vary from two-column editorial splits to broad category strips, four-column product areas, and a pale multi-column scent selector. Most content aligns to a clear left edge, while text beside images stays compact. The spacing scale is spacious, with a measured 120px section gap and 15px element gap; preserve that long-form rhythm instead of compressing sections into a dense catalog.

## Shape & elevation

- Radius: pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat: no measured shadows or gradients, and cards are not given prominent rounded containers. Use thin, quiet separators where needed, including footer boundaries and understated slider rules. Product imagery provides the depth and tonal contrast; avoid adding raised panels or decorative framing.

## Imagery

Use tactile lifestyle and product photography as the main visual material: bottles, packaging, scent rituals, interiors, and people. Images are large, often cropped into asymmetric compositions or narrow product tiles, with subdued natural color and soft contrast. The hero photography fills much of the opening viewport and supports discreet overlay copy. The dominant gray tones in the screenshot come from imagery and should not be mistaken for the page palette.

## Components

### Overlay hero story

A large asymmetric photographic opening with a serif headline at lower left and compact supporting copy and link over the image.

### Category image navigation

A row of category photographs paired with small uppercase or compact labels, plus a short introductory text area.

### Featured product tiles

Product imagery in multi-column groupings with concise labels, scent names, and understated shop links.

### Tabbed best sellers

Compact uppercase collection tabs introduce a horizontal product selection, with restrained descriptions and small product details.

### Scent selector

A pale Butter Mist (#faf9ea) multi-column area combining a quiz prompt, scent links, notes, and a related image.

### Editorial journal feed

A short introductory text block sits beside large story images, with compact article captions and subtle horizontal rules.

### Ethos feature

A large lifestyle image shares a two-column section with a compact list of principles and supporting copy.

### Measured component styles

- **Primary button** (“Gentle Citrus”): transparent background · text #000000 · radius 0px · padding 0px · 500 12px Neue Haas Grotesk Text
- **Link** (“MEET THE WAXED PERFUME CLOCHE A consider”): transparent background · text #3c3c3c · radius 0px · padding 0px · 400 12px Neue Haas Grotesk Text
- **Navigation item** (“Scent Selector”): transparent background · text #3c3c3c · radius 0px · padding 0px · 400 12px Neue Haas Grotesk Text

## Do

- Use Gallery Sand (#f6f3f0) as the dominant page canvas.
- Reserve Butter Mist (#faf9ea) for a clearly distinct scent or discovery section.
- Use large, tactile photography to carry the visual emphasis.
- Pair delicate serif editorial headings with compact sans-serif interface text.
- Vary column structure to suit each content story.
- Keep separators thin and the overall interface flat.

## Don't

- Do not turn every section into a boxed card grid.
- Do not introduce bright accent colors absent from the measured palette.
- Do not use heavy shadows, gradients, or raised surfaces.
- Do not make navigation or captions large and dominant.
- Do not mistake photographic gray tones for the brand canvas color.
- Do not compress the generous section rhythm into a dense storefront.

## Agent prompt

Build a new Ashley & Co. page as a calm, image-led editorial storefront. Use Gallery Sand (#f6f3f0) for the main canvas and Soft Charcoal (#3c3c3c) for most navigation and supporting copy; use Editorial Black (#000000) selectively, Pure White (#ffffff) only where text overlays dark imagery, and Quiet Line (#dedfdb) for subtle dividers. A pale Butter Mist (#faf9ea) area can distinguish scent discovery. Set large editorial headings in a Martina Plant-like serif and compact navigation, captions, and controls in a Neue Haas Grotesk-like sans serif. Organize content in varied, spacious columns with broad photography, asymmetrical feature splits, and restrained product tiles. Keep controls visually quiet, avoid prominent card borders and shadows, and let tactile product and lifestyle images provide contrast and depth.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width-feeling asymmetric photo composition with lower-edge headline and compact supporting copy. | Discover link, Overlay story copy | Large lifestyle imagery, Serif headline, Compact text |
| 2 | category-nav | Introductory copy aligned beside a horizontal strip of category photographs. | Category browsing, View all link | Image-led categories, Small labels, Open layout |
| 3 | product-showcase | Short heading above a three-column row of product and campaign imagery. | Shop now links, Product discovery | Three-column image row, Concise product labels |
| 4 | product-grid | Collection introduction and tabs alongside a four-column product selection. | Collection tabs, Product selection, Add to cart | Compact product details, Unframed tiles, Small controls |
| 5 | feature-grid | Pale multi-column panel for quiz prompt, scent links, notes, image, and discovery links. | Scent quiz, Browse by scent, Browse by notes | Butter Mist surface, Column dividers, Compact lists |
| 6 | feature-split | Editorial three-part composition pairing large imagery with a narrow copy column and another image. | Explore featured item, Swipeable story | Large cropped photography, Serif title, Subtle rule |
| 7 | content-feed | Introductory text at left with large journal images arranged horizontally. | Read articles, Horizontal browsing | Editorial photography, Small story captions, Understated rule |
| 8 | feature-split | Large lifestyle image in one column with a compact principles list alongside. | Read more | Large monochrome image, Compact text list, Open spacing |
| 9 | footer | Brand mark and editorial statement beside grouped link columns, newsletter prompt, and service details. | Newsletter signup, Grouped navigation, Social links | Compact text, Multiple link columns, Fine divider |

## Source CSS custom properties (selected)

```css
--ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
--ease-out-quad: cubic-bezier(.32, .72, 0, 1);
--plyr-color-main: #000;
--swiper-pagination-color: #000;
--btn-text-color: #f6f3f0;
--btn-background-color: #434343;
--nav-sticky-duration: .2s;
--nav-sticky-ease: cubic-bezier(.4, 0, .2, 1);
--search-border-color: #939393;
--swiper-theme-color: #007aff;
--rc-color: #040404;
--rc-active-bg: #efefef;
--rc-active-color: #000000;
```

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