# Nathansmith · Design system migration spec

> Source: https://www.nathansmith.design  ·  Curated by OpenDesign  ·  en

> An exceptional example of using extreme negative space and typographic scale to create a powerful, premium portfolio presentation.

## 1. Identity DNA

This design system operates like a high-end monochromatic art gallery: every element exists with deliberate emptiness around it, and the typography is the primary exhibit. The architecture is minimal, premium, and art-directed, relying on bold curation rather than decoration.

**One-liner:** A minimal, monochromatic portfolio site that uses extreme typographic scale and vast negative space to create a premium, gallery-like presentation.
**Keywords:** minimal · premium · art-directed · bold · editorial
**Analogy:** A high-end monochromatic art gallery.

## 2. Color

The palette is strictly monochromatic—pure black and off-white—with no accent colors. This extreme restraint forces focus onto typography and spatial relationships, creating a high-contrast, premium feel.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#F5F4EE` | body text |
| `--ink-soft` | `#FFFFFF` | secondary text |
| `--muted` | `#333333` | placeholder |
| `--line` | `rgba(245, 244, 238, 1)` | divider |

**Color principle:** Extreme monochrome minimalism, relying on typography and negative space.

The principle is absolute minimalism: color exists only to provide contrast, never as a decorative or emotional element.

## 3. Typography

A transitional-serif font handles display text for its editorial authority, while a geometric-sans provides clean readability for body copy. All display typography is set in uppercase, establishing a bold, confident voice at massive scale.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -1px | hero headlines |
| body | 16px | 1.5 | 400 | 0px | body text and navigation |
| caption | 14px | 1.5 | 400 | 0px | small text and links |

**Type rules:**
- Use transitional-serif for display text
- Use geometric-sans for body text
- Ensure all typography is uppercase for display elements

## 4. Spacing

Spacing follows a generous, generous rhythm—both vertically and horizontally—with large, intentional gaps between elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px
- **Rhythm:** generous vertical and horizontal spacing with large gaps

## 5. Surfaces

Surfaces are defined by depth through shadow, not by borders. Floating elements cast deep, dark shadows onto the solid black background, creating a sense of physical layering in an otherwise flat composition.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - None: None
- **Borders:** no visible borders, rely on negative space

## 6. Layout

The layout skeleton is asymmetric and edge-anchored, with all primary typography pinned to the viewport's edges. This creates a vast, empty central negative space that becomes the composition's most powerful element.

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

**Skeleton:** asymmetric, edge-anchored with vast central negative space

## 7. Motion & Interaction

Motion is slow and deliberate, using only fade-in, color-shift, and opacity-change patterns. All transitions occur over 0.5 to 1 second, maintaining a calm, refined presence that never competes with the content.

- **Durations:** micro 220ms · small 500ms · medium 1000ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - fade-in
  - color-shift
  - opacity-change

- **Hover:** cursor pointer on all interactive elements
- **Click:** immediate visual feedback
- **Transition:** smooth transitions for color and opacity over 0.5s to 1s
- **Keyboard:** standard tab navigation

## 8. Voice & Don'ts

The editorial voice is quiet, confident, and professional. Headlines are bold, all-caps, and massive in scale, while calls-to-action are minimal, text-based, and often accompanied by simple arrow indicators.

- **Tone:** quiet, confident, professional
- **Headline style:** bold, all-caps, massive scale
- **CTA style:** minimal, text-based with arrow indicators
- **Avoid:** decorative elements / busy layouts / bright colors

### Don'ts
- ❌ Don't use multiple colors — screenshot shows a strictly monochromatic palette of black, white, and off-white
- ❌ Don't center-align text — screenshot shows left-aligned, edge-anchored typography
- ❌ Don't use tight spacing — screenshot shows vast, empty negative space between elements
- ❌ Don't use small, crowded layouts — screenshot shows a minimalist, gallery-like composition
- ❌ Don't use complex backgrounds — screenshot shows a solid, flat black background
- ❌ Don't use decorative borders — screenshot shows elements separated by space, not lines

This system deliberately avoids decorative elements, busy layouts, bright colors, and any visual noise that would compromise the gallery-like purity.

## System Prompt (paste into AI tool)

```
A minimalist portfolio site for an art director. The design is strictly monochromatic, using a black background (#000000) and off-white text (#F5F4EE) with a transitional-serif display font and a geometric-sans body font. It features a massive typographic scale for headlines and vast, empty negative space to create a premium, gallery-like feel. Floating UI elements use deep, dark shadows and pill shapes. Critical constraints: maintain the strict monochrome palette, use massive negative space, and anchor all typography to the edges of the viewport.
```