# Smilingwolf · Design system migration spec

> Source: https://www.smilingwolf.co.uk  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of a high-end, photography-driven portfolio that uses restraint, generous whitespace, and a refined typographic hierarchy to let the work speak for itself.

## 1. Identity DNA

The design language of Smilingwolf operates like a high-end photography gallery meeting a Swiss-design studio—a space where architecture recedes and the work advances. Every system decision exists to frame the portfolio's photographic content with quiet authority.

**One-liner:** A premium brand and digital agency portfolio with large photography and clean typography.
**Keywords:** agency · portfolio · photographic · minimal · refined
**Analogy:** a high-end photography gallery meets a Swiss-design studio

## 2. Color

The palette is a deliberate study in restraint: warm off-white grounds and near-black ink create a neutral field where photography provides all chromatic interest. No synthetic accent colors interrupt this dialogue between surface and image.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F3F0` | main background |
| `--ink` | `#131713` | body text |
| `--ink-soft` | `rgba(19,23,19,0.5)` | secondary text |
| `--muted` | `rgba(19,23,19,0.5)` | placeholder |
| `--line` | `rgba(19,23,19,0.15)` | divider |

**Color principle:** Warm off-white backgrounds with near-black ink, relying entirely on photography for color.

The principle is clear—the design system is a vessel, never the subject.

## 3. Typography

The typographic voice is tripartite: a transitional serif commands display titles with tight tracking, a geometric sans-serif carries body copy with quiet efficiency, and monospaced uppercase anchors navigation and tags with mechanical precision.

- **Display:** transitional-serif
- **Body:** geometric-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 59px | 1.0 | 520 | -1.18px | Large portfolio project titles |
| body | 12px | 1.38 | 400 | 0 | General text and UI labels |
| caption | 10.4px | 1.6 | 400 | 1.04px | Tag chips and micro labels |
| mono | 10px | 1.3 | 400 | 0.9px | Navigation and UI elements |

**Type rules:**
- Use monospaced uppercase for navigation and tags
- Display titles use a tight tracking and a serif face
- Geometric sans is the primary workhorse for body copy

## 4. Spacing

Rhythm emerges from contrast—tight 10–20px gutters for internal component structure, generous 60px spacers between major content blocks, creating a cadence of compression and expansion.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 12 / 16 / 20 / 24 / 48 / 60 px
- **Rhythm:** A mix of tight 10-20px gutters and large 60px spacers to create generous breathing room between major content blocks.

## 5. Surfaces

Surfaces remain architecturally flat. Shadows are absent; borders are thin 1px lines in a translucent dark, deployed sparingly as dividers and subtle outlines for tag chips.

- **Radius:** sm 4px · md 0px · lg 0px · pill 0px
- **Borders:** Thin 1px lines in rgba(19,23,19,0.15) are used sparingly for dividers and subtle tag outlines.

## 6. Layout

The skeleton is a single-column narrative: full-bleed photographic images anchor each portfolio entry, followed by typographic hierarchy—serif title, sans-serif subtitle, monospaced tags—arranged with vertical generosity that lets each project breathe independently.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 20px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A clean, single-column layout for the main portfolio list with full-width images and generous vertical spacing.

## 7. Motion & Interaction

Motion philosophy favors subtlety over spectacle. Smooth, generic transitions govern page navigation and hover states, maintaining the site's calm, refined atmosphere without calling attention to the interface itself.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle hover states on interactive elements
  - Smooth transitions for page navigation and hover effects

- **Hover:** Subtle color shifts or underline appearances on links and tags.
- **Click:** Standard pointer cursor interactions.
- **Transition:** A generic 'all' transition is applied globally, likely for smooth state changes.
- **Keyboard:** Standard focusable elements with visible focus states.

## 8. Voice & Don'ts

The editorial voice is sophisticated, confident, and understated—headlines are direct and punchy, CTAs are simple uppercase monospaced text, and the tone avoids the noise of aggressive marketing language.

- **Tone:** Sophisticated, confident, and understated.
- **Headline style:** Direct, concise, and often punchy, presented in a large serif or sans-serif face.
- **CTA style:** Simple, uppercase monospaced text, often paired with an arrow or thin border.
- **Avoid:** Excessive exclamation marks / Overly technical jargon / Aggressive marketing language / Colorful UI elements / Rounded corners on primary containers / Drop shadows on containers

### Don'ts
- ❌ Don't use bright, synthetic accent colors — screenshot shows a neutral palette where images provide all color.
- ❌ Don't use rounded corners on major containers — screenshot shows sharp 4px or 0px edges.
- ❌ Don't use drop shadows on cards or containers — screenshot shows completely flat surfaces.
- ❌ Don't use sans-serif for all text — screenshot shows a mix of serif for large titles and monospaced for UI.
- ❌ Don't pack the layout with dense information — screenshot shows generous whitespace and a single-column flow.
- ❌ Don't use heavy border weights — screenshot shows very thin, subtle dividers and outlines.

What the system deliberately omits—bright accents, rounded containers, drop shadows, dense layouts—is as defining as what it includes.

## System Prompt (paste into AI tool)

```
A premium brand and digital agency portfolio site. The design DNA is defined by warm off-white backgrounds (#F7F3F0) and near-black text (#131713), relying entirely on large, high-quality photography for visual interest. The typography system uses a mix of a transitional serif for display titles, a geometric sans-serif for body copy, and a monospaced uppercase style for navigation and tags. Key colors are a warm off-white (#F7F3F0) and near-black (#131713). Critical design constraints include: avoid synthetic accent colors and rely on photography for chromatic variation; avoid rounded corners or drop shadows on containers to maintain a flat, architectural feel; and avoid dense, cluttered layouts, instead using generous whitespace and a strict single-column grid to let the work breathe. The overall aesthetic is understated, sophisticated, and highly refined, prioritizing the visual impact of the portfolio projects themselves.
```
