---
version: alpha
name: Clairoux Studio
description: Editorial portfolio minimalism — a grotesque sans (Monument Grotesk / Neue Haas) at large display sizes on a pure-white canvas with near-black ink, a single decisive red accent, tight negative tracking, and pill-shaped controls. Type and whitespace do all the work.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  ink: "#000000"
  ink-soft: "#323232"
  ink-muted: "#4e4e4e"
  ink-faint: "#a8a8a8"
  gray-mid: "#424242"

  # Accent — the one decisive color
  accent: "#ff0000"

  # On-color
  on-ink: "#ffffff"
  on-accent: "#ffffff"

  # Hairline
  border: "#a8a8a8"
  border-soft: "#e6e6e6"

typography:
  display-hero:
    fontFamily: "Monument Grotesk Variable, Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 85px
    fontWeight: 420
    lineHeight: 1.02
    letterSpacing: -0.01em
  display:
    fontFamily: "Monument Grotesk Variable, Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 420
    lineHeight: 1.05
    letterSpacing: -0.01em
  heading:
    fontFamily: "Monument Grotesk Variable, Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 460
    lineHeight: 1.1
    letterSpacing: -0.01em
  sub-heading:
    fontFamily: "Monument Grotesk Variable, Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  title:
    fontFamily: "Monument Grotesk Variable, Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 25px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-large:
    fontFamily: "Monument Grotesk Variable, Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: "Monument Grotesk Variable, Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-small:
    fontFamily: "Monument Grotesk Variable, Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  caption:
    fontFamily: "Monument Grotesk Variable, Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  mono-label:
    fontFamily: "Monument Grotesk Mono Variable, Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 3px
  sm: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.body-small}"
    rounded: "{rounded.pill}"
    padding: 10px 24px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.accent}"
    typography: "{typography.body-small}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
    borderColor: "{colors.accent}"

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
  link-hover:
    textColor: "{colors.accent}"
    typography: "{typography.body}"

  tag:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    padding: 16px 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.xs}"
    padding: 8px 12px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xs}"
    borderColor: "{colors.ink}"
---

# Clairoux Studio Design System

## Overview

Clairoux Studio's site is a creative-practice portfolio in the editorial-grotesque tradition: a pure-white canvas (`{colors.background}`), near-black ink (`{colors.ink}`), and almost no chrome. The design refuses ornament — there are no cards with shadows, no gradients, no decorative color fields. Instead, oversized grotesque type and generous whitespace carry the entire visual hierarchy. This is a layout where the work (images, projects) is the subject and the interface dissolves around it.

The type system is built on a contemporary grotesque sans — Monument Grotesk and Neue Haas Grotesk on the live site — with display sizes pushed dramatically large (up to ~85px) and pulled tight with negative tracking (`-0.01em`). Weights stay in a narrow, deliberate band: a light 200 for atmospheric text, a near-regular 420/460 for headings, and 500 for emphasis. A monospace cut of the same grotesque handles small labels and metadata, giving the marketing voice a quiet studio-document feel.

Color is reduced to the essentials and then sharpened by a single decisive accent: pure red (`{colors.accent}`). Red is not decorative — it appears on hover, on active links, and as the one moment of intensity in an otherwise achromatic page. The grayscale ramp from `{colors.ink}` through `{colors.ink-soft}`, `{colors.ink-muted}`, and `{colors.ink-faint}` handles every level of secondary text and hairline structure.

**Key Characteristics:**
- Pure-white canvas with near-black `{colors.ink}` text — gallery-grade restraint
- Oversized grotesque display type (up to ~85px) with tight `-0.01em` tracking
- Narrow weight band: 200 / 420 / 460 / 500 — never heavy bold for body
- A single decisive accent — pure red (`{colors.accent}`) on hover/active states only
- Pill-shaped (`{rounded.pill}`) buttons and tags; otherwise sharp, unrounded edges
- Monospace grotesque for small labels and metadata
- No shadows, no gradients, no decorative surfaces — whitespace is the structure

## Colors

### Primary
- **Ink Black** (`{colors.ink}`): Headings, body text, primary buttons. Pure black for maximum editorial contrast.
- **White** (`{colors.background}`): Page background and all surfaces. The dominant field.

### Accent
- **Studio Red** (`{colors.accent}`): The one decisive color — hover states, active links, emphasis. Never used as a background field.

### Neutral / Secondary Text
- **Ink Soft** (`{colors.ink-soft}`): Strong secondary text.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, supporting copy.
- **Gray Mid** (`{colors.gray-mid}`): Tertiary text.
- **Ink Faint** (`{colors.ink-faint}`): Muted labels, placeholder text, hairline borders.

### Structure
- **Border** (`{colors.border}`): Hairline outlines on tags, inputs, ghost buttons.
- **Border Soft** (`{colors.border-soft}`): Subtle dividers between sections.

### On-Color
- **On Ink** (`{colors.on-ink}`): White text on the black primary button.
- **On Accent** (`{colors.on-accent}`): White text on red, used sparingly.

## Typography

### Font Family
- **Primary**: `Monument Grotesk Variable` (live), with fallbacks `Space Grotesk, Helvetica Neue, Arial, sans-serif`
- **Monospace**: `Monument Grotesk Mono Variable`, with fallbacks `Space Mono, ui-monospace, Menlo, monospace`
- The live site also serves Neue Haas Grotesk as a secondary grotesque cut.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | ~85px hero statement — billboard impact |
| `display` | Large section openers |
| `heading` | Section titles |
| `sub-heading` | Lighter sub-sections |
| `title` | Project / card titles |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | UI text, buttons |
| `caption` | Metadata, fine print |
| `mono-label` | Studio-document labels, tags, indices |

