--- version: alpha name: "JACQUEMUS" website: "https://www.jacquemus.com" description: >- A French independent fashion brand founded by Simon Porte Jacquemus whose marketing site runs a stark two-tone system — ink black on pure white — set entirely in Futura PTT, a geometric sans at weight 400 with 0.56px letter-spacing, deployed at 18px across the full site including the bold all-caps wordmark that dominates the top-left of every page. The system is captured during a site-maintenance window, revealing the brand's raw typographic skeleton: no images, no color, no decorative chrome — just the wordmark and three lines of Futura PTT at regular spacing on an empty canvas. seo: title: "JACQUEMUS Design System for React — ink on white, Futura PTT, 12 components" metaDescription: "JACQUEMUS's design system as a DESIGN.md file: binary black-on-white palette, Futura PTT geometric sans at 18px with wide letter-spacing, zero decoration. Tokens for React, Next.js, and AI tools." highlights: - "Binary palette — pure ink black on white, no accent, no grey tier, no color of any kind in the chrome" - "Futura PTT at a single size — 18px / 400 with 0.56px tracking carries the wordmark, body, and navigation; the typeface is the entire system" - "Wordmark as primary UI element — JACQUEMUS in all-caps Futura PTT renders larger and bolder than any other screen element, acting as both logo and page anchor" - "Hairline rule as sole spatial device — a full-width 1px black line is the only structural divider in the system" - "Typography-first identity — Jacquemus relies on Futura PTT's geometric authority to hold the page when photography is absent" tags: - "E-commerce & Retail" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | JACQUEMUS's marketing site, captured during a brief maintenance window, reveals the typographic skeleton that holds the brand together when photography is stripped away. The page is two colors — black and white — and one typeface: Futura PTT, a geometric sans at weight 400 with 0.56px letter-spacing rendered at 18px. The all-caps wordmark "JACQUEMUS" at the top-left is the single most dominant element on the screen; beneath it, a full-width 1px hairline rule, then centered body text announcing the maintenance. Where other fashion brands deploy photography-first or gradient-rich pages, JACQUEMUS's skeleton reads as the brand's own kind of confidence — the typeface alone is expected to carry the weight. The DESIGN.md file packages what can be machine-read from the captured surface into a spec for React and AI tools. Inside: 4 color tokens across a pure black-and-white binary palette; 8 typography tokens all running Futura PTT at a single weight and size with variations mapped to semantic roles; a flat 0px radius on every element; 7 spacing tokens on a standard scale; and 12 component definitions covering the wordmark, hairline rule, body paragraph, and maintenance-state layout. The extraction ran against a maintenance page — a condition that exposes the design's bones with unusual clarity. Feed this file to Claude or Cursor and it will reproduce JACQUEMUS's typographic register: Futura PTT in all-caps at the wordmark tier, tracking-widened at 0.56px for body text, black on white without exception. The system's value as a reference is the clarity of its restraint — one typeface, one weight, two colors, one structural rule. For a development team building a fashion-adjacent landing page that needs typographic authority without photography, this skeleton is the starting point. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.jacquemus.com" title: "JACQUEMUS — official site" description: "JACQUEMUS's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is JACQUEMUS's primary brand color?" answer: "JACQUEMUS has no brand accent color in its marketing chrome. The system captured on the site runs purely on ink black and white. The only chromatic associations the brand deploys — the warm provençal pastels, the dusty pinks and lavenders visible in campaign photography — live entirely in the photography layer, never in the interface chrome. The maintenance-page capture makes this unusually transparent: stripped of all imagery, the brand presents as black ink on white paper and nothing else. CSS variable declarations include Bootstrap-style utility values (amber, green, pink, purple, teal) that are structural scaffolding tokens, not brand colors." - id: "typography" title: "What typeface does JACQUEMUS use, and what should I use as a substitute?" answer: "JACQUEMUS runs Futura PTT, a digitization of Paul Renner's Futura with expanded language support. It appears at weight 400, 18px, 0.56px letter-spacing across body text, the wordmark, and navigation. The wordmark renders in bold all-caps (likely weight 700 or 800 at a larger display size not captured in the sparse maintenance extraction). For open-source substitution, Futura PT (Adobe Fonts) is the closest licensed match. For free options, Nunito Sans or Josefin Sans approximate the geometric construction; Jost is the closest Google Fonts match to the counter shapes. None fully replicate Futura PTT's specific tightness at display sizes." - id: "wordmark-treatment" title: "How does JACQUEMUS render its wordmark and what role does it play in the layout?" answer: "The JACQUEMUS wordmark is set in all-caps Futura PTT at the top-left of every page. In the maintenance-page capture it renders as the single most visually dominant element — larger than any body text, heavier by virtue of its all-caps setting rather than any weight change. Below the wordmark a full-width 1px black hairline rule separates the masthead from the page content. The wordmark functions as both brand identification and primary visual anchor; when photography is absent, the layout is organized entirely around it. This masthead-first layout is consistent with print-magazine conventions — the cover flag as the primary design element." - id: "layout-spacing" title: "What spacing system does JACQUEMUS use?" answer: "The captured page shows sparse spacing values across very few elements: a 50px vertical padding on the page sections, 20px horizontal margin on container text, and 32px paragraph spacing. The system appears to use generous vertical breathing room as a spaciousness signal — 50px top/bottom padding on a page section is twice the typical 24px convention. This aligns with the brand's editorial sensibility: whitespace is itself a design element, not wasted space. The horizontal margins (15–20px at desktop) are narrower than expected, suggesting the text column is wide and the whitespace is predominantly vertical rather than lateral." - id: "maintenance-note" title: "Why is the extraction so sparse? Is this a valid DESIGN.md?" answer: "The extraction ran against a site-maintenance page rather than JACQUEMUS's full marketing site. This produced only 38 scanned elements and very limited typography and color data — essentially the typographic skeleton of the brand's holding page. The tokens in this file are ground-truthed against that capture and represent what the maintenance page actually rendered, not an inferred full system. The file includes a Known Gaps section listing what is absent from the spec. For production use, re-run the extractor against the live marketing site once it emerges from maintenance — the full site carries a substantially richer component set including product grids, campaign photography panels, bag detail components, and the checkout flow." mockups: - "marketing-hero" - "editorial-article" colors: ink: "#000000" canvas: "#ffffff" hairline: "#000000" typography: display-xl: fontFamily: "\"Futura PTT\", \"Helvetica Neue\", Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 28px letterSpacing: "1px" body-md: fontFamily: "\"Futura PTT\", \"Helvetica Neue\", Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 20px letterSpacing: "0.56px" body-sm: fontFamily: "\"Futura PTT\", \"Helvetica Neue\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px letterSpacing: "0.56px" label-md: fontFamily: "\"Futura PTT\", \"Helvetica Neue\", Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 20px letterSpacing: "0.56px" button-md: fontFamily: "\"Futura PTT\", \"Helvetica Neue\", Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 20px letterSpacing: "0.56px" nav-link: fontFamily: "\"Futura PTT\", \"Helvetica Neue\", Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 20px letterSpacing: "0.56px" caption: fontFamily: "\"Futura PTT\", \"Helvetica Neue\", Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px letterSpacing: "0.4px" wordmark: fontFamily: "\"Futura PTT\", \"Helvetica Neue\", Arial, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 20px letterSpacing: "1px" rounded: none: "0px" spacing: xs: "8px" sm: "15px" md: "20px" base: "32px" lg: "50px" xl: "115px" 2xl: "200px" components: wordmark: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.wordmark}" padding: "20px 15px" button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "12px 24px" height: "44px" border: "0" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "12px 24px" height: "44px" borderColor: "{colors.hairline}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "20px 15px" height: "60px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "0px" hairline-rule: backgroundColor: "{colors.ink}" height: "1px" padding: "0px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "50px 0px" section: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "50px 0px" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "20px 15px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "12px 0px" height: "44px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" padding: "50px 15px" --- ## Overview JACQUEMUS's site presents its barest skeleton during the maintenance capture — and the skeleton is the argument. **Typeface as brand.** The single observable design decision is the choice of Futura PTT: a geometric sans at weight 400, 18px, 0.56px tracking, set in the all-caps wordmark at the page's top-left and again in centered maintenance copy below. Where LOEWE withholds color but speaks through photography, and where most fashion brands layer editorial images over their typographic chassis, JACQUEMUS's maintenance page makes the chassis visible. It reads as a page that would be completely at home printed on a gallery broadsheet. The system is binary. Ink black on white, one typeface, no radius, one spatial device — the full-width hairline rule that separates wordmark from body. Unlike the dev-infra brands that use hairlines to carry elevation hierarchy, JACQUEMUS's hairline is the only structural element in the system — a single horizontal line doing the work that a gutter, padding, and background-color shift would normally divide between three properties. **Key Characteristics:** - Binary palette: ink black (`{colors.ink}`) on white canvas (`{colors.canvas}`), zero chromatic moves in the chrome. - Futura PTT at weight 400, 18px, 0.56px letter-spacing as the sole typographic voice. - The JACQUEMUS wordmark in all-caps bold Futura PTT is the primary UI element on every page. - A single full-width 1px `{colors.hairline}` rule as the only structural separator. - 0px border-radius on every element: buttons, inputs, cards, navigation. - Generous vertical spacing — 50px section padding — as a spaciousness signal borrowed from editorial print layout. - CSS variable declarations include Bootstrap utility colors (indigo, amber, teal, pink) as structural scaffolding — these never appear in the rendered brand chrome. ## Colors ### System - **Ink** (`{colors.ink}` — #000000): frequency 34. Used as text (17) and border (17). The sole color in the system. Every typographic element, every structural border, every hairline rule renders in pure black. There is no secondary text tone, no muted ink. - **Canvas** (`{colors.canvas}` — #ffffff): frequency 2, background only. The page floor. Pure white — not the warm off-white that Cloudflare or Airbnb reach for; pure white is the fashion-brand convention for presenting photography against a neutral ground. ### Structural Scaffolding (not brand colors) The site's CSS variable declarations include Bootstrap-style utility tokens — amber, green, pink, teal, and indigo — wired as Bootstrap's default variable names (`--yellow`, `--green`, `--pink`, `--teal`, `--indigo`). None of these appear on the rendered page. They are Bootstrap scaffolding, not brand colors; treat them as the utility layer they are. ## Typography ### Font Family The system runs a single voice: **Futura PTT** (Paul Renner's geometric sans as digitized by ParaType), falling back to `"Helvetica Neue"`, `Arial`, and `sans-serif`. The wordmark renders in all-caps bold; all other text renders at weight 400. There is no second family, no mono tier, no italic treatment. Futura PTT's wide letter-spacing (0.56px at 18px body) is the defining typographic move — it stretches the geometric forms horizontally, giving the typeface more air than standard Futura releases. The spacing is declared in the CSS at 0.56px and applies to every instance of Futura PTT on the page. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.wordmark}` | 18px | 700 | 20px | 1px | JACQUEMUS all-caps masthead wordmark | | `{typography.display-xl}` | 24px | 700 | 28px | 1px | Campaign-era section display headings | | `{typography.body-md}` | 18px | 400 | 20px | 0.56px | Primary body text, maintenance copy | | `{typography.body-sm}` | 16px | 400 | 20px | 0.56px | Secondary body / sub-paragraph text | | `{typography.label-md}` | 18px | 400 | 20px | 0.56px | Category and navigation labels | | `{typography.button-md}` | 18px | 400 | 20px | 0.56px | CTA button labels | | `{typography.nav-link}` | 18px | 400 | 20px | 0.56px | Navigation link labels | | `{typography.caption}` | 14px | 400 | 18px | 0.4px | Footer text, product metadata | ### Principles The system deploys one weight-size pair for essentially everything: Futura PTT 400 at 18px. The wordmark breaks the pattern only at weight — it goes bold, not larger, to assert hierarchy while maintaining the same cap height. The 0.56px tracking is the voice; without it, Futura PTT reads as tighter than intended. For the display tier, wider tracking (1px) opens the caps further into a high-fashion register. ### Note on Font Substitutes Futura PTT is a licensed family via ParaType. **Futura PT** (Adobe Fonts) is the nearest equivalent. For open-source alternatives, **Jost** (Google Fonts) is the closest in geometric construction; **Nunito Sans** approximates the counter shapes at body size but reads slightly rounder. When substituting, preserve the 0.56px letter-spacing — it is the system's typographic signature, not a generic spacing value. ## Layout ### Spacing System - **Base unit:** no strict module is evident from the sparse data, but values cluster around 15–20px for horizontal margins and 50px for vertical section padding. - **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 15px · `{spacing.md}` 20px · `{spacing.base}` 32px · `{spacing.lg}` 50px · `{spacing.xl}` 115px (top padding on content below header) · `{spacing.2xl}` 200px. - **Dominant values:** 50px (section top/bottom padding), 20px (container horizontal margin), 115px (large above-fold top margin). ### Grid & Container - **Page layout:** single-column centered layout on the maintenance page. A full-width header strip at the top, then a centered text column below. - **Content column:** approximately 411px wide based on the body paragraph render — a narrow column that forces the body text to wrap at a measured line length. - **Header:** full-width, with the wordmark flush left within the container and the navigation flush right. ### Rhythm The page uses a **magazine broadsheet** rhythm — generous top margins, sparse text, and the hairline rule as the only spatial divider. The 115px top padding on the main content area creates a visual silence between the masthead and the first word of copy. This is consistent with high-fashion print conventions where breathing room signals status. ## Elevation No shadows and no elevation. Not a single shadow declaration in the captured CSS (the Bootstrap utility reset does not add shadows). All surface depth comes from the hairline rule — a 1px black line that separates the wordmark zone from the body zone. The system treats depth simulation as unnecessary: on pure white, layering would require a surface color shift that would break the binary palette. ## Shapes Pure 0px radius throughout. Every element — buttons, inputs, navigation items — presents as a square-cornered rectangle. This is the default state for the system rather than an intentional departure; the maintenance page does not expose enough component surface to confirm the policy across all UI states, but the absence of any border-radius declaration in the captured CSS is conclusive for the rendered elements. ## Components **`wordmark`** — The JACQUEMUS all-caps masthead. Bold Futura PTT with wide tracking (1px), ink black, transparent background, left-aligned within the header. The primary brand element and the typographic anchor of the system. **`hairline-rule`** — A full-width 1px ink-black rule (`{colors.hairline}`) that separates the masthead zone from the page body. The only structural spatial device in the system. **`button-primary`** — Ink-black fill with white text, Futura PTT at `{typography.button-md}`, 0px radius, 12×24px padding, 44px height. No border; the fill is the affordance. **`button-secondary`** — Transparent fill with ink text and a 1px black border, same Futura PTT size and spacing, 0px radius. Used for secondary navigation actions. **`top-nav`** — White canvas, 60px height, 20×15px padding. Wordmark flush left, navigation links flush right. A 1px hairline rule marks the nav bottom. **`nav-link`** — Transparent background, ink text at `{typography.nav-link}` (18px / 400 / 0.56px tracking). No hover state on the captured surface. **`hero-heading`** — Ink text, `{typography.display-xl}` (24px / 700). Campaign panel display headings — short, declarative, never descriptive. **`body-paragraph`** — Ink text at `{typography.body-md}` (18px / 400 / 0.56px tracking), 50px vertical padding. The measured line of body copy reads like editorial prose even when it's maintenance-page copy. **`section`** — White canvas, 50px top/bottom padding. The basic page section container — no fill, no border, no radius. **`card`** — White canvas, 20×15px padding, 0px radius, ink border. The basic content card for the full site — product, editorial, editorial-grid. **`text-input`** — White fill, ink text at `{typography.body-md}`, 12px vertical padding, 44px height, 1px bottom-only ink border. Underline-style form field consistent with the no-enclosed-box policy. **`footer`** — White canvas, ink text at `{typography.caption}` (14px / 400 / 0.4px tracking), 50×15px padding. Footer links mirror the navigation structure. ## Do's and Don'ts **Do** treat the wordmark as the first visual element — left-aligned, bold Futura PTT, separated from body content by the hairline rule. Every page in this system is anchored by the masthead-first layout, and the wordmark carries more visual weight than any headline below it. **Do** preserve the 0.56px letter-spacing on all Futura PTT body text. The tracking is the voice — at 18px without it, the typeface reads significantly tighter and loses the airy fashion-editorial register. **Do** use the full-width hairline rule as the primary spatial separator. The system has one structural device; use it to divide zones rather than reaching for background color shifts or shadow layers. **Do** keep the palette binary. Adding a warm grey as a secondary text tone would introduce three ink values where the system has one. All secondary hierarchy is a size reduction, not a color shift. **Don't** use the Bootstrap utility colors declared in the CSS — amber (`--yellow`), pink (`--pink`), indigo (`--indigo`) — as brand accents. They are Bootstrap scaffolding tokens that serve the framework's reset, not JACQUEMUS's design language. None appear on the rendered marketing surface. **Don't** round corners. Not to 2px for softness, not to 4px for cards — the system is a square-corner policy and any radius introduces a design language borrowed from a different brand category. **Don't** introduce a muted grey text tone. The system has one text color — ink black — and uses spacing rather than tone to create secondary hierarchy. A second text color would break the binary. **Don't** shrink body text below 18px for primary content. The system's body type at 18px reads as unusually large for an e-commerce environment — this is a deliberate editorial choice, not an accessibility floor. Reducing to the 14–15px convention would shift the register from fashion editorial to retail utility. ## Known Gaps - **Full marketing site:** this DESIGN.md was extracted from a maintenance page, not the live marketing site. The full component set — product grids, campaign photography panels, bag-detail component, size-selector, color-swatch, checkout flow — is not captured here. Re-run extraction against the live site once maintenance concludes. - **Campaign photography layer:** JACQUEMUS is known for distinctive editorial photography (provençal pastels, overexposed sunlight, playful editorial compositions). The color palette this photography introduces — the warm pinks, lavenders, and creams of the brand's campaigns — does not appear in the chrome and is not represented in this spec. - **Mobile layout:** the extraction ran against a desktop maintenance page. The mobile layout (likely stacked, hamburger-nav, card-based product grid) is not represented. - **Interactive and hover states:** no hover, focus, or active states are captured. The live site's navigation dropdowns and product-hover overlays are not visible in the maintenance surface. - **Dark mode:** the brand does not appear to run a dark-canvas variant, but this cannot be confirmed from the maintenance extraction alone. - **Animation:** JACQUEMUS is known for distinctive product-photography animation (slow zooms, parallax product reveals) on the live site. The spec captures no easing curves or timing values. - **Provençal palette:** the brand's sub-seasonal color palettes — dusty rose, Mediterranean blue, soft lavender — appear in campaign photography and likely in limited-edition surface color treatments not visible on the maintenance page.