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

# Specht Studio · Design System

> Quiet framework, unruly visual work.

**Theme:** light · **Industry:** design · **Source:** https://stephaniespecht.com/ · **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 restrained studio identity frames a dense, varied portfolio of graphic and illustrative work. Minimal navigation and a white canvas let vivid, individually art-directed projects take the visual lead.

## North star

Keep the site chrome quiet and consistent so the varied portfolio artwork supplies nearly all of the visual drama.

## Overview

The page uses a pure white canvas and black navigation as a quiet frame for a tightly packed portfolio. The palette is intentionally restrained: #ffffff defines the background, #000000 anchors navigation and link text, and muted #b0b0b0 softens the studio descriptor. More saturated colours belong chiefly to project artwork, not the site chrome. Helvetica Neue, or a close sans-serif fallback, keeps the identity direct and unornamented; the studio name and navigation are set notably larger than supporting text. A single, asymmetric image grid fills the page, with project images varying in colour, texture, and visual density. Their contrasts create the rhythm instead of decorative section backgrounds or card treatments. Spacing gives the header breathing room, while the portfolio itself remains closely packed. The result feels like a considered gallery index: simple shared structure, with each project allowed its own visual language.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas behind the header and portfolio grid; preserves a bright, gallery-like frame. |
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Primary navigation and project link text, with black also defining the measured border treatment. |
| Soft Graphite | `#b0b0b0` | `--color-soft-graphite` | neutral | Muted heading text, notably the small studio descriptor beneath the brand name. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#b0b0b0` (Soft Graphite) · `--color-border` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#b0b0b0` | `#ffffff` | 2.17:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Neue | `--font-body` | system | 400 | Brand wordmark, navigation, headings, and supporting page text. | Inter |

- **Helvetica Neue:** Regular weight throughout, untransformed casing, and no measured letter spacing; larger brand and navigation text contrasts with smaller supporting copy.

### Type scale — Golden Ratio (ratio ≈ 1.667, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 25px | 400 | 1.4 | 0 | — | Helvetica Neue | Studio identity and prominent introductory heading. |
| body | 15px | 400 | 1.4 | 0 | — | Helvetica Neue | Project descriptions and supporting portfolio text. |
| nav | 25px | 400 | 1 | 0 | — | Helvetica Neue | Studio name and primary navigation links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 10, 13, 24, 35 px.
- Section rhythm 67px · element gap — · card padding — · max content width —.

A single white page begins with a horizontal header: studio identity at the left and navigation links arranged across the top. Below, a dense, asymmetric portfolio grid spans the available content area, using adjacent image tiles of varied proportions and visual scales. Alignment is predominantly left-led; project edges and whitespace create the rhythm rather than cards or colored section bands. The measured page has a comfortable overall density and a generous break between the header and portfolio. A fixed maximum width is not measured, so preserve the screenshot’s broad, viewport-filling composition without assuming one.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s ease-out` on interactive elements.

The measured styling is flat: no shadows, gradients, or rounded component treatments are recorded. Keep the white canvas and artwork surfaces visually direct, using grid adjacency and whitespace for separation. The black border measurement belongs to site styling data, but the screenshot’s overall impression is not of outlined cards.

## Imagery

The portfolio is the main visual content: a long sequence of project images showing posters, identity work, editorial layouts, illustration, and photography. Images retain their individual palettes and art direction, ranging from sparse monochrome compositions to vivid, textured graphics. Crop and tile them to preserve a varied, asymmetric gallery rather than imposing a unified image treatment.

## Components

### Studio header

Place the Specht Studio name at the left of a white header, with a smaller muted descriptor directly below.

### Primary navigation

Use large, regular black text for horizontal Work, Art / Research, Archive, About, and Shop links.

### Active navigation link

Distinguish the selected Work link with a simple underline, not a filled tab or button.

### Portfolio grid

Present projects as a dense, asymmetric, multi-column image gallery with varied tile proportions.

### Project link

Keep project links visually light and text-led; measured link styling is black 16px Helvetica Neue with no padding or radius.

### Measured component styles

- **Link** (“Google Design — view —”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Helvetica Neue
- **Navigation item** (“Specht Studio”): transparent background · text #000000 · radius 0px · padding 0px · 400 25px Helvetica Neue

## Do

- Use white as the uninterrupted page canvas.
- Keep navigation black, regular-weight, and plainly styled.
- Make the studio descriptor quieter than the wordmark.
- Let project imagery retain its original palette and character.
- Build a tightly composed, asymmetric portfolio gallery.
- Use whitespace to distinguish the header from the image field.

## Don't

- Do not add decorative brand colours to the page chrome.
- Do not standardize every project image into one art direction.
- Do not place projects in rounded cards or add shadows.
- Do not replace the image-led gallery with text-heavy sections.
- Do not style navigation as prominent filled buttons.
- Do not invent fixed dimensions absent from the measured data.

## Agent prompt

Build a new design-studio portfolio page with a quiet white (#ffffff) canvas and a flat, image-led composition. Use regular Helvetica Neue, or a close sans-serif substitute, for the studio name, navigation, and supporting copy. Set the primary navigation and project links in black (#000000); use muted gray (#b0b0b0) for secondary studio text. Start with a simple horizontal header and a discreet underline for the active link. Below it, create a dense asymmetric gallery of varied project imagery, allowing each image to keep its own colour, crop, texture, and typography. Maintain a clear gap after the header, then let tile adjacency and changing artwork supply the rhythm. Avoid shadows, gradients, rounded cards, decorative colour bands, and oversized UI. Do not impose unmeasured fixed spacing or widths.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | White page with a horizontal identity and navigation header above a dense, asymmetric, multi-column project image grid. | Persistent-feeling primary navigation, Click-through project links, Active section underline | White canvas, Black navigation text, Muted gray descriptor, Varied image tiles, Flat presentation |

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