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

# Smiling Wolf · Design System

> Quietly confident, editorial design with room to breathe

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

Smiling Wolf pairs a warm, pale canvas and ink-dark typography with expansive editorial spacing. A restrained framework lets vivid client work and photographic projects provide the strongest colour and visual contrast.

## North star

Keep the interface quiet and paper-like so large, carefully chosen project imagery and confident typography carry the story.

## Overview

The page is built around a warm off-white canvas (#f7f3f0) and deep near-black green (#131713), with muted grey text creating a softer hierarchy. Colour is deliberately sparse in the interface; saturated blues, greens and ochres mostly belong to client artwork and photography, not reusable brand accents. Bagoss Standard provides rounded, contemporary display and body typography, while a tightly tracked monospace face handles small uppercase navigation and labels. The layout feels like an editorial portfolio: broad quiet stretches separate compact project labels, image-led work, client marks and service content. Images are allowed to carry their own palettes and compositions, often appearing as large, clean rectangles rather than decorative cards. Fine rules and understated labels organize the content without adding visual weight. The overall strategy is calm, spacious and highly art-directed, balancing an almost paper-like background against bold project imagery and concise typographic signposts.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Paper | `#f7f3f0` | `--color-warm-paper` | brand | Main page canvas and light footer/navigation ground; gives the portfolio a warm, paper-like base. |
| Forest Ink | `#131713` | `--color-forest-ink` | surface | Dark inverse section background and primary heading or body text. |
| Soft Graphite | `#858582` | `--color-soft-graphite` | neutral | Muted supporting copy and secondary headings, easing contrast against the light canvas. |
| Stone Mist | `#bebcb9` | `--color-stone-mist` | neutral | Occasional subdued heading tone; secondary detail rather than a defining interface colour. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Sparse black heading and link rendering; minor measured detail, not the main ink colour. |

### Semantic aliases

`--color-canvas` → `#f7f3f0` (Warm Paper) · `--color-surface` → `#131713` (Forest Ink) · `--color-text` → `#131713` (Forest Ink) · `--color-text-muted` → `#858582` (Soft Graphite) · `--color-text-subtle` → `#f7f3f0` (Warm Paper)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#131713` | `#f7f3f0` | 16.41:1 | AAA |
| `#858582` | `#f7f3f0` | 3.35:1 | AA-large |
| `#858582` | `#131713` | 4.89:1 | AA |
| `#f7f3f0` | `#131713` | 16.41:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Bagoss Standard Regular | `--font-body` | webfont | 385 | Default body copy and caption text across the editorial portfolio. | Manrope |
| General Grotesque Mono Regular | `--font-mono` | webfont | 400 | Small navigation, eyebrow labels and compact uppercase metadata. | Space Mono |
| Bagoss Standard Medium | `--font-display` | webfont | 520, 400 | Display statements and main headings. | Manrope |

- **Bagoss Standard Regular:** Use a regular, soft sans-serif voice; body copy is open and unforced, with neutral tracking.
- **General Grotesque Mono Regular:** Monospaced, uppercase labels use noticeably expanded tracking and a technical editorial tone.
- **Bagoss Standard Medium:** Medium-weight headline styling; tight negative tracking and compact leading keep large text composed.

### Type scale — Custom (ratio ≈ 1.797, base 19.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 63px | 400 | 0.98 | -0.02em | — | Bagoss Standard Medium | Large editorial statements and prominent introductory messaging. |
| h1 | 59px | 520 | 1 | -0.02em | — | Bagoss Standard Medium | Primary page headline or major section heading. |
| body | 19.5px | 385 | 1.15 | 0 | — | Bagoss Standard Regular | Explanatory agency, project and service copy. |
| caption | 14px | 385 | 1.4 | 0.01em | — | Bagoss Standard Regular | Project descriptions and secondary supporting text. |
| eyebrow | 10.5px | 400 | 1.6 | 0.1em | uppercase | General Grotesque Mono Regular | Small uppercase section labels and metadata. |
| code | 10.5px | 400 | 1.6 | 0.1em | uppercase | General Grotesque Mono Regular | Monospaced uppercase micro-labels and compact navigation details. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 10, 14, 20, 60 px.
- Section rhythm 120px · element gap 10px · card padding — · max content width 1400px.

The measured content uses a spacious, wide editorial canvas, with a maximum width of 1400px and a two-column section structure. Major content aligns left, while project imagery and text blocks vary in scale to avoid a rigid catalogue feel. Section transitions use generous vertical breathing room; element-level gaps are comparatively compact. Small labels sit close to the content they identify, and thin rules separate occasional full-width link rows. The visual density stays low, allowing photography and case-study artwork to dominate.

## Shape & elevation

- Radius: media `4px` · link `4px` · xs `4px`
- No box shadows measured: the page is flat.

The page reads as flat and editorial, with no measured shadow system. Separate content through whitespace, image scale and occasional fine hairlines rather than raised cards. Media and links have a subtle 4px radius in the measurements; keep other surfaces visually flush and avoid unnecessary borders or layered panels.

## Imagery

Photography and client project visuals are the main colour source. Use large, cleanly framed photographs or graphic case-study images, retaining their original rich colour rather than applying a brand tint. The supplied first viewport includes illustrated campaign cards against a deep blue field; later portfolio imagery includes real-world photography and designed environments. Avoid decorative overlays that compete with the work.

## Components

### Editorial navigation

A slim horizontal row on the light canvas, using tiny uppercase monospaced labels for the studio name, agency descriptor and page links.

### Project feature

Large photographic or designed project imagery paired with a compact category label, title and muted supporting description.

### Section eyebrow

Small uppercase mono text with wide tracking, used as a restrained marker above content.

### Text link row

Concise link aligned to a fine horizontal rule, with a small directional arrow at the far edge.

### Client mark strip

A spacious horizontal arrangement of client logos, kept monochrome and visually subordinate to project imagery.

### Service list

A prominent typographic list beside short introductory copy, with muted entries and a dark active or leading item.

### Measured component styles

- **Link** (“Liverpool Philharmonic The feeling that ”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use Warm Paper (#f7f3f0) as the primary page canvas.
- Set primary type in Forest Ink (#131713).
- Reserve saturated colour for project imagery and client work.
- Use the monospaced face for small uppercase labels.
- Let broad whitespace separate major editorial sections.
- Keep image framing clean and visually unobtrusive.

## Don't

- Do not add unmeasured brand accent colours to interface controls.
- Do not turn every project into a raised or bordered card.
- Do not compress the generous vertical rhythm.
- Do not use oversized, heavy navigation labels.
- Do not apply filters that dull or recolour client artwork.
- Do not add shadows or gradients as decoration.

## Agent prompt

Build a new agency page in Smiling Wolf’s quiet editorial style. Use Warm Paper (#f7f3f0) for the primary canvas, Forest Ink (#131713) for main text and dark sections, and Soft Graphite (#858582) for supporting copy. Do not introduce extra interface colours; let project photography and artwork provide vivid colour. Use a rounded contemporary sans-serif for headlines and body copy, with a tracked uppercase monospace for navigation and eyebrow labels. Lay out content on a wide, spacious canvas with a flexible two-column editorial grid, generous gaps between sections, and compact labels near their content. Favor large, clean image frames, concise project metadata, fine rules and simple arrow links. Keep surfaces flat, avoid shadows, and use only subtle media rounding.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | contact | Dark inverse section with left-aligned messaging, compact contact links and supporting information arranged in two columns. | Start a project link, Say hello link, Direct phone contact | Dark background, Light text, Monospaced uppercase labels, Two-column content |

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