# Stephaniespecht · Design system migration spec

> Source: https://stephaniespecht.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of a 'work-first' portfolio where the interface intentionally steps back to let diverse, experimental design projects speak for themselves.

## 1. Identity DNA

The design system functions as a digital exhibition space for a graphic design studio, built on principles of structure and intuition. It is a raw, project-focused portfolio where the interface deliberately recedes, allowing diverse experimental work to occupy the primary visual plane. The entire system is an exercise in restraint, using a minimal toolkit to frame rather than compete.

**One-liner:** A raw, project-focused portfolio that lets diverse design work speak for itself.
**Keywords:** experimental · structure · intuition · graphic design · research
**Analogy:** A digital exhibition space for a graphic design studio

## 2. Color

The color system is one of deliberate absence. A strict monochromatic base—comprising pure white, black, and a single neutral gray—creates a neutral container for the project imagery.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FEFEFE` | card background |
| `--bg-quiet` | `#E6E6E6` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `rgba(0,0,0,0.6)` | secondary text |
| `--muted` | `#B0B0B0` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Strict monochromatic base to let the colorful project imagery dominate.

The principle is absolute: the interface provides no chromatic variation; the work itself must provide all color.

## 3. Typography

Typographic voice is functional and quiet, using the standard 'Helvetica Neue', Arial, sans-serif stack. A minimalist approach with only 400 and 700 weights ensures the typography serves as a clear, unobtrusive navigational and descriptive layer.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.2 | 700 | normal | Site title and main headings |
| title | 25px | 1.4 | 400 | normal | Navigation links |
| body | 16px | 1.2 | 400 | normal | Body text and descriptions |
| caption | 12px | 1.5 | 400 | normal | Small metadata and tags |

**Type rules:**
- Default font stack is 'Helvetica Neue', Arial, sans-serif
- Strict adherence to 400 and 700 font weights
- Minimalist typography to avoid competing with project visuals

## 4. Spacing

A consistent rhythm of 24px padding establishes the foundational measure for containers and navigation, creating a uniform spatial scaffolding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 14 / 16 / 24 / 32 / 48 px
- **Rhythm:** Consistent padding of 24px used in project containers and navigation.

## 5. Surfaces

Surfaces are defined by subtle, almost imperceptible depth. Very faint, single-pixel drop shadows and 1px borders provide just enough separation between elements without adding visual weight.

- **Radius:** sm 5px · md 5px · lg 0px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.05) 0px 1px 3px 0px
- **Borders:** Subtle 1px borders or bottom-borders for separation

## 6. Layout

The layout is a dense, adaptive masonry grid, a skeleton that compresses to a single column on smaller screens and expands to multiple columns on wider viewports. Full-bleed project images form the core content blocks, creating an immersive gallery of work.

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

**Skeleton:** A dense, masonry-style grid that adapts from single column to multi-column.

## 7. Motion & Interaction

Motion philosophy is one of understated utility. Transitions are limited to short, smooth ease-out durations (0.2s to 0.5s), applied only to fundamental interactive feedback like opacity changes on hover.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `ease-out`
- **Patterns:**
  - Smooth opacity transitions on hover for navigation elements
  - Subtle border transitions for interactive states

- **Hover:** Opacity changes on navigation links and project images
- **Click:** Direct navigation to project detail pages
- **Transition:** All properties transition smoothly over 0.2s to 0.5s
- **Keyboard:** Standard tab navigation through links

## 8. Voice & Don'ts

The editorial voice is quiet, confident, and process-oriented, with short descriptive titles embedded within project imagery. Calls to action are subtle and integrated, typically manifesting as simple text links.

- **Tone:** Quiet, confident, and process-oriented
- **Headline style:** Short, descriptive titles embedded within the project imagery
- **CTA style:** Subtle and integrated, often via simple text links
- **Avoid:** Marketing speak or overly enthusiastic language / Large, colorful call-to-action buttons / Complex interactive flourishes that distract from the work

### Don'ts
- ❌ Don't use a complex color palette — screenshot shows a strictly monochromatic base (black, white, gray).
- ❌ Don't use decorative typography — screenshot shows functional, humanist sans-serif for all interface text.
- ❌ Don't add heavy shadows or glows — screenshot shows only a very subtle, single-pixel drop shadow on some elements.
- ❌ Don't use rounded corners on project images — screenshot shows sharp edges on the main content grid.
- ❌ Don't clutter the interface with icons or badges — screenshot shows a minimal header with just text links.
- ❌ Don't create a multi-layered navigation system — screenshot shows a flat, horizontal top-level menu.

The system deliberately avoids decorative typography, complex color palettes, heavy UI elements, and rounded corners on project imagery, prioritizing the work above all interface flourish.

## System Prompt (paste into AI tool)

```
This is a design studio portfolio site for Specht Studio. The design DNA is rooted in a raw, experimental aesthetic that prioritizes project imagery over interface decoration. The core palette is strictly monochromatic, using white (#FFFFFF) for the background, black (#000000) for ink, and a light gray (#E6E6E6) for secondary surfaces. The typography relies on a standard humanist-sans stack (Helvetica Neue, Arial, sans-serif), using bold weights only for the studio name and a regular weight for all navigation and body text. The layout is a dense, masonry-like grid of full-bleed project images. Critical constraints: 1) Never introduce a dominant accent color; let the work provide all chromatic variation. 2) Never use decorative typography or complex font pairings; keep the interface strictly functional. 3) Avoid adding heavy UI elements like large buttons or complex cards; the work should be the primary focus.
```