---
name: Robin Noguier
description: "This site is worth including as a prime example of a refined, portfolio-focused design that balances bold typography with dynamic image presentation."
version: alpha

colors:
  background: "#3D6681"
  primary: "#FFFFFF"
  neutral: "#D5DEDD"
  line: "rgba(255, 255, 255, 0.2)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 135px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  label:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "2px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A refined portfolio showcasing creative projects with bold typography and dynamic image layouts.

*A curated gallery of creative work*

## Colors

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

- **Background (`#3D6681`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#D5DEDD`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.2)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* A consistent 4px base unit drives vertical and horizontal rhythm, with generous padding around content.

## Elevation & Depth

- 0 4px 24px rgba(0, 0, 0, 0.15)
- Borders: Subtle white borders on image elements

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Uppercase text button with generous horizontal padding and a right-pointing arrow icon
- **card:** Dynamic image cards with slight rotation and white borders
- **hero:** A bold typographic introduction paired with a dynamic, rotated image

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```