---
version: alpha
name: MNBAQ
description: Quiet institutional editorial — a national art museum identity built on a warm paper canvas, near-black ink, and a single confident accent. Generous whitespace, restrained sans-serif type, and gallery-like calm where the artwork leads and the chrome recedes.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f4f0"
  paper: "#faf8f4"
  ink: "#1a1a1a"
  ink-pure: "#000000"

  # Accent — institutional signature
  primary: "#0a0a0a"
  accent: "#c8102e"
  accent-soft: "#fbe9ec"

  # Interactive
  link: "#1a1a1a"
  link-hover: "#c8102e"
  focus: "#0a72ef"
  ring: "#bcd4f5"

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

  # Neutral scale
  gray-900: "#1a1a1a"
  gray-700: "#3d3d3d"
  gray-600: "#5c5c5c"
  gray-500: "#767676"
  gray-400: "#9a9a9a"
  gray-200: "#e2ddd5"
  gray-100: "#ece8e1"

  # Borders + dividers
  border: "#e2ddd5"
  divider: "#1a1a1a"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.4px
  eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.2px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.2px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

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

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

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.accent}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 4px 10px

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

  card-event:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.gray-400}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus}"

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

  eyebrow-label:
    textColor: "{colors.accent}"
    typography: "{typography.eyebrow}"
---

# MNBAQ Design System

## Overview

The Musée national des beaux-arts du Québec (MNBAQ) presents itself the way a great gallery hangs a painting: with restraint, generous breathing room, and total deference to the work. The interface is built on a warm, near-white paper canvas (`{colors.paper}`) and deep, slightly-warm ink (`{colors.ink}`) that reads as confident rather than harsh. Nothing competes with the artwork imagery — chrome is reduced to thin hairline borders, squared corners, and a disciplined sans-serif voice.

The system's identity comes from a single decisive accent: a strong institutional red (`{colors.accent}`) reserved for moments that matter — active links, the primary ticketing call to action, and small eyebrow labels that name a section. Used sparingly against the achromatic palette, the red carries the entire emotional register of the brand. Everywhere else, the palette is a quiet warm-gray scale that lets photographs of paintings and sculpture set the mood.

Geometry is the second identity move. Corners are square (`{rounded.none}`) across buttons, cards, and inputs — an editorial, print-rooted decision that signals an institution older and more permanent than any startup. Images sit edge-to-edge in their containers; cards are defined by hairline `{colors.border}` lines and whitespace rather than rounding or shadow. Type is set in a clean grotesque sans with tight negative tracking at display sizes, so headlines feel composed and curatorial.

The result is bilingual, institutional calm. The layout rhythm is slow and intentional, with large vertical gaps (`{spacing.3xl}`–`{spacing.4xl}`) between sections. White space is not empty — it is the frame.

**Key Characteristics:**
- Warm paper canvas (`{colors.paper}`) with near-black warm ink (`{colors.ink}`)
- Single institutional red accent (`{colors.accent}`) used only for CTAs, active links, and eyebrows
- Squared corners everywhere (`{rounded.none}`) — print-rooted, permanent
- Hairline borders and whitespace instead of shadows for separation
- Clean grotesque sans-serif with tight display tracking
- Uppercase letter-spaced eyebrow labels naming sections
- Edge-to-edge artwork imagery; chrome recedes so the work leads
- Slow vertical rhythm with gallery-scale section spacing

## Colors

### Canvas & Ink
- **Paper** (`{colors.paper}`): Warm off-white canvas for primary surfaces and sections.
- **Background** (`{colors.background}`): Pure white for cards and image frames.
- **Surface Soft** (`{colors.surface-soft}`): Slightly deeper warm tint for alternating bands.
- **Ink** (`{colors.ink}`): Primary text, headings, dividers — warm near-black, not pure.

### Accent
- **Institutional Red** (`{colors.accent}`): The brand signature — primary ticketing CTA, active link, hover state.
- **Accent Soft** (`{colors.accent-soft}`): Tinted background for small badges and labels.

