---
version: alpha
name: "Jacquemus"
description: "Extreme French fashion minimalism where a black-on-white system is distilled to a single typeface, near-zero radius, and bold uppercase spacing — the custom JACQUEMUS logotype and Futura PTT carry the entire identity."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f9f9f9"           # faint section tint

  # Ink / text
  ink: "#2e2e2e"               # primary text and logo fill — a warmer near-black, not pure
  ink-muted: "#a4a4a4"         # secondary text, nav sub-items, captions
  ink-ghost: "#d9d9d9"         # disabled state, placeholder, legal fine print

  # Accent — Jacquemus has no chromatic accent; near-black IS the brand
  primary: "#000000"           # CTA fill, maximum-contrast button
  on-primary: "#ffffff"        # text on black CTA

  # Interactive states
  primary-hover: "#2e2e2e"     # button hover softens from pure black to ink
  text-hover: "#2e2e2e"        # hover on muted links lifts to ink

  # Semantic
  error: "#f66666"             # form validation error (--skin-danger variant)

  # Borders
  border: "#2e2e2e"            # 1px hairline on button, footer nav dividers
  border-input: "#000000"      # email input underline rule

  # Shadow tints
  shadow-soft: "#000000"       # was rgba(0,0,0,0.1) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Futura PTT, Helvetica Neue, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.2em
  display:
    fontFamily: "Futura PTT, Helvetica Neue, Arial, sans-serif"
    fontSize: 45px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0.15em
  heading-section:
    fontFamily: "Futura PTT, Helvetica Neue, Arial, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.08em
  heading-sub:
    fontFamily: "Futura PTT, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.06em
  body-large:
    fontFamily: "Futura PTT, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.06em
  body:
    fontFamily: "Futura PTT, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.04em
  nav-link:
    fontFamily: "Futura PTT, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.04em
  button-ui:
    fontFamily: "Futura PTT, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.2em
  product-title:
    fontFamily: "Futura PTT, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.04em
  caption:
    fontFamily: "Futura PTT, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.1em

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  none: 0px
  sm: 3px           # 0.1875rem — form elements only
  pill: 9999px      # circular icon buttons only

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 24px
    height: 60px
    border: "1px solid {colors.border}"
    textTransform: uppercase
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.primary-hover}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 24px
    height: 60px
    border: "1px solid {colors.border}"
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

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

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-large}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderBottom: "1px solid {colors.border-input}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderBottom: "1px solid {colors.border-input}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 0px

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
    textTransform: uppercase
---

# Jacquemus Design System

## Overview

Jacquemus operates by subtraction. Where most luxury fashion sites layer texture, animation, and seasonal palette, Jacquemus strips the digital canvas back to a pure white field (`{colors.background}`), a single typeface, and a near-black ink (`{colors.ink}`) that is ever so slightly warmer than pure black — a choice that keeps the site feeling handmade and Provençal rather than corporate. The effect is fashion minimalism executed with the confidence of a brand that knows its imagery, not its chrome, is the product.

The typographic foundation is **Futura PTT** — a rationalist geometric sans that Jacquemus pair with a custom logotype font (the bespoke `JACQUEMUS` wordmark). Futura PTT runs at a base of 10px (set via the old 62.5% html trick) with a body `letter-spacing: 0.04em` that gives every word a slight open-air quality. At display scale — 45px to 60px — the tracking is pushed to `0.2em`, turning a campaign headline into a near-wordspacing composition where individual characters breathe like panels in a lookbook grid. No second typeface appears anywhere. Futura PTT carries navigation links, product names, buttons, legal copy, and hero titles with one smooth, consistent voice.

