# Simonfosters Website · Design system migration spec

> Source: https://www.simonfosters.website  ·  Curated by OpenDesign  ·  en

> A masterclass in restraint—this portfolio proves that confident typography and generous whitespace can create more impact than complex visual effects.

## 1. Identity DNA

The site operates as a curated gallery, presenting design work with the quiet confidence of a well-built monograph. Its identity is defined by what it removes, creating a neutral, professional container where each case study can speak on its own terms.

**One-liner:** A senior product designer's portfolio showcasing premium case studies with restrained aesthetics
**Keywords:** Portfolio · Senior Product Designer · Case Study · Clean · Professional
**Analogy:** A curated gallery of design work presented with quiet confidence and precise typography

## 2. Color

Color is deliberately absent from the interface itself, which adopts a palette of neutral warm grays. This restraint ensures that all visual richness and chromatic information is supplied solely by the project imagery.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F6F7F6` | main background |
| `--ink` | `#393737` | body text |
| `--muted` | `rgba(57,55,55,0.5)` | placeholder |
| `--line` | `rgb(57,55,55)` | divider |

**Color principle:** Neutral warm grays with subtle noise texture, letting project imagery provide all color

The principle is clear: the system’s role is to frame content, not to compete with it.

## 3. Typography

The typographic voice is singular and unwavering, set in Neue Montreal at a consistent weight 400. This uniform grotesque-sans treatment establishes a clean, professional baseline that lets scale and spacing do the expressive work.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 61px | 1.0 | 400 | -0.5px | Project titles and primary headings |
| heading | 55px | 1.0 | 400 | -0.5px | Section titles and case study names |
| subhead | 24px | 1.3 | 400 | 0 | Secondary descriptions and project summaries |
| body | 16px | 1.56 | 400 | 0 | Body text and navigation |
| small | 14px | 1.4 | 400 | 0 | Labels and metadata |

**Type rules:**
- All text uses weight 400 consistently
- Uppercase is used sparingly for labels and tags
- Tight leading on display sizes for impact

## 4. Spacing

Rhythm is established through a consistent vertical cadence, using generous 96px gaps between major sections to create a deliberate, editorial pace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing between sections with consistent 32px and 96px gaps creating breathing room

## 5. Surfaces

Surfaces are rendered flat and borderless, defined only by precise 1px solid borders where structural separation is needed. Depth is conveyed through spatial hierarchy alone, not through shadows or gradients.

- **Radius:** sm 4px · md 8px · lg 12px · pill 48px
- **Borders:** 1px solid borders in dark gray (#393737) with generous pill-shaped corners on buttons and tags

## 6. Layout

The layout follows a single-column, centered skeleton with generous padding. This simple column structure focuses attention sequentially on each piece of work, much like pages in a portfolio book.

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

**Skeleton:** Single-column portfolio layout with generous padding and centered content

## 7. Motion & Interaction

Motion is utilitarian and subtle, governed by a consistent 0.2-second duration and specific cubic-bezier easing curves. The philosophy is to provide smooth, purposeful feedback on interaction without drawing attention to the animation itself.

- **Durations:** micro 200ms · small 200ms · medium 800ms
- **Easing:** `cubic-bezier(0.645, 0.045, 0.355, 1)`
- **Patterns:**
  - Smooth 0.2s transitions on all interactive elements
  - All transitions use consistent cubic-bezier easing

- **Hover:** Subtle opacity or color transitions within 0.2s using custom cubic-bezier easing
- **Click:** Standard click behavior with pointer cursor on 23 interactive elements
- **Transition:** All properties transition with 0.2s duration using either cubic-bezier(0.645, 0.045, 0.355, 1) or cubic-bezier(0.77, 0, 0.175, 1)
- **Keyboard:** Standard keyboard navigation with focus states

## 8. Voice & Don'ts

The editorial voice is professional, understated, and confident, matching the clean typographic presentation. It avoids any flourish or salesmanship, letting the work demonstrate expertise.

- **Tone:** Professional, understated, and confident without being flashy
- **Headline style:** Large, clean grotesque-sans titles with year ranges, presented with restrained elegance
- **CTA style:** Simple, uppercase text labels in pill-shaped outline buttons
- **Avoid:** Loud colors / Decorative elements / Complex animations / Busy layouts

### Don'ts
- ❌ Don't use multiple font weights — screenshot shows uniform weight 400 throughout
- ❌ Don't add decorative graphics or illustrations — screenshot shows only typography and project imagery
- ❌ Don't use bright accent colors in the UI — screenshot shows neutral grays with color coming only from project content
- ❌ Don't create complex multi-column layouts — screenshot shows a clean single-column centered layout
- ❌ Don't add drop shadows to cards or elements — screenshot shows completely flat, shadow-free surfaces
- ❌ Don't use serif fonts anywhere — screenshot shows exclusively grotesque-sans typography with clean lines
- ❌ Don't add background colors to buttons — screenshot shows only outline-style pill buttons

The system deliberately forgoes decorative graphics, accent colors, complex animations, and busy layouts.

## System Prompt (paste into AI tool)

```
This is a senior product designer's portfolio site with a clean, understated aesthetic. The design uses a neutral warm gray (#F6F7F6) background with subtle noise texture and dark charcoal (#393737) typography. All text uses Neue Montreal (grotesque-sans category) at weight 400, creating a consistent and refined appearance. Project titles are displayed large (55-61px) with tight leading. The layout is single-column with generous 96px spacing between sections. Buttons are pill-shaped with 48px border-radius and 1px solid borders. Accent colors are absent from the UI itself—color comes exclusively from project showcase imagery. Critical donts: never use multiple font weights, never add shadows, never use decorative graphics, and keep the palette strictly neutral grays. The site prioritizes content clarity and breathing room over visual complexity.
```