# Robin Noguier · Design system migration spec

> Source: https://www.robin-noguier.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of a refined, portfolio-focused design that balances bold typography with dynamic image presentation.

## 1. Identity DNA

The system is structured as a curated gallery of creative work, where each design decision serves the portfolio's primary function: showcasing projects with clarity and impact. The architecture balances bold, high-contrast typography against a calm, muted backdrop, creating a focused environment for visual storytelling. This is a refined portfolio framework, not a general-purpose toolkit.

**One-liner:** A refined portfolio showcasing creative projects with bold typography and dynamic image layouts.
**Keywords:** Portfolio · Showcase · Designer · Case Study · Creative
**Analogy:** A curated gallery of creative work

## 2. Color

The palette is built on a sophisticated, muted blue that provides a calm, non-competitive backdrop for content. This allows high-contrast white text and vibrant photographic work to command immediate attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#3D6681` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#D5DEDD` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.2)` | divider |

**Color principle:** A sophisticated, muted blue palette provides a calm backdrop for high-contrast white text and vibrant photographic content.

The principle is restraint: a limited, high-contrast palette ensures the designer's work remains the sole focal point.

## 3. Typography

Typography is the primary voice, pairing a high-contrast display serif for large, impactful titles with a clean geometric sans-serif for body text and functional labels. This contrast between editorial elegance and structural clarity defines the system's character.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 135px | 1.0 | 400 | -1px | Large project titles |
| body | 16px | 1.5 | 400 | 0px | Project descriptions |
| label | 14px | 1.0 | 700 | 2px | Navigation and call-to-action labels |

**Type rules:**
- Use uppercase and wide letter-spacing for navigation and action labels
- Pair high-contrast display serif with clean geometric sans-serif
- Keep body text light and readable against the dark background

## 4. Spacing

All spatial relationships are governed by a consistent 4px base unit, creating a reliable vertical and horizontal rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base unit drives vertical and horizontal rhythm, with generous padding around content.

## 5. Surfaces

Depth is suggested sparingly through soft, ambient shadows and subtle white borders on image elements. These treatments define layers without creating heavy, separate containers.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 4px 24px rgba(0, 0, 0, 0.15)
- **Borders:** Subtle white borders on image elements

## 6. Layout

The desktop layout is an asymmetrical split, placing large typography on one side against dynamic imagery on the other. This flexible skeleton collapses into a clean, vertical stack for mobile viewing.

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

**Skeleton:** Asymmetrical split layout with large typography on one side and dynamic imagery on the other, shifting to a stacked layout on mobile.

## 7. Motion & Interaction

Motion is understated and purposeful, with smooth 220ms transitions governing all property changes. The philosophy prioritizes functional feedback over decorative effect, using parallax and hover states to reinforce spatial relationships.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth scroll-based transformations for parallax effects
  - Subtle hover transitions on interactive elements

- **Hover:** Subtle cursor changes and potential opacity shifts on interactive elements
- **Click:** Direct navigation to case study details
- **Transition:** All properties transition smoothly over 220ms
- **Keyboard:** Standard tab navigation

## 8. Voice & Don'ts

The editorial voice is confident, minimalist, and professional. Copy is sparse, headlines are impactful serifs, and calls to action are clear, uppercase directives.

- **Tone:** Confident, minimalist, and professional
- **Headline style:** Large, elegant serif typography with a focus on impact
- **CTA style:** Clear, uppercase, and action-oriented
- **Avoid:** Cluttered layouts / Overly complex color schemes / Dense blocks of text

### Don'ts
- ❌ don't use rounded corners on main containers — screenshot shows square image frames
- ❌ don't use a complex grid with many gutters — screenshot shows a clean, flexible layout
- ❌ don't use bright, saturated accent colors — screenshot relies on white and muted blue
- ❌ don't use lowercase for navigation — screenshot shows uppercase for 'ABOUT'
- ❌ don't use heavy drop shadows on every element — screenshot shows minimal, soft shadows
- ❌ don't use playful, rounded sans-serifs — screenshot uses a structured, geometric sans

The system deliberately avoids cluttered layouts, complex grids, saturated accent colors, and playful typography, maintaining its focused, gallery-like purity.

## System Prompt (paste into AI tool)

```
This is a refined portfolio website for a designer, characterized by a calm, muted blue background and bold, high-contrast white typography. It uses a large didone-serif for project titles and a clean geometric-sans for body text and navigation. The layout is asymmetrical, featuring dynamic, slightly rotated image cards that create a sense of depth and movement. Navigation is minimal and uppercase, with generous letter-spacing. Critical design principles include maintaining a clean, uncluttered aesthetic, using large-scale typography for impact, and ensuring images are the focal point without heavy shadows or borders. Avoid using bright accent colors, rounded corners on main elements, or complex grid systems.
```