The signature interaction move is a horizontal underline reveal: when hovering any nav link or text anchor, a `1px solid {colors.ink}` line grows from `width: 0` to full width via a `0.3s cubic-bezier(0.25, 0.1, 0.25, 1)` transition. This is the only animation in the system — no fade-ins, no parallax, no hover-lift shadows. It is delicate, precise, and absolutely un-borrowable from any other brand. The CTA button is pure black fill (`{colors.primary}`) with all-caps Futura PTT at aggressive positive tracking and a fixed 60px height — a solid, stable rectangle that communicates authority without flourish.

**Key Characteristics:**
- White canvas (`{colors.background}`) as the absolute default — no tinted hero sections, no dark commerce theme
- Near-black `{colors.ink}` (`#2e2e2e`) for all primary text, links, and logo — slightly warmer than pure black
- Single typeface, **Futura PTT**, across every typographic role — display, body, button, nav, caption alike
- Bespoke custom logotype font (`JACQUEMUS.woff2`) for the wordmark only — never used as a display typeface
- Aggressive positive letter-spacing (`{typography.button-ui}` at `0.2em`, display hero at `0.2em`) as the primary personality mechanism
- All-caps `text-transform: uppercase` on CTAs, product flags, and badge labels
- **Zero border-radius on all UI elements** (`{rounded.none}`) — buttons, cards, inputs all sharp-cornered; `0.1875rem` only on inherited form elements
- Signature hover: `1px` underline grows from `width: 0` to full via `cubic-bezier(0.25, 0.1, 0.25, 1)` — the only animation in the system
- No chromatic brand accent — black and near-black are the only CTA colors
- Muted secondary ink (`{colors.ink-muted}` `#a4a4a4`) for sub-nav, captions, and inactive states
- Full-height 60px CTA buttons — fixed-height rectangles, not padded text

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The only page background. Jacquemus never varies the canvas with tints or dark sections — white is absolute.
- **Whisper Surface** (`{colors.surface}`): A faint step off white, used for hover fills on outline buttons and subtle section differentiation.

### Ink / Text
- **Jacquemus Ink** (`{colors.ink}`): The system's primary near-black. Applied to the logo wordmark, all navigation links, product names, prices, and running body text. Slightly warmer than `#000` — prevents the site from reading as pure graphic design.
- **Muted Ink** (`{colors.ink-muted}`): Subdued secondary text — captions, sub-nav items, placeholder-adjacent labels, the footer newsletter hint line.
- **Ghost Ink** (`{colors.ink-ghost}`): The lowest tier — disabled text, fine-print legal copy in the newsletter form, inactive swatch labels.

### Accent — Black as Brand
- **Pure Black CTA** (`{colors.primary}`): The button fill. Jacquemus has no chromatic brand color; black closes the sale. The hover state softens from pure black to the warmer `{colors.primary-hover}` ink.
- **White on Black** (`{colors.on-primary}`): Button label on the black CTA.

### Semantic
- **Error** (`{colors.error}`): Form validation error text — the one moment a warm red enters the system.

### Borders & Structural Lines
- **Hairline Border** (`{colors.border}`): 1px rule on buttons and footer navigation dividers.
- **Input Rule** (`{colors.border-input}`): The bottom-border underline on email and text inputs — pure black, no fill or outline on the other three sides.

## Typography

### Font Family
- **Primary**: `Futura PTT`, with fallbacks: `Helvetica Neue, Arial, sans-serif`. Self-hosted in two weights: Book (400, `FuturaPTBook.woff2`) and Medium (500, `FuturaPTMedium.woff2`). Used for every role in the system.
- **Logotype**: `JACQUEMUS` — a custom drawn wordmark font, self-hosted (`JACQUEMUS.woff2`). Not a display typeface; reserved entirely for the SVG-embedded logo mark.
- **OpenType Features**: Default ligatures only. No stylistic alternates, no tracked small-caps; the tracking is handled via `letter-spacing` declarations.
- **Base size convention**: `html { font-size: 62.5% }` so `1rem = 10px` throughout the codebase.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 60px — campaign hero titles, seasonal lookbook openers |
| `display` | 45px — secondary editorial moments, feature section headers |
| `heading-section` | 21px — main nav items on mobile, primary section headings |
| `heading-sub` | 18px — sub-navigation titles, panel headings |
| `body-large` | 14px — product descriptions, editorial paragraphs, footer section titles |
| `body` | 11px — product name on tile, fine print, caption text |
| `nav-link` | 14px — desktop top-level navigation links |
| `button-ui` | 12px / weight 500 / uppercase / 0.2em tracking — CTA labels |
| `product-title` | 12px — product card name, price label |
| `caption` | 11px / 0.1em tracking — color swatch labels, size indicators |