### Principles
- **Scale as hierarchy**: Distinction comes from dramatic size jumps, not weight or color. Display type is huge; body is calm.
- **Tight display tracking**: Headlines pull to `-0.01em`; body text stays at `0em`.
- **Narrow weight band**: 200 (atmospheric), 400–460 (reading/headings), 500 (emphasis). Avoid 700 in body.
- **Mono as studio voice**: The monospace grotesque marks labels and indices with a quiet archival tone.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. Sections breathe with `{spacing.3xl}`–`{spacing.4xl}` vertical rhythm.

### Grid & Container
- Wide, near-full-bleed content with generous side margins
- Project work presented in image-forward grids and single-column reading passages
- Section separation comes from whitespace and the occasional `{colors.border-soft}` hairline, not from filled containers

### Whitespace Philosophy
- **Gallery emptiness**: Large vertical padding isolates each block. White space is the primary compositional tool.
- **Type does the structure**: Without shadows or color fields, scale and spacing alone establish hierarchy.
- **One accent moment**: Red appears only on interaction, so the eye reads it as signal, never noise.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page, text, images |
| Hairline (Level 1) | 1px `{colors.border}` | Tags, ghost buttons, inputs |
| Divider | 1px `{colors.border-soft}` | Section breaks |

**Depth Philosophy**: There is essentially no elevation system. The page is flat by design — depth is implied through scale and whitespace, not shadow. Pill-shaped controls and hairline outlines are the only structural chrome.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Images, cards, sections — sharp edges |
| `xs` | 3px | Inputs, small fields |
| `sm` | 6px | Minor containers |
| `pill` | 9999px | Buttons and tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.tag}`).

### Buttons
- **`button-primary`** — Black pill, white text. Hovers to red (`{colors.accent}`).
- **`button-secondary`** — White pill with `{colors.border}` hairline. Text and border shift to red on hover.

### Links
- **`link`** — Black text, no underline by default. Hovers to `{colors.accent}`.

### Tags
- **`tag`** — Hairline pill with monospace label, muted ink. Used for project categories and indices.

### Cards
- **`card`** — Sharp-edged (`{rounded.none}`), zero padding, no shadow. The image or work is the card.

### Inputs
- **`input`** — White field, hairline border, 3px radius. Focus deepens the border to `{colors.ink}`.

### Navigation
- **`nav-bar`** — White, minimal, small body-size links. Hover states use red.

## Do's and Don'ts

### Do
- Use dramatic size contrast for hierarchy — let display type be very large
- Apply tight `-0.01em` tracking to display and heading type only
- Reserve red (`{colors.accent}`) for hover and active states — keep it a signal
- Keep the palette achromatic; let work supply the color
- Use pill radius for buttons and tags, sharp edges everywhere else
- Use the monospace grotesque for labels, indices, and metadata

### Don't
- Don't add shadows, gradients, or filled color cards — the page is flat
- Don't use red as a background field or decoratively
- Don't use heavy 700 weight for body text — stay in the 200–500 band
- Don't round images or content cards — they stay sharp
- Don't crowd sections — whitespace is the structure
- Don't add positive letter-spacing to display type

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display type scales down sharply |
| Tablet | 600–1024px | 2-column work grids begin |
| Desktop | 1024–1440px | Full grid, wide margins |
| Large Desktop | >1440px | Centered, maximum whitespace |

### Touch Targets
- Pill buttons keep comfortable 10px vertical padding
- Nav links spaced for tap comfort at small sizes

### Collapsing Strategy
- Hero display type: ~85px → scales down while keeping negative tracking
- Work grids: multi-column → single column
- Navigation: inline links → minimal stacked menu
- Section spacing compresses from `{spacing.4xl}` toward `{spacing.2xl}` on mobile

### Image Behavior
- Work images go near-full-bleed and maintain sharp (unrounded) edges at all sizes
- Image grids reflow column counts rather than cropping

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink Black `{colors.ink}` (white text)
- Background: White `{colors.background}`
- Heading text: Ink Black `{colors.ink}`
- Body text: Ink Black `{colors.ink}` / muted `{colors.ink-muted}`
- Accent / hover: Studio Red `{colors.accent}`
- Hairline: `{colors.border}`

### Example Component Prompts
- "Create a hero on white. Headline at 85px grotesque (Space Grotesk) weight 420, line-height 1.02, letter-spacing -0.01em, color `{colors.ink}`. Below it, body at 19px weight 400 in `{colors.ink-muted}`. One black pill CTA (`{colors.ink}`, white text, 9999px radius, 10px 24px padding) that turns red on hover."
- "Design a project tag: white pill with 1px `{colors.border}` outline, monospace label 14px in `{colors.ink-muted}`, 9999px radius, 4px 12px padding."
- "Build a work grid: sharp-edged images (`{rounded.none}`), no shadows, generous whitespace between rows, project titles at 25px weight 500."
- "Create a nav: white bar, small 17px links in `{colors.ink}` that turn `{colors.accent}` on hover, minimal padding."

### Iteration Guide
1. Hierarchy comes from size and whitespace — not weight or color
2. Red is the only accent and only appears on interaction
3. Pills for buttons/tags; sharp edges for images and content
4. Keep weights in the 200–500 band; never heavy bold body
5. No shadows or gradients — depth is implied through scale and space
6. Monospace grotesque marks labels, indices, and metadata

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Clairoux Studio. Brand names and trademarks belong to their respective owners.