JACQUEMUS Design System

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

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.