### Principles
- **Single-typeface austerity**: Futura PTT alone, across all nine type roles. No serif counterpart, no mono code blocks, no secondary grotesque.
- **Tracking as personality**: the letter-spacing escalation from `0.04em` (body) to `0.2em` (buttons, display hero) is the entire visual voice. Strip the tracking and the identity collapses.
- **Uppercase reserved for action**: `text-transform: uppercase` appears only on CTAs, product flags, and badge labels — never on editorial body or navigation links.
- **Weight restraint**: only two weights in use — Book (400) for all reading, Medium (500) for button labels. No bold weights anywhere in the system.
- **Tiny base type**: 11px body copy and 12px product names — Jacquemus trusts white space and imagery over large-text readability scaffolding.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block. Base unit: 8px.

Jacquemus pages are built on extreme negative space. Between campaign sections, vertical gaps run to 96px or more. Product grids maintain consistent gutters with generous surrounding whitespace. The page breathes at an editorial pace — more editorial shoot than product catalog.

### Grid & Container
- Max content width: approximately 1440px, with a standard container around 1200–1280px
- Desktop product grid: typically 3–4 columns with clean equal gutters
- Hero sections: full-bleed photography with overlaid typography — white type on image, near-black type on white
- Navigation: horizontal bar at the top with the custom logotype centered; left utility nav (Store, Wishlist) and right utility nav (Account, Bag) flanking the mark

### Whitespace Philosophy
- **White is not absence — it is the statement**: sections separated by large air rather than visible rules or fill-bands
- **Photography-first rhythm**: the product or campaign image occupies the frame; typography orbits around it without competing
- **No decorative chrome**: no background color alternation between sections, no card borders, no hover-lift

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Virtually every surface — the entire site rests flat |
| Hairline (Level 1) | `1px solid {colors.border}` | Button outlines, footer nav row dividers |
| Input Rule (Level 1) | `border-bottom: 1px solid {colors.border-input}` | Email and text inputs — bottom border only |
| Overlay (Level 3) | Soft black shadow (opaque approximation: `{colors.shadow-soft}`) | Panels and slide-in drawers only |

**Shadow Philosophy**: Jacquemus is architecturally flat. No card receives a drop shadow. No button lifts on hover. The underline-grow animation is the only depth metaphor in the system, and it is two-dimensional — a mark on a surface, not a layer above it. This flatness is deliberate: the brand sells garments with strong sculptural form, and the digital stage must recede completely.

## Shapes

The complete radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, product tiles, panels, modals, image frames — everything |
| `sm` | 3px | Inherited Bootstrap form controls only — a framework seam, not a brand choice |
| `pill` | 9999px | Circular close-buttons and avatar thumbnails only |

The system is radically square. The `0.1875rem` radius on form elements is an artefact of the SFCC/Bootstrap scaffold, not an intentional brand radius. In native Jacquemus UI components — buttons, product cards, panels — the answer is always `0`.

## Components

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

### Buttons
- **`button-primary`** — Pure black (`{colors.primary}`) fill, white text, `{rounded.none}`, fixed 60px height, `1px solid {colors.border}`, 12px Futura PTT Medium uppercase at `0.2em` tracking. Hover transitions to `{colors.primary-hover}`. The system's primary CTA — "Add to cart", "Shop the collection".
- **`button-secondary`** — White fill, `{colors.ink}` text, same `1px solid {colors.border}` outline and identical geometry. Hover fills `{colors.surface}`. Used for secondary actions — "Wishlist", "Notify me".

