# Simonesniekers · Design system migration spec

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

> This site is worth including as a masterclass in extreme minimalist portfolio design, demonstrating how a vibrant, unconventional color palette and severe UI restraint can create a powerful, gallery-like visual experience.

## 1. Identity DNA

The system operates on a principle of extreme restraint, treating the interface not as a container for content but as a gallery wall. The analogy is precise: this is a high-end photography exhibition catalog translated to the web, where the architecture of the page exists only to frame the image.

**One-liner:** A minimalist photography portfolio that uses bold, saturated gradients as a canvas for centered, high-fashion imagery.
**Keywords:** minimal · editorial · photography · portfolio · clean
**Analogy:** A high-end photography exhibition catalog brought to the web, prioritizing visual impact over UI chrome.

## 2. Color

The color palette is reduced to a single, powerful gesture: a full-viewport gradient transitioning from saturated orange to golden yellow. This provides the primary visual energy and warmth, acting as a canvas rather than a UI color system.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#E95531` | main background |
| `--bg-soft` | `#EDAB1E` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#808080` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Extreme restraint in UI elements; the design relies on vibrant background gradients and bold imagery rather than complex UI.

The principle is absolute: color exists solely to serve the imagery, not to differentiate interface elements.

## 3. Typography

Typographic voice is deliberately flat and functional, using Neue Haas Grotesk at a uniform 16px weight across all elements. This Neo-grotesque-sans category choice eliminates hierarchy through size, reinforcing the silent, gallery-like atmosphere where text serves only as a label.

- **Display:** neo-grotesque-sans
- **Body:** neo-grotesque-sans
- **Mono:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 16px | 1.2 | 400 | 0px | UI labels and minimal text |

**Type rules:**
- Use Neue Haas Grotesk for all primary text
- Maintain a very small, consistent font size (16px) across all UI elements

## 4. Spacing

Spacing is defined by a rhythm of vast emptiness, with generous vertical padding often exceeding 1000px to isolate the central image and create a contemplative pause.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding and margin, often exceeding 1000px, creating expansive empty space.

## 5. Surfaces

Surfaces are completely flat, with no visible shadows or borders. The transition from gradient background to photographic image is edge-to-edge, eliminating any sense of layered depth or contained UI components.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** None visible; UI is edge-to-edge.

## 6. Layout

The layout skeleton is singular and absolute: one vertically-oriented, centered photographic image on a full-viewport gradient background. Minimal text labels are anchored to the bottom edges, their position secondary to the visual dominance of the photograph.

- **Container max:** 1920px
- **Grid:** 12 columns, gutter 16px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A single, centered image on a full-viewport gradient background, with minimal text anchored to the bottom edges.

## 7. Motion & Interaction

Motion philosophy is slow and atmospheric, employing long-duration transitions for background color shifts and load transforms. The effect is fluid and deliberate, creating a sense of change without drawing attention to the interface mechanism itself.

- **Durations:** micro 220ms · small 1000ms · medium 1250ms
- **Easing:** `cubic-bezier(0.25, 1, 0.5, 1)`
- **Patterns:**
  - Background color transitions
  - Transformations on scroll/load

- **Hover:** Cursor changes to pointer on interactive text elements.
- **Click:** Triggers navigation or state changes.
- **Transition:** Smooth, long-duration background color and transform transitions.
- **Keyboard:** Standard keyboard navigation implied by pointer cursor on text.

## 8. Voice & Don'ts

The editorial voice is minimalist, confident, and silent. It avoids traditional headlines and explicit calls-to-action, using only small, functional labels like page percentages and names to navigate.

- **Tone:** Minimalist, confident, and silent.
- **Headline style:** No headlines; only small, functional labels like '0%', 'Simone Sniekers', and 'Info'.
- **CTA style:** No explicit CTAs; navigation is subtle and implied.
- **Avoid:** Avoid complex layouts, excessive text, UI borders, shadows, or standard UI components.

### Don'ts
- ❌ Don't use drop shadows — screenshot shows completely flat imagery and text without any elevation.
- ❌ Don't add UI borders or outlines — screenshot shows clean edges between the gradient background and the image.
- ❌ Don't use multiple font sizes or weights — screenshot shows a uniform 16px/400 weight across all text.
- ❌ Don't use traditional navigation bars — screenshot shows only a few text labels anchored to the bottom.
- ❌ Don't use a white or light neutral background — screenshot shows a dominant, vibrant orange-to-yellow gradient.
- ❌ Don't clutter with multiple content cards — screenshot shows a single, centered photographic image as the primary focus.

The system deliberately omits drop shadows, UI borders, multiple font sizes, traditional navigation bars, light backgrounds, and content cards to preserve its gallery-like purity.

## System Prompt (paste into AI tool)

```
Design a minimalist photography portfolio with extreme UI restraint. Use a vibrant gradient background (orange #E95531 to yellow #EDAB1E) as the primary canvas. Typography must be Neo-grotesque-sans (Neue Haas Grotesk) at a uniform 16px/400 weight for all labels. Layout centers a single, high-fashion photographic image on a full viewport. Critical donts: no drop shadows, no UI borders, no multiple font sizes, no traditional navigation bars, no white backgrounds, and no content cards. The experience should feel like a silent, high-end gallery exhibition where the imagery is the absolute hero.
```