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

# Ashton Bespoke · Design System

> Quiet editorial design rooted in enduring craftsmanship

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

A spacious, editorial homepage introduces Ashton Bespoke through workshop footage, refined typography, and carefully composed project imagery. Muted stone, dark ink, and oxblood create a restrained setting for handcrafted work.

## North star

Keep the stone canvas quiet and spacious so craft photography and refined uppercase serif headings carry the story.

## Overview

The visual strategy is restrained and editorial: a warm stone canvas (#e0ded8) runs through most of the page, letting workshop and interior photographs provide the changing colour and texture. Dark charcoal (#262626) carries body copy and headings, while deep oxblood (#38141b) anchors the opening full-bleed workshop video and the navigation treatment. A near-black shade appears as part of the hero overlay rather than a general content colour; white is reserved for legibility over the darkened video. Display headings use an elegant uppercase serif with generous tracking, set against compact, plain sans-serif copy. The layout alternates quiet, spacious text-and-image splits with broader photographic moments. Project imagery is arranged in a simple two-column presentation, with titles and location captions kept close to each image. The page feels comfortable rather than dense: broad section pauses, open stone-coloured fields, and little visible decoration keep attention on materials, people, and finished interiors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Workshop Stone | `#e0ded8` | `--color-workshop-stone` | brand | Main page canvas and muted text tone; carries the spacious content sections. |
| Charcoal Ink | `#262626` | `--color-charcoal-ink` | neutral | Primary heading and body text, plus understated text links. |
| Oxblood | `#38141b` | `--color-oxblood` | brand | Opening hero and dark navigation/footer surface. |
| Blackened Merlot | `#110608` | `--color-blackened-merlot` | surface | Dark navigation gradient shade; keep it within the dark overlay treatment. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Navigation text over the dark hero; not a general content background. |

### Semantic aliases

`--color-canvas` → `#e0ded8` (Workshop Stone) · `--color-surface` → `#38141b` (Oxblood) · `--color-text` → `#262626` (Charcoal Ink) · `--color-text-muted` → `#e0ded8` (Workshop Stone)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#262626` | `#e0ded8` | 11.25:1 | AAA |
| `#262626` | `#38141b` | 1.08:1 | fail |
| `#e0ded8` | `#38141b` | 12.16:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Basisgrotesquepro | `--font-body` | webfont | 400 | Body copy and navigation | DM Sans |
| Legquinne Vf | `--font-display` | webfont | 500 | Display and section headings | Cormorant Garamond |
| Basisgrotesquepro 500 | `--font-basisgrotesquepro-500` | webfont | 400 | Small uppercase captions | DM Sans |

- **Basisgrotesquepro:** Regular sans-serif; keep body copy plain and readable, with navigation in sentence case.
- **Legquinne Vf:** Medium-weight serif; headings are uppercase with visibly open letter spacing.
- **Basisgrotesquepro 500:** Use a firmer sans weight for compact uppercase labels with measured tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 17.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1.1 | 0.017em | uppercase | Legquinne Vf | Large centered uppercase statement over the opening workshop video. |
| h1 | 46.5px | 500 | 1.1 | 0.022em | uppercase | Legquinne Vf | Primary page-level uppercase serif heading. |
| h2 | 32px | 500 | 1.1 | 0.031em | uppercase | Legquinne Vf | Editorial section headings in the text-and-image blocks. |
| body | 17.5px | 400 | 1.3 | 0 | — | Basisgrotesquepro | Descriptive copy explaining craft, process, and services. |
| caption | 15px | 400 | 1.1 | 0.021em | uppercase | Basisgrotesquepro 500 | Compact uppercase labels and small project metadata. |
| nav | 17.5px | 400 | 1 | 0 | — | Basisgrotesquepro | Simple navigation links over the hero. |
| eyebrow | 32px | 500 | 1.1 | 0.031em | uppercase | Legquinne Vf | Uppercase introductory or supporting section label. |

## Spacing & layout

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

Use a centered content frame capped at the measured 1360px maximum width, with comfortable spacing and generous section pauses. The opening is full bleed; subsequent sections sit on the stone canvas in mostly single-column or two-column arrangements. Align split-section copy to the left and let images balance it rather than placing everything in cards. Project features form a simple two-column grid. Preserve broad negative space and avoid dense content packing.

## Shape & elevation

- Radius: nav `4px` · xs `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The page is predominantly flat, with no measured shadow system or visible card treatment. Separate content through open space and image placement rather than borders. The navigation uses a dark gradient treatment, while the hero video is darkened to support overlaid text. A small measured radius is associated with navigation only.

## Imagery

Use authentic workshop video and photography of makers, tools, materials, joinery details, and completed interiors. The hero is full bleed with a dark overlay for readable white navigation and centered serif text. Content images sit directly within the stone layout, often in asymmetrical split compositions; project photography is larger and cleanly paired with short captions. Imagery supplies most of the page's colour.

## Components

### Hero video

Full-bleed workshop footage with a dark overlay, centered uppercase serif statement, and navigation over the image.

### Overlay navigation

White text links across the dark hero treatment; keep the navigation quiet and visually light.

### Editorial feature split

Pair a craft or process image with left-aligned serif heading, concise body copy, and a plain text link where appropriate.

### Process image spread

Arrange workshop photographs in an open two-column composition without enclosing cards.

### Project gallery

Present selected interiors in two columns, with uppercase serif project titles and small location captions.

### Measured component styles

- **Link** (“LEARN MORE ABOUT US”): transparent background · text #262626 · radius 0px · padding 8px 0px · 400 16px Arial
- **Navigation item** (“Projects Company Journal Contact”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Arial

## Do

- Use Workshop Stone (#e0ded8) as the dominant content canvas.
- Reserve Oxblood (#38141b) for the dark opening and dark surface moments.
- Set display headings in an uppercase, tracked serif.
- Keep body copy in a clean, unembellished sans-serif.
- Let real workshop and interior photography define the visual texture.
- Use open space to separate sections instead of card borders.

## Don't

- Do not introduce bright accent colours absent from the measured palette.
- Do not turn every image and text group into a card.
- Do not use heavy shadows or decorative borders.
- Do not crowd the page with dense copy or controls.
- Do not use white as the main content canvas.
- Do not let the hero text compete with the workshop footage.

## Agent prompt

Build a new page in the Ashton Bespoke visual style: quiet, spacious, and focused on skilled making. Use Workshop Stone (#e0ded8) as the main canvas and Charcoal Ink (#262626) for text. Use Oxblood (#38141b) for a dark hero or navigation surface, with white text only where it sits over that dark treatment; Blackened Merlot (#110608) belongs in the dark overlay gradient. Pair elegant, tracked uppercase serif headings with plain sans-serif body copy. Structure content as open editorial splits, broad photography-led moments, and a clean two-column project gallery. Choose authentic workshop, material, and finished-interior photography. Keep surfaces flat, avoid decorative cards and shadows, and use generous measured spacing rather than invented visual ornament.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed workshop video with centered serif headline and overlaid navigation. | Brand introduction, Navigation over media | Darkened video, Centered uppercase headline, White navigation |
| 2 | other | Quiet, centered introduction on the stone canvas with a small central mark. | Brand positioning, Breathing space | Stone background, Centered mark, Minimal copy |
| 3 | feature-split | Two-column feature pairing a close craft image with left-aligned copy. | Craft explanation, Learn-more link | Editorial serif heading, Plain body copy, Unboxed image |
| 4 | gallery | Two workshop photographs arranged as an open two-column spread. | Process evidence, Visual storytelling | Asymmetrical image sizes, No card framing |
| 5 | feature-split | Text-led editorial split with a process image opposite the copy. | Quality positioning, Process detail | Left-aligned heading, Stone canvas, Workshop photography |
| 6 | video | Wide, full-bleed media moment within the otherwise stone-coloured page. | Immersive pause, Brand atmosphere | Wide dark-toned visual, Minimal surrounding UI |
| 7 | feature-split | Two-column process section pairing a team image with explanatory copy. | Explain the workflow, Build confidence | Serif heading, Compact body paragraphs, Open image placement |
| 8 | product-grid | Section heading and view-all link above a two-column project image grid. | Browse projects, View all projects | Large interior images, Uppercase project titles, Location captions |

## Source CSS custom properties (selected)

```css
--_colour---stone: #e0ded8;
--_colour---slate: #262626;
--_font---body: Basisgrotesquepro, Arial, sans-serif;
--_colour---oxblood: #38141b;
--_font---header: "Legquinne Vf", "Palatino Linotype", sans-serif;
--_spacing---heading-padding<deleted|variable-362d5db7-2e1c-a68d-b6f1-c5c06498e13c>: clamp(1 * 1rem, ((1 - ((2 - 1) / (90 - 20) * 20)) * 1rem + ((2 - 1) / (90 - 20)) * 100vw), 2 * 1rem);
--_font---body-bold: "Basisgrotesquepro 500", Arial, sans-serif;
--_colour---white: white;
--_spacing---large-section-padding: 20em;
--_spacing---medium-section-padding: 10em;
--size-font: calc(clamp(992px, 100vw, 1440px) / (1440 / 16));
--nav-bg-height: calc(20em + calc(2em + 3em + 2.5em + 3em));
--duration-fast: 0.3s;
--duration-normal: 0.6s;
--color-dark: #262626;
```

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