### Cards
- **`card`** — Flat white surface, no border, no shadow, `{rounded.none}`. Product photography sits edge-to-edge; caption type (`{typography.product-title}`) appears below with minimal padding. Cards are display frames, not chrome containers.

### Inputs
- **`input`** — White fill, no border on three sides, a `1px solid {colors.border-input}` bottom-rule only. 0px radius. 14px Futura PTT, `letter-spacing: 0.049rem`. Focus keeps the rule, no glow, no outline box.

### Navigation
- **`nav-bar`** — White background, `{colors.ink}` text, `{typography.nav-link}` (14px Futura PTT, `0.04em`). Custom logotype centered. Hover reveals the signature underline-grow animation (`width: 0 → 100%`, `0.3s cubic-bezier(0.25, 0.1, 0.25, 1)`). Sub-navigation items render in `{colors.ink-muted}` and lift to `{colors.ink}` on hover.

### Badges / Flags
- **`badge`** — No fill, uppercase `{typography.caption}` in `{colors.ink-muted}`. Used for "NEW", "LAST PIECES" product tile flags — absolute-positioned, typographic-only, no chip background.

## Do's and Don'ts

### Do
- Use `{colors.background}` pure white as the only canvas — no tinted section bands, no dark theme
- Set all CTAs in uppercase Futura PTT Medium at `letter-spacing: 0.2em` — the tracking is non-negotiable
- Keep every UI element at `{rounded.none}` (0px) — buttons, cards, inputs, panels, image frames
- Animate only via the underline-grow: `height: 1px`, `width: 0 → 100%`, `{colors.ink}`, `0.3s cubic-bezier(0.25, 0.1, 0.25, 1)` — no other motion in the system
- Use `{colors.ink}` (`#2e2e2e`) for all primary text and links — never pure `#000` for body copy (only the CTA fill uses pure black)
- Let full-bleed photography carry the visual weight — chrome must recede completely
- Fixed-height 60px buttons — do not shrink-wrap to text with padding; the rectangle is part of the authority
- Reserve uppercase for CTAs and product flags only — navigation and editorial body stay sentence case

### Don't
- Don't introduce a chromatic brand accent — there is none; `{colors.primary}` (black) does every accent job
- Don't add box shadows, hover lifts, or card borders — the system is categorically flat
- Don't round any UI corner — the `0.1875rem` on inherited form controls is a framework seam, not permission
- Don't use a second typeface — Futura PTT alone, no contrasting serif, no monospace
- Don't reduce letter-spacing below `0.04em` on body or below `0.2em` on CTAs — the tracking is the voice
- Don't animate anything other than the underline-grow — no fade-ins, no scale transitions, no parallax
- Don't use `{colors.ink-ghost}` for interactive text — it is reserved for disabled states and fine print
- Don't vary the canvas with tinted backgrounds or dark sections — white is absolute

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 480px (< 48em) | Single-column grid; hamburger nav; hero type scales to ~35px; body 14px |
| Tablet | 480–768px | Two-column product grid; nav still collapsed |
| Desktop | 769–1023px (≥ 48em) | Full horizontal nav appears; product grid 3-up |
| Large | ≥ 1024px (≥ 64em) | Full 4-column grid; max container; body `letter-spacing: 0.056rem` |

### Touch Targets
- CTA buttons are fixed at 60px height — comfortable tap targets on mobile
- Nav items on mobile render at 21px (2.1rem) with 20px vertical padding — thumb-safe
- Product tiles are fully tappable card regions, not just the title link
- Inputs run at minimum 44px effective height from the `1.2rem` padding + line-height

