Bordeaux

---
version: 1
name: bordeaux
description: "A restrained luxury system: deep wine on warm cream."
theme: light
colors:
  canvas: "#fdf9f3"
  surface: "#f5f2ec"
  elevated: "#ece8e2"
  border: "#ddd9d4"
  ink: "#262422"
  body: "#5e5b58"
  muted: "#74726e"
  primary: "#721e44"
  primary-active: "#521531"
  on-primary: "#ffffff"
  success: "#18844d"
  warning: "#926e1a"
  danger: "#bf3722"
  info: "#226bbf"
typography:
  display-xl:
    fontFamily: "Bricolage Grotesque"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.5px
  display-lg:
    fontFamily: "Bricolage Grotesque"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1px
  display-md:
    fontFamily: "Bricolage Grotesque"
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.5px
  body:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-sm:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  button:
    fontFamily: "Inter"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.1px
  caption:
    fontFamily: "Inter"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  code:
    fontFamily: "JetBrains Mono"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
rounded:
  sm: 6px
  md: 10px
  lg: 16px
  pill: 9999px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"
    rounded: "{rounded.md}"
  input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"
    rounded: "{rounded.md}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.body}"
    border: "1px solid {colors.border}"
    rounded: "{rounded.lg}"
---

# Bordeaux

Bordeaux is unhurried. A deep wine accent sits on warm cream, the type is quiet and well-set, and nothing shouts. For luxury, hospitality, and considered brands that earn attention rather than demand it.

## Accessibility

Every text pair meets WCAG AA, enforced at synthesis time:

- Ink on canvas: 14.74:1
- Body on canvas: 6.43:1
- Muted on canvas: 4.58:1
- Text on primary: 10.58:1

## How to use

Drop this folder into your project and point your coding agent (Claude Code, Cursor, Codex) at `DESIGN.md`. Load `css/tokens.css` for the variables, open `preview.html` to see the system applied. Generated by ux-skill: deterministic, offline, never calls an LLM.