# Studiofew · Design system migration spec

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

> A masterclass in restrained design where the typography itself serves as the primary visual language.

## 1. Identity DNA

Studiofew operates like a high-end type foundry specimen book rendered for the digital medium, where each page is a deliberate presentation of typographic form. The system's identity is built on restraint—using stark monochrome and generous negative space to let the fonts themselves command attention.

**One-liner:** A minimalist, premium type foundry site showcasing font specimens with stark monochrome photography and refined UI.
**Keywords:** Type Foundry · Specimen · Typography · Studio
**Analogy:** A high-end type foundry specimen book presented in a digital format

## 2. Color

The color system is a study in absolute reduction, built on a strict monochromatic palette where pure black and white establish the primary contrast, and a narrow range of neutral grays creates functional hierarchy. This approach ensures color never competes with the typography, serving only to structure the interface.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f6f4f1` | card background |
| `--bg-quiet` | `#b3b3b3` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#b7b7b7` | placeholder |
| `--muted-soft` | `#858585` | weak hint |
| `--line` | `rgba(0, 0, 0, 1)` | divider |

**Color principle:** Strict monochromatic palette relying on stark black and white contrast with neutral grays for hierarchy and UI elements.

The governing principle is that color is a tool for clarity, not expression; every hex value exists to support the reading of type.

## 3. Typography

The typographic voice is authoritative and specimen-driven, pairing massive, humanist-serif display type with a clean sans-serif for UI elements. Rules enforce all-caps for navigation and labels, while tight letter-spacing on large specimens and generous tracking on small caps create a distinct, high-contrast rhythm.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 158px | 1.0 | 400 | -1.584px | Massive display specimen text |
| sub-display | 115px | 1.0 | 400 | -1.584px | Secondary display specimen text |
| body | 14px | 1.0 | 400 | 0.2px | Primary UI and navigation text |
| caption | 12px | 1.0 | 400 | 0.2px | Secondary labels and metadata |

**Type rules:**
- All-caps for labels and navigation
- Tight letter-spacing for large display type
- Generous letter-spacing for small caps UI

## 4. Spacing

Spatial rhythm is governed by a strict 4px grid, with generous padding around specimen sections to provide necessary breathing room between typographic blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 / 112 / 160 px
- **Rhythm:** Strict 4px grid with generous padding around specimen sections

## 5. Surfaces

Surfaces are defined by absolute flatness, with no shadows or gradients applied to any element. Visual separation relies on a 1px solid black border or a dotted separator line, creating structure through minimal graphic intervention.

- **Radius:** sm 2px · md 6px · lg 0px · pill 999px
- **Borders:** 1px solid black, dotted separators for sectioning

## 6. Layout

The layout skeleton is built on full-width specimen cards, each occupying the entire viewport width to maximize the display of typographic specimens. These sections are cleanly divided by dotted lines, with a fixed navigation bar anchoring the experience.

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

**Skeleton:** Full-width specimen cards separated by dotted lines with sticky navigation

## 7. Motion & Interaction

Motion is functional and subdued, limited to subtle opacity transitions on hover states to indicate interactivity without distraction. The philosophy prioritizes performance and calm, using simple easing curves for slider adjustments that feel precise and mechanical.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Standard opacity transitions on hover states
  - Smooth slider adjustments for font properties

- **Hover:** Subtle opacity reduction or cursor change
- **Click:** Standard button press with no complex feedback
- **Transition:** 0.2s ease-out for interactive elements
- **Keyboard:** Standard focus navigation

## 8. Voice & Don'ts

The editorial voice is direct, minimalist, and authoritative, mirroring the tone of a design studio's internal style guide. Headlines are massive and tightly tracked, while calls to action are uppercase, high-contrast buttons with labels like 'Trial' and 'View'.

- **Tone:** Authoritative, minimalist, design-focused
- **Headline style:** Massive, tightly tracked, all-caps or large specimen display
- **CTA style:** Direct, uppercase, high-contrast buttons like 'Trial' and 'View'
- **Avoid:** Decorative elements / Vibrant colors / Playful language / Rounded corners on primary buttons

### Don'ts
- ❌ don't use vibrant colors — screenshot shows a strictly monochrome black, white, and gray palette
- ❌ don't apply rounded corners to primary buttons — screenshot shows sharp, rectangular buttons
- ❌ don't use wide letter-spacing for large display text — screenshot shows tight tracking for specimen headlines
- ❌ don't hide behind playful language — screenshot shows direct, functional UI labels like 'SIZE' and 'WEIGHT'
- ❌ don't use heavy shadows or depth — screenshot shows flat, clean surfaces
- ❌ don't center-align everything — screenshot shows strong left-aligned typography and UI elements

The system deliberately omits decorative elements, vibrant color, playful language, and heavy shadows, trusting the raw typographic specimen to be the primary visual language.

## System Prompt (paste into AI tool)

```
A premium, minimalist type foundry specimen site. Key colors are pure black (#000000), white (#ffffff), and neutral grays (#b3b3b3, #b7b7b7). Typography features massive, tightly tracked display type (humanist-serif) and functional sans-serif UI text. Critical donts: no vibrant colors, no rounded buttons, no wide letter-spacing on display text, no playful tone, no heavy shadows. Layout relies on full-width sections, dotted separators, and generous spacing to let the typography breathe.
```