### Collapsing Strategy
- **Navigation**: full horizontal menu → hamburger drawer on mobile; slide-in panel at full screen height with 21px Futura PTT links and category sublist grids
- **Type scale**: display hero scales from 60px to approximately 35px on mobile; body bumps from 11px to 14px (mobile `font-size: 1.4rem`) with slightly reduced letter-spacing (`0.035em`)
- **Product grids**: 4-column desktop → 2-column tablet → 1 or 2-column mobile depending on category page density
- **Spacing**: generous desktop section gaps compress proportionally on mobile while preserving the breathing-room character

### Image Behavior
- Campaign photography is always full-bleed or full-width — no max-width caps on hero images
- Product tile images maintain consistent aspect ratio (square or portrait) across breakpoints
- Image frames are always `{rounded.none}` — photography never clips to a rounded container

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Primary text: Jacquemus Ink (`{colors.ink}`)
- CTA fill: Pure Black (`{colors.primary}`)
- CTA text: White (`{colors.on-primary}`)
- Secondary text: Muted (`{colors.ink-muted}`)
- Border / underline: `{colors.border}`
- Input underline: `{colors.border-input}`

### Example Component Prompts

- "Create a full-bleed campaign hero on `{colors.background}` white. Center a 60px Futura PTT Book headline at `letter-spacing: 0.2em`, sentence case, in `{colors.ink}`. Below it, a 14px subheading at `letter-spacing: 0.06em`. No shadow, no tint, no decorative element — photography fills the frame, type sits over white space."

- "Build a primary CTA button: `{colors.primary}` (pure black) fill, `{colors.on-primary}` white text, 12px Futura PTT Medium, `text-transform: uppercase`, `letter-spacing: 0.2em`, `border-radius: 0`, `height: 60px`, `padding: 0 24px`, `border: 1px solid {colors.border}`. Hover softens fill to `{colors.primary-hover}` — no lift, no shadow, no scale."

- "Design a product card: white (`{colors.background}`) surface, `border-radius: 0`, no shadow, no border. Square product image edge-to-edge at top. Below: 12px Futura PTT product name in `{colors.ink}` at `letter-spacing: 0.04em`, then 12px price in `{colors.ink-muted}` at `letter-spacing: 0.2em`. No card chrome — it is a frame, not a container."

- "Build a desktop nav bar: white background, custom JACQUEMUS SVG logotype centered (fill `{colors.ink}`). Nav links at 14px Futura PTT, `{colors.ink}`, `letter-spacing: 0.04em`, sentence case. Hover: a `1px solid {colors.ink}` underline grows from `width: 0` to `100%` via `transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)`. No other hover effect."

- "Create a newsletter email input: white fill, no border on left/right/top, `border-bottom: 1px solid {colors.border-input}`, `border-radius: 0`, 14px Futura PTT at `letter-spacing: 0.049rem`, `{colors.ink}` text. Placeholder in `{colors.ink-muted}`. Focus keeps the bottom rule — no glow, no box outline, no background change."

### Iteration Guide

1. Start on pure white (`{colors.background}`) — no surface tints, no dark sections. If any element has a non-white background that isn't an image or a black CTA, remove it.
2. Set every type element in Futura PTT. If there is a second typeface, replace it. One face, always.
3. Apply `letter-spacing: 0.2em` to every CTA and uppercase badge. Apply `0.04em` to body and nav. The tracking is non-negotiable.
4. Set all interactive elements to `border-radius: 0`. If any corner is rounded (except circular icon buttons), flatten it.
5. Replace every hover effect with the underline-grow: `1px {colors.ink}` line, `width: 0 → 100%`, `0.3s cubic-bezier(0.25, 0.1, 0.25, 1)`.
6. Remove all card shadows, hover lifts, and drop shadows. The page is flat.
7. CTAs are fixed 60px height rectangles — not padded-to-content. Enforce `height: 60px`.
8. There is no brand color. If you introduced a hue, replace it with `{colors.ink}` or `{colors.primary}` (black).

---

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