# Numbered Studio · Design system migration spec

> Source: https://numbered.studio  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in editorial restraint, proving how powerful large typography and photography can be when UI clutter is completely removed.

## 1. Identity DNA

Numbered Studio's design system operates on the principle of editorial subtraction. Its visual language is a high-end fashion magazine spread meeting a design studio portfolio, where every element must justify its presence against a full-bleed photographic backdrop.

**One-liner:** A bold, photo-centric agency site where typography floats over full-bleed editorial imagery.
**Keywords:** editorial · minimal · fashion-forward · luxury · portfolio
**Analogy:** A high-end fashion magazine spread meeting a design studio portfolio

## 2. Color

The color system is starkly monochromatic, a deliberate void of UI color. White text sits directly over photographic imagery, allowing the photography itself to provide all chromatic variation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#111111` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--line` | `rgba(255, 255, 255, 0.2)` | divider |

**Color principle:** High-contrast monochromatic palette where content provides all chromatic variation.

This principle ensures content, not the interface, provides all chromatic variation.

## 3. Typography

The typographic voice is defined by a didone-serif for declarative, commanding headlines and a clean grotesque-sans for functional body copy and navigation. The scale is used for massive hero statements, secondary displays, standard descriptions, and stark uppercase labels.

- **Display:** didone-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 75px | 1.0 | 400 | 0px | Main hero headline 'Numbered' |
| heading | 55px | 1.0 | 400 | 0px | Secondary large display text |
| body | 15px | 1.5 | 400 | 0px | Standard body copy and descriptions |
| small | 13px | 2.0 | 700 | 0px | Uppercase navigation and labels like 'CONTACT' |

## 4. Spacing

The rhythm is cinematic and spacious, prioritizing generous negative space over a strict grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Large, cinematic padding around elements, relying on generous negative space over a strict grid.

## 5. Surfaces

Surfaces are defined by the edges of full-bleed images, not by container styling. A single-pixel solid border provides subtle division only when necessary, maintaining a clean, flat aesthetic.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** 1px solid rgba(255, 255, 255, 0.2) for subtle dividers, otherwise relying on image edges.

## 6. Layout

The layout skeleton is a vertical stack of full-viewport photographic sections. Text overlays are centered, creating a singular, scrolling column that feels like turning pages in a high-quality print folio.

- **Paragraph max:** 680px
- **Grid:** 1 columns, gutter 0px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-viewport photographic hero sections stacked vertically with centered text overlays.

## 7. Motion & Interaction

Motion philosophy is slow and cinematic, with transitions deliberately unhurried. Content reveals use smooth fades and background shifts on scroll, all timed to durations of 0.6 to 0.7 seconds.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.77, 0, 0.175, 1)`
- **Patterns:**
  - Smooth fade-in transitions for content reveal
  - Slow background transitions on scroll

- **Hover:** Subtle cursor change or opacity shift on text links
- **Click:** Immediate navigation or scroll, no micro-animations on press
- **Transition:** Content transitions use 0.6s to 0.7s durations for a cinematic, unhurried feel
- **Keyboard:** Standard tab navigation for the hamburger menu and links

## 8. Voice & Don'ts

The editorial voice is confident and understated, expressed through large, declarative serif headlines and minimal, uppercase text links for calls to action.

- **Tone:** Confident, understated, and sophisticated
- **Headline style:** Large, declarative serif statements that command attention
- **CTA style:** Minimal uppercase text links, usually just 'CONTACT' or 'VIEW'
- **Avoid:** Loud colors / Cluttered layouts / Standard SaaS patterns / Busy animations

### Don'ts
- ❌ don't use colorful backgrounds — screenshot shows all text overlaid directly on photographic imagery
- ❌ don't use rounded corners on containers — screenshot shows sharp, rectangular full-bleed panels
- ❌ don't use small, cramped typography — screenshot shows massive display type dominating the layout
- ❌ don't add drop shadows to text — screenshot shows flat, crisp white text sitting on images
- ❌ don't use a multi-column grid for content — screenshot shows a singular, stacked vertical flow
- ❌ don't rely on traditional navigation bars — screenshot shows a minimal hamburger menu and isolated text links

The system deliberately forgoes colorful UI, rounded containers, cramped type, drop shadows, multi-column grids, and traditional navigation bars.

## System Prompt (paste into AI tool)

```
This is a premium agency portfolio for 'Numbered Studio', positioning itself as a high-end creative and technology partner. The visual DNA is dominated by massive full-bleed photographic sections with large didone-serif typography overlaid directly on the images. The color palette is starkly monochromatic, using pure white (#FFFFFF) for all text against whatever background image is present, with a dark site base (#111111). Typography pairs an expressive didone-serif for display with a clean grotesque-sans for body and navigation. Key critical donts: do not introduce a traditional navigation bar or sidebar; the interface is intentionally minimal and cinematic. Do not use colored UI elements or accent colors; all chromatic variation must come from the photography itself. Do not apply rounded corners or drop shadows to any containers; surfaces are defined strictly by image edges and subtle thin borders.
```