# Thomasmonavon · Design system migration spec

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

> This site exemplifies minimalist portfolio design where restraint and whitespace create a premium, gallery-like experience for showcasing photography.

## 1. Identity DNA

This design system is built as a frame for images, not as a statement itself. It is the gallery wall, not the artwork. Its identity is defined by a strict absence of decoration, allowing high-contrast monochrome and generous space to yield all attention to the photography it presents.

**One-liner:** A minimalist photography portfolio showcasing large-scale imagery with clean, typographic design.
**Keywords:** Photography · Portfolio · Editorial · Minimalist
**Analogy:** A high-end photography portfolio with a clean, minimalist aesthetic.

## 2. Color

The color system is a deliberate void: pure white backgrounds and deep black text create a high-contrast field where every photograph provides all chromatic information. This binary palette is not a limitation but a foundation, ensuring content remains the sole source of visual complexity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--muted-soft` | `#000000` | weak hint |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochromatic with pure white backgrounds and black text, allowing photography to provide all color.

The principle is one of absolute restraint, where color is absent from the interface to make it more potent within the content.

## 3. Typography

Typography is unified and confident, using a single geometric-sans family—Lay Grotesk—in a consistent medium weight. Headlines are set with tight letter-spacing and bold impact, while navigation adopts uppercase transforms, creating a clean, modern voice that supports but never competes with the imagery.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 38px | 1.0 | 500 | -1.14px | Large headlines and project titles |
| body | 16px | 1.5 | 500 | normal | General body text |

**Type rules:**
- All text uses Lay Grotesk with weight 500 for a consistent, modern feel.
- Large headlines use tight letter-spacing of -1.14px for a bold, condensed look.
- Text transforms to uppercase for navigation and labels.

## 4. Spacing

Rhythm is established through generous whitespace and a consistent 20px padding, creating a calm, ordered canvas for content placement.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace with consistent 20px padding for content areas.

## 5. Surfaces

Surfaces are defined purely by their content and position, with no shadows or visible borders to create depth. Structure emerges from the sharp contrast between black and white elements and the clean edges of full-bleed photography.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** None visible; relies on pure white backgrounds and black elements for structure.

## 6. Layout

The foundational layout is a split-screen hero, dividing the viewport into a stark white content zone and a immersive, full-bleed photographic zone. This 50/50 division sets the editorial tone, creating a dynamic tension between text and image.

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

**Skeleton:** Split-screen hero with 50/50 division between white content area and full-bleed photography.

## 7. Motion & Interaction

Motion is reserved for functional clarity, using subtle opacity and transform transitions to guide focus without drawing attention to itself. All animation follows a philosophy of understated professionalism, smoothing interactions rather than creating spectacle.

- **Durations:** micro 150ms · small 400ms · medium 600ms
- **Easing:** `cubic-bezier(0.52, 0, 0, 1)`
- **Patterns:**
  - Opacity transitions for smooth visibility changes
  - Transform transitions for movement effects

- **Hover:** Pointer cursor indicates clickable elements throughout the interface.
- **Click:** No visible click state changes in the provided screenshots.
- **Transition:** All elements use CSS transitions with opacity and transform properties.
- **Keyboard:** No visible keyboard navigation indicators.

## 8. Voice & Don'ts

The editorial voice is professional and minimalist, using bold, uppercase headlines for impact and minimal, text-based calls-to-action. It avoids all decorative language and visual emphasis, letting the work and the clear typographic hierarchy speak directly.

- **Tone:** Professional and minimalist
- **Headline style:** Bold, uppercase, tight letter-spacing for impact
- **CTA style:** Minimal text-based with no visual emphasis
- **Avoid:** Decorative elements / Busy layouts / Colorful accents / Complex typography

### Don'ts
- ❌ Don't add decorative borders or shadows — screenshot shows completely flat surfaces
- ❌ Don't use multiple font families — screenshot shows consistent Lay Grotesk throughout
- ❌ Don't add colorful accents — screenshot shows purely monochromatic palette
- ❌ Don't use heavy shadows or depth effects — screenshot shows flat, minimalist design
- ❌ Don't clutter with excessive UI elements — screenshot shows generous whitespace
- ❌ Don't use rounded corners — screenshot shows sharp, clean edges on all elements

This system deliberately excludes decorative borders, rounded corners, colorful accents, and complex typography to preserve its gallery-like purity.

## System Prompt (paste into AI tool)

```
This is a minimalist photography portfolio site with a clean, editorial aesthetic. The design uses a pure white (#ffffff) background with black (#000000) text, creating high contrast that lets photography provide all visual interest. Typography uses Lay Grotesk (geometric-sans) at weight 500 with tight letter-spacing (-1.14px) for headlines. The layout features a split-screen hero with 50/50 division between white content area and full-bleed photography. Key features include generous whitespace, consistent 20px padding, uppercase text transforms for navigation, and smooth opacity/transform transitions. Critical constraints: maintain monochromatic palette, avoid decorative elements, preserve generous spacing, keep typography consistent with weight 500 throughout.
```