---
version: alpha
name: Bureau Tonalli
description: Parisian CGI-studio minimalism — stark black-on-white canvas, tight Helvetica Neue display type paired with Fragment Mono technical labels, a single plum-magenta accent, hairline borders, and gallery-grade whitespace built for luxury CGI portfolio work.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-inverse: "#000000"
  ink: "#000000"
  ink-secondary: "#888888"

  # Accent
  primary: "#950771"        # plum-magenta brand accent
  primary-soft: "#f5e6f1"   # flattened plum tint over white
  link: "#0099ff"           # interactive blue, rgb(0,153,255)

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

  # Neutral scale
  gray-700: "#444444"
  gray-500: "#888888"
  gray-300: "#cccccc"
  gray-200: "#e6e6e6"
  gray-100: "#f2f2f2"

  # Lines + overlays
  border: "#e0e0e0"
  border-soft: "#eeeeee"     # flattened rgba(136,136,136,0.2) over white

typography:
  display-hero:
    fontFamily: "Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -2px
  display:
    fontFamily: "Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  mono-label:
    fontFamily: "'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.4px
  mono-caption:
    fontFamily: "'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.8px

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.mono-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

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

  card-project:
    backgroundColor: "{colors.surface-inverse}"
    textColor: "{colors.on-ink}"
    rounded: "{rounded.sm}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderColor: "{colors.border}"

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

# Bureau Tonalli Design System

## Overview

Bureau Tonalli is a Paris CGI studio building for luxury and lifestyle clients, and its website reads like a gallery wall rather than a marketing page. The system is built on the most reductive palette possible — pure black (`{colors.ink}`) on pure white (`{colors.background}`) — so that the studio's photoreal 3D work, FOOH motion, and premium product renders carry every drop of color on the page. The chrome stays achromatic; the imagery is the saturation.

Typography is the studio's signature. Display copy is set in tight, slightly-medium-weight Helvetica Neue (rendered here through Inter as its closest web-safe relative), pushed to aggressive negative tracking at large sizes so headlines feel set, deliberate, and editorial. Against this, Fragment Mono handles the small stuff — eyebrows, captions, nav labels, button text — in a technical monospace voice that signals "studio / production" and gives the otherwise quiet layout a precise, blueprint-like rhythm.

Color appears in exactly two places beyond black and white: a plum-magenta brand accent (`{colors.primary}`) used sparingly for emphasis and active states, and a clean interactive blue (`{colors.link}`) reserved for links. There are no fills, no gradients, no decorative tints in the UI itself. Structure comes from hairline borders (`{colors.border-soft}`) and from generous, gallery-grade whitespace rather than from boxes and shadows.

**Key Characteristics:**
- Pure black-on-white canvas — zero UI color so CGI imagery dominates
- Helvetica Neue display type (via Inter) with tight negative tracking at large sizes
- Fragment Mono for eyebrows, captions, nav, and button labels — technical "studio" voice
- A single plum-magenta accent (`{colors.primary}`) used sparingly
- Interactive blue (`{colors.link}`) reserved strictly for links
- Hairline borders and large whitespace instead of shadows and fills
- Mostly square corners; pills reserved for buttons and tags
- Inverted (black) project cards to frame full-bleed render thumbnails

## Colors

### Primary
- **Ink Black** (`{colors.ink}`): All primary text, headings, primary buttons. True black, not softened.
- **Pure White** (`{colors.background}`): Page background, card surfaces, text on dark.
- **Plum Accent** (`{colors.primary}`): Brand accent for emphasis, active states, accent CTAs.
- **Plum Tint** (`{colors.primary-soft}`): Rare soft accent wash, flattened over white.

### Interactive
- **Link Blue** (`{colors.link}`): Inline links and interactive text.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 500 / Ink Secondary** (`{colors.ink-secondary}`): Muted captions, metadata.
- **Gray 300** (`{colors.gray-300}`): Disabled text, faint dividers.
- **Gray 200 / 100** (`{colors.gray-200}`, `{colors.gray-100}`): Subtle surface tints.

### Lines
- **Border** (`{colors.border}`): Standard hairline rules and input underlines.
- **Border Soft** (`{colors.border-soft}`): Whisper dividers, flattened from a 20%-opacity gray.

### On-color
- **On Ink / On Primary** (`{colors.on-ink}`, `{colors.on-primary}`): White text on black or plum.

## Typography

### Font Family
- **Display / Body**: `Inter` (standing in for the site's Helvetica Neue), fallbacks `'Helvetica Neue', Helvetica, Arial, sans-serif`
- **Monospace**: `'Fragment Mono'`, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px hero — studio statement headline |
| `display` | 48px large section openers |
| `section-heading` | 32px section titles |
| `card-title` | 22px project / card titles |
| `body-large` | 20px lead paragraphs |
| `body` | 16px standard reading text |
| `body-small` | 14px secondary copy |
| `mono-label` | 13px Fragment Mono — nav, buttons, eyebrows |
| `mono-caption` | 11px Fragment Mono — tags, metadata, captions |

### Principles
- **Two-voice system**: Helvetica-grade sans for headlines and prose; Fragment Mono for every label, tag, and button. Never mix the roles.
- **Tracking scales with size**: tight negative tracking on display (-2px at 64px), neutral at body, and slightly positive tracking on the mono labels for legibility.
- **Restrained weight**: display lives around medium (500); body at 400. No heavy bold — emphasis comes from size and the mono switch, not weight.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. The base unit is 8px, with large editorial jumps (`{spacing.3xl}` 96px, `{spacing.4xl}` 160px) that drive the gallery rhythm between sections.

### Grid & Container
- Wide max content width with generous outer margins
- Hero: left- or center-aligned single column with heavy top padding
- Project work: full-bleed and 2-column image grids
- Sections separated by whitespace and hairline rules, not background changes

### Whitespace Philosophy
- **Gallery emptiness**: imagery sits in large white margins so renders read as artworks.
- **Hairlines over boxes**: structure is drawn with 1px `{colors.border-soft}` rules and the mono labels, not cards or shadows.
- **Color from content only**: the layout stays black-and-white so the CGI carries all chroma.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Cards, inputs, image frames — square by default |
| `xs` | 2px | Tiny inline elements |
| `sm` | 4px | Project thumbnails |
| `md` | 8px | Occasional rounded containers |
| `pill` | 9999px | Buttons, tags, badges |

## Components

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

### Buttons
- **`button-primary`** — Black fill, white Fragment Mono label, pill. The default CTA.
- **`button-accent`** — Plum (`{colors.primary}`) fill for emphasis CTAs.
- **`button-ghost`** — White with a hairline border; secondary action.

### Tags & Badges
- **`badge`** — White, hairline-bordered pill with muted mono-caption text for expertise tags.

### Cards
- **`card`** — White, square corners, whisper border — content blocks, not heavy panels.
- **`card-project`** — Inverted black frame holding a full-bleed render thumbnail.

### Inputs
- **`input`** — Underline-only field (border on bottom), square, body type. Newsletter / contact forms.

### Navigation
- **`nav-bar`** — White bar, Fragment Mono links, hairline bottom rule. Minimal and quiet.

## Do's and Don'ts

### Do
- Keep all UI chrome black and white so CGI imagery provides the color
- Set headlines in tight, medium-weight Helvetica/Inter with negative tracking
- Use Fragment Mono for every label, eyebrow, tag, nav item, and button
- Use the plum accent (`{colors.primary}`) sparingly for emphasis only
- Reserve blue (`{colors.link}`) strictly for links
- Draw structure with hairline borders and whitespace, not shadows

### Don't
- Don't introduce decorative color fills or gradients into the UI
- Don't set body or headline copy in Fragment Mono — mono is for labels only
- Don't use heavy bold weights for emphasis — switch voice or scale instead
- Don't box every element — let whitespace and hairlines separate sections
- Don't round image frames or cards heavily — square is the default; pills are for buttons/tags

---

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