### Interactive
- **Link** (`{colors.link}`): Default link in ink; underlined.
- **Link Hover** (`{colors.link-hover}`): Shifts to institutional red on hover.
- **Focus** (`{colors.focus}`): Keyboard focus ring, accessible blue distinct from the brand red.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 600** (`{colors.gray-600}`): Body secondary, captions.
- **Gray 500** (`{colors.gray-500}`): Muted metadata.
- **Gray 400** (`{colors.gray-400}`): Placeholder, input borders.
- **Gray 200 / Border** (`{colors.border}`): Hairline borders, card outlines, dividers.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica Neue, Arial, sans-serif` — a clean grotesque sans standing in for the institution's editorial sans voice.
- Numerals and small UI labels share the same family for consistency.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 56px hero — exhibition titles, billboard impact |
| `section-heading` | Section titles across the page |
| `card-title` | Event / exhibition card headings |
| `eyebrow` | Uppercase letter-spaced section labels (in accent red) |
| `body-large` | Lead paragraphs, exhibition intros |
| `body` | Standard reading text |
| `body-small` | UI text, secondary descriptions |
| `button-ui` | Buttons and nav links |
| `caption` | Metadata, image credits, dates |

### Principles
- **Curatorial compression**: Display headings use tight negative tracking (-1.5px at 56px) so titles feel composed and intentional.
- **Eyebrows in red**: Small uppercase labels carry positive letter-spacing and the accent color to name sections without shouting.
- **Two weights carry the system**: 400 for reading, 600 for headings and UI emphasis.
- **Restraint over decoration**: No italics or flourishes in chrome — the imagery provides the expression.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large gallery-scale jumps at `{spacing.3xl}` (96px) and `{spacing.4xl}` (144px) for section separation.

### Grid & Container
- Max content width approximately 1280px, centered.
- Hero: large edge-to-edge artwork imagery with overlaid or adjacent title block.
- Exhibition/event grids: 2–3 column card layouts separated by hairline borders.
- Full-width section bands alternate paper and pure-white surfaces.

### Whitespace Philosophy
- **Gallery emptiness**: Generous vertical padding between sections; whitespace frames the artwork.
- **Hairlines, not boxes**: Separation comes from 1px `{colors.border}` lines and squared edges, never shadow.
- **Edge-to-edge images**: Photographs fill their containers with no rounding, mirroring how art hangs flush in a frame.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text, most surfaces |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, inputs, nav, dividers |
| Focus | `2px solid {colors.focus}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: The system is essentially flat. Depth is communicated through hairline borders, squared geometry, and whitespace rather than shadow or elevation. This keeps the interface print-like and lets imagery be the only thing with visual weight.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs, images — the default |
| `xs` | 2px | Rare small inline elements |
| `sm` | 4px | Small functional containers |
| `md` | 6px | Optional softer containers |
| `lg` | 8px | Larger optional containers |
| `pill` | 9999px | Reserved for occasional tags |

## Components

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

### Buttons
- **`button-primary`** — Ink fill, white text, squared. Hovers to institutional red.
- **`button-secondary`** — White surface with 1px ink border, squared.
- **`button-accent`** — Institutional red fill for the primary ticketing CTA.

### Badges & Labels
- **`badge`** — Soft red tint background with red eyebrow text, squared.
- **`eyebrow-label`** — Uppercase letter-spaced red label naming a section.

### Cards
- **`card`** — Edge-to-edge image with hairline border; squared corners.
- **`card-event`** — Warm paper surface, hairline border, exhibition/event title.

### Inputs
- **`input`** — White surface, 1px gray border, squared. Focus shifts border to `{colors.focus}`.

### Navigation
- **`nav-bar`** — White header with hairline bottom border. Ink links, red ticketing CTA.

## Do's and Don'ts

### Do
- Keep corners square (`{rounded.none}`) on buttons, cards, and inputs
- Reserve the institutional red (`{colors.accent}`) for CTAs, active links, and eyebrows
- Use hairline `{colors.border}` lines and whitespace for separation, never shadow
- Let artwork imagery sit edge-to-edge and lead the page
- Use uppercase letter-spaced red eyebrows to name sections
- Stick to two weights — 400 for reading, 600 for headings/UI

### Don't
- Don't round corners — it breaks the print-institutional feel
- Don't use the red decoratively or fill large areas with it
- Don't add drop shadows or glow — the system is flat
- Don't introduce a second accent color
- Don't crowd sections — preserve the gallery-scale vertical rhythm
- Don't set body type in heavy weights — 400 is the reading default

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, reduced section padding |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | 1024–1280px | Full multi-column layout |
| Large Desktop | >1280px | Centered, generous outer margins |

### Touch Targets
- Buttons use comfortable padding (14px vertical) for tap targets
- Nav links spaced for touch
- Ticketing CTA always prominent and reachable

### Collapsing Strategy
- Hero: 56px title scales down, maintains negative tracking
- Navigation: horizontal links → hamburger menu, ticketing CTA persists
- Exhibition cards: 3-column → 2-column → single column
- Section spacing: 96px+ → ~48px on mobile
- Footer: multi-column → stacked

### Image Behavior
- Artwork images maintain edge-to-edge flush treatment at all sizes
- Responsive images preserve aspect ratio
- Full-bleed hero imagery on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink `{colors.ink}` (hover red `{colors.accent}`)
- Ticketing CTA: Institutional Red `{colors.accent}`
- Background: Warm Paper `{colors.paper}` / White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Border: `1px solid {colors.border}`
- Eyebrow / active link: Red `{colors.accent}`
- Focus ring: `{colors.focus}`

### Example Component Prompts
- "Create a hero on warm paper background. Exhibition title at 56px Inter weight 600, line-height 1.05, letter-spacing -1.5px, color `{colors.ink}`. Red uppercase eyebrow above at 13px weight 600, letter-spacing 1.2px, color `{colors.accent}`. Squared red ticketing button (`{colors.accent}`, white text, 14px 28px padding, 0px radius)."
- "Design an exhibition card: edge-to-edge image, hairline `1px solid {colors.border}`, squared corners. Title at 22px Inter weight 600, date caption at 13px in `{colors.gray-600}`."
- "Build a nav bar: white background, hairline bottom border, ink links at 15px weight 600, red 'Billets' ticketing CTA right-aligned."

### Iteration Guide
1. Square corners are the foundation — never round chrome
2. The red is precious — CTAs, active links, eyebrows only
3. Separation comes from hairlines and whitespace, not shadow
4. Two weights only: 400 (read), 600 (announce)
5. Let imagery be the loudest element on the page

---

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