---
version: alpha
name: Loli Laboureau
description: Cinematic dark-canvas portfolio for a multidisciplinary visual director — near-black gallery background, bright off-white grotesk display type with wide tracking on labels, an electric accent reserved for hover/links, hairline borders, and image-forward editorial layout where work fills the frame and chrome recedes.

colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#0a0a0a"
  surface-raised: "#161616"
  surface-soft: "#111111"
  ink: "#f2f0ec"
  ink-secondary: "#a3a09a"
  ink-muted: "#6e6b66"

  # Accent — reserved for links, hover, active labels
  primary: "#e8412b"
  primary-hover: "#ff5640"

  # Lines + chrome
  border: "#262626"
  border-strong: "#3a3a3a"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

typography:
  display-hero:
    fontFamily: "Archivo, Arial Narrow, sans-serif"
    fontSize: 72px
    fontWeight: 800
    lineHeight: 0.95
    letterSpacing: -2px
  display:
    fontFamily: "Archivo, Arial Narrow, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -1px
  section-heading:
    fontFamily: "Archivo, Arial Narrow, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Archivo, Arial Narrow, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-label:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.5px
  eyebrow:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 2.4px
  caption:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.4px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 24px 32px
    borderColor: "{colors.border}"

  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-label}"
    padding: 8px 0px

  card:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"

  project-tile:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 4px 10px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
---

# Loli Laboureau Design System

## Overview

Loli Laboureau's site is a director's reel rendered as a website — a near-black gallery (`{colors.background}`) where the work is the interface and the chrome all but disappears. This is a multidisciplinary portfolio (films, photography, motion, collage, 3D VFX, plus an experimental "Lab AI" section), and the design treats every page like a darkened screening room: imagery sits edge-to-edge against the dark canvas, and the only persistent UI is a thin band of navigation set in tightly-tracked uppercase labels. The mood is cinematic and editorial, not corporate.

Type carries the brand. A bold grotesque (mapped here to Archivo, a wide-set high-contrast-in-weight sans) renders the name "LOLI LABOUREAU" at billboard scale with tight negative tracking, while navigation and metadata switch to small, wide-tracked uppercase (`{typography.nav-label}`, `{typography.eyebrow}`). That tension — huge condensed-feeling headlines against airy, spaced-out micro-labels — is the typographic signature. Off-white ink (`{colors.ink}`) reads warm against the cool near-black, avoiding the harshness of pure white on pure black.

Color is deliberately starved. The system is monochromatic by default — near-black, off-white, and two greys — with a single electric accent (`{colors.primary}`) held in reserve for links, hover states, and active navigation. Color never decorates; it marks interaction. Borders are hairlines (`{colors.border}`), corners are square (`{rounded.none}`), and there are no soft shadows or rounded cards. The restraint keeps attention on the photography and film stills, which supply all the color the page needs.

**Key Characteristics:**
- Near-black cinematic canvas (`{colors.background}`) with warm off-white ink (`{colors.ink}`)
- Bold grotesque display type at billboard scale with tight negative tracking
- Wide-tracked uppercase micro-labels for nav and metadata — the counter-move to the huge headlines
- Single electric accent (`{colors.primary}`) reserved for links/hover/active only
- Square corners everywhere (`{rounded.none}`) — no rounding, no soft shadows
- Hairline borders (`{colors.border}`) as the only structural chrome
- Image-forward, edge-to-edge layout where work fills the frame
- Monochromatic palette so the photography supplies all the color

## Colors

### Canvas & Ink
- **Canvas Black** (`{colors.background}`): The near-black gallery background across all pages.
- **Surface Raised** (`{colors.surface-raised}`): Slightly lifted blocks — cards, badges, hovered tiles.
- **Surface Soft** (`{colors.surface-soft}`): Inputs and recessed panels.
- **Off-White** (`{colors.ink}`): Primary text and the name lockup. Warm white, never pure `#ffffff`.
- **Ink Secondary** (`{colors.ink-secondary}`): Nav links at rest, secondary copy, metadata.
- **Ink Muted** (`{colors.ink-muted}`): Captions, credits, the quietest text.

### Accent
- **Signal Red** (`{colors.primary}`): Links, hover, active nav state. The only chromatic color in the chrome.
- **Signal Red Hover** (`{colors.primary-hover}`): Brighter on hover.

### Lines & Chrome
- **Hairline** (`{colors.border}`): Default 1px dividers and tile separators.
- **Strong Line** (`{colors.border-strong}`): Ghost-button and input outlines.

## Typography

### Font Family
- **Primary**: `Archivo`, with fallbacks `Arial Narrow, Arial, sans-serif` — a grotesque chosen for its wide weight range and condensed feel at display sizes.
- All display headlines use tight negative tracking; all labels use wide positive tracking.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | The name lockup / billboard headline (72px, weight 800, -2px) |
| `display` | Page titles |
| `section-heading` | Section titles |
| `card-title` | Project / tile titles |
| `body-large` | Lead paragraphs, about copy |
| `body` | Standard reading text |
| `body-small` | Dense UI text |
| `nav-label` | Uppercase nav, buttons (wide tracking) |
| `eyebrow` | Section kickers, badges (widest tracking) |
| `caption` | Credits, image captions, metadata |

### Principles
- **Scale extremes**: huge display weights against tiny wide-tracked labels — no mid-scale filler.
- **Tracking by role**: negative tracking on display (compression), wide positive tracking on uppercase labels (air).
- **Off-white over pure white**: text is `{colors.ink}`, warm against the cool canvas.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block above. Generous vertical rhythm — sections breathe with `{spacing.3xl}`–`{spacing.4xl}` gaps so imagery dominates.

### Grid & Container
- Edge-to-edge image grids; work tiles abut with hairline separation.
- Persistent thin nav band; content is otherwise full-bleed.
- Square corners throughout — `{rounded.none}` is the default everywhere.

### Whitespace Philosophy
- **Gallery darkness**: the near-black canvas plays the role white space plays elsewhere — negative space that frames the work.
- **Chrome recedes**: only hairline borders and small labels persist; everything else is image.

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Off-white fill, dark text, square. Inverts to `{colors.primary}` on hover.
- **`button-ghost`** — Transparent with a `{colors.border-strong}` outline.

### Navigation
- **`nav-bar`** — Dark band, hairline bottom border, wide-tracked uppercase labels.
- **`nav-link`** — `{colors.ink-secondary}` at rest, `{colors.primary}` on hover/active.

### Cards & Tiles
- **`card`** — Slightly raised surface, hairline border, square corners, no shadow.
- **`project-tile`** — Image-forward tile separated by hairlines.

### Inputs
- **`input`** — Recessed soft surface, strong outline, focus shifts the border to `{colors.primary}`.

## Do's and Don'ts

### Do
- Keep the canvas near-black and the ink warm off-white
- Reserve `{colors.primary}` for interaction only — links, hover, active nav
- Use square corners (`{rounded.none}`) everywhere
- Use hairline borders as the only structural chrome
- Pair huge negative-tracked display type with tiny wide-tracked uppercase labels
- Let imagery run edge-to-edge and supply the color

### Don't
- Don't use pure white text or pure black canvas — both are too harsh
- Don't round corners or add soft drop shadows
- Don't use the accent decoratively or in large fills
- Don't introduce a second accent color into the chrome
- Don't crowd the imagery with heavy UI

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column image stack, nav collapses to a menu |
| Tablet | 600–1024px | 2-column tile grid |
| Desktop | >1024px | Full multi-column grid, persistent nav band |

### Collapsing Strategy
- Display headline scales down but keeps negative tracking
- Nav labels collapse into a toggled menu on mobile
- Image grids: multi-column → 2-column → single column
- Section spacing compresses from `{spacing.4xl}` toward `{spacing.2xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Canvas Black `{colors.background}`
- Heading text: Off-White `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Accent / links: Signal Red `{colors.primary}`
- Borders: Hairline `{colors.border}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Render the name at 72px Archivo weight 800, letter-spacing -2px, color `{colors.ink}`. Above it, an eyebrow in 12px uppercase weight 600, letter-spacing 2.4px, color `{colors.ink-secondary}`."
- "Build a nav band: dark background, hairline `{colors.border}` bottom, uppercase 13px weight 500 links letter-spacing 1.5px in `{colors.ink-secondary}`, turning `{colors.primary}` on hover. Square corners."
- "Design a project tile grid: edge-to-edge images separated by 1px `{colors.border}` hairlines, square corners, title in 22px Archivo weight 600 below."

---

## 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 Loli Laboureau. Brand names and trademarks belong to their respective owners.