--- version: alpha name: "Jacques Marie Mage" description: "Ultra-limited luxury eyewear system built on a near-white photographic canvas, proprietary serif and geometric sans pairing, and an achromatic restraint that lets tortoiseshell acetate and gold metalwork carry all the warmth" colors: # Surface / canvas background: "#f5f4f2" # warm off-white — the photographic studio canvas across the site surface: "#ffffff" # pure white — product cards, modal panels, form fields surface-dark: "#121212" # near-black — footer, dark overlapping panels # Ink / text ink: "#000000" # pure black — all primary text, headings, UI chrome ink-secondary: "#5a5a5a" # mid-grey — secondary labels, metadata, muted navigation ink-ghost: "#aaaaaa" # light grey — placeholders, disabled states, fine print on-dark: "#ffffff" # white text on dark surfaces and image overlays # Brand accent — JMM uses no chromatic color; gold metalwork lives in photography only primary: "#000000" # CTA fill — absolute black; mirrors brand's editorial severity on-primary: "#ffffff" # text on black CTA primary-hover: "#1a1a1a" # was rgba(0,0,0,0.9) — hover state; Google format requires hex # Interactive states (rgba flattened to opaque hex) focus-ring: "#000000" # 2px solid black focus ring — accessible against light canvas text-hover: "#333333" # was rgba(0,0,0,0.6) — link hover on light canvas; Google format requires hex # Borders border: "#000000" # hairline border — form inputs, bottom rules on list items border-subtle: "#e0e0e0" # faint dividers on light surface border-ghost: "#cccccc" # was rgba(0,0,0,0.2) — combobox / select borders; Google format requires hex # Shadow tints shadow-soft: "#1a1a1a" # was rgba(0,0,0,0.1) 0 0 44px — diffuse ambient shadow; Google format requires hex typography: display-hero: fontFamily: "SangBleuRepublic, Cormorant Garamond, Georgia, serif" fontSize: 72px fontWeight: 400 lineHeight: 1.1 letterSpacing: -1.44px display: fontFamily: "SangBleuRepublic, Cormorant Garamond, Georgia, serif" fontSize: 36px fontWeight: 400 lineHeight: 1.22 letterSpacing: -1.44px heading-section: fontFamily: "SangBleuRepublic, Cormorant Garamond, Georgia, serif" fontSize: 24px fontWeight: 400 lineHeight: 1.17 letterSpacing: -0.72px heading-sub: fontFamily: "SangBleuRepublic, Cormorant Garamond, Georgia, serif" fontSize: 18px fontWeight: 400 lineHeight: 1.25 letterSpacing: -0.36px body-large: fontFamily: "SweetSansPro, Raleway, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "SweetSansPro, Raleway, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 15px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0px nav-link: fontFamily: "SweetSansPro, Raleway, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 15px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0px button-ui: fontFamily: "SweetSansPro, Raleway, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 0.94 letterSpacing: 0px label-ui: fontFamily: "SweetSansPro, Raleway, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0px caption: fontFamily: "SweetSansPro, Raleway, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 40px 2xl: 64px 3xl: 96px rounded: none: 0px pill: 9999px # carousel navigation buttons only components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px button-secondary-hover: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 12px 24px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 0px card-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 0px input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 8px 0px input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 8px 0px nav-item: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 6px 0px nav-item-hover: backgroundColor: "{colors.background}" textColor: "{colors.text-hover}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 6px 0px badge: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.label-ui}" rounded: "{rounded.none}" padding: 4px 8px --- # Jacques Marie Mage Design System ## Overview Jacques Marie Mage is the digital gallery of a collector's eyewear atelier — each frame produced in numbered editions of under 500 pieces, designed by a single auteur, and photographed with the gravitas of fine jewelry. The website translates that philosophy into a near-white, photographic system: a warm {colors.background} canvas that functions less as a UI surface and more as a seamless backdrop for macro product shots where you can count the acetate layers and trace each gold hinge pin. There are no banners, no promotions, no distracting chromatic elements — the visual hierarchy has exactly one job: present the object with maximum fidelity and minimum noise. The type system announces the brand's dual allegiance to French luxury heritage and American craftsman precision. SangBleuRepublic — Swiss Type Foundry's high-contrast, oldstyle-influenced serif — holds all display and heading text with tight negative tracking (`-1.44px` at 36px, scaling proportionally). It is a typeface associated with the new French luxury vernacular: editorial, elegant without being effete, carrying the authority of a fine press without the dustiness of revival letterforms. Beneath it, SweetSansPro provides all UI chrome in weight 300 — a geometric grotesque with low stroke contrast and generous apertures. The pairing creates an oscillation: arrive at a product name in a Bodoni-weight serif headline, navigate away via a barely-there geometric sans. Both are self-hosted; neither is a Google Font substitute. The system's restraint is complete and intentional. `{colors.ink}` is pure black, `{colors.background}` is warm off-white, and there is no chromatic accent anywhere in the UI — not in buttons, borders, links, or focus rings. The warmth you perceive in a Jacques Marie Mage page comes entirely from the product photography: tortoiseshell acetate, engraved gold, hand-painted enamel, raw zyl — all of it visible only because the surrounding UI has been stripped of competing color. This is a system designed to get out of the way of a $2,000 pair of sunglasses. **Key Characteristics:** - Warm off-white canvas ({colors.background}) — not pure white, a photographically neutral tone that prevents the harshness of a white studio look - SangBleuRepublic at `{typography.display}` sizing with `-1.44px` tracking — high-contrast oldstyle serif that reads as collector-print editorial - SweetSansPro at weight 300 for all UI chrome — a geometric sans with near-zero visual presence, ceding attention to the product - Achromatic palette throughout: `{colors.ink}` and `{colors.background}` are the entire UI vocabulary; no chromatic accent exists - `{rounded.none}` on all interactive elements — no border-radius on buttons, inputs, or cards; the sharp edge mirrors the precision machining of the frames themselves - Full-bleed product photography as the primary UI element; images are close-cropped macro shots that reveal material texture, not atmospheric scenes - Numbered-edition collector language: every collection page leads with edition count, not pricing - Sparse breakpoint-sensitive navigation: "RESERVEE / GALLERIES / ARCHIVE" at small type in the header — minimal chrome, maximum content - Motion through smooth cubic-bezier transitions (`0.25, 0.46, 0.45, 0.94`) on all interactive states — neither sluggish nor twitchy, the exact pace of someone carefully placing a frame on a display stand - Bottom-border-only form inputs: no surrounding box, just a single `1px solid {colors.border}` rule beneath the field — the most reductive input treatment possible ## Colors ### Primary Canvas - **Warm Off-White** (`{colors.background}`): The photographic backdrop — every product image appears to float against it. Warmer than #f5f5f5 (pure neutral) and cooler than cream; it reads as a studio seamless paper. - **Pure White** (`{colors.surface}`): Modal surfaces, product information panels, form backgrounds. Used to create subtle surface lift off the main canvas. - **Near-Black** (`{colors.surface-dark}`): Footer, dark overlay panels. The site's nocturnal counterpoint — used sparingly to anchor the page base. ### Ink / Text - **Pure Black** (`{colors.ink}`): Every headline, body copy, navigation label, price, and UI annotation. No softening, no mid-tone alternatives — ink is black, full stop. - **Mid Grey** (`{colors.ink-secondary}`): Secondary metadata — collection year, filter labels, de-emphasized descriptions. - **Ghost Grey** (`{colors.ink-ghost}`): Placeholder text, disabled states, fine legal copy. - **White Reverse** (`{colors.on-dark}`): Text on dark surfaces and image overlays; pure white for contrast fidelity. ### Brand Accent - **None.** Jacques Marie Mage carries no chromatic accent in the UI layer. `{colors.primary}` is absolute black — the CTA button is a black rectangle, the focus ring is a black outline. Brand identity is communicated through the physical object, not the interface palette. ### Interactive States - **Primary Hover** (`{colors.primary-hover}`): A barely perceptible lift from pure black — only detectable on screen-calibrated displays. The transition time does more work than the color change. - **Text Hover** (`{colors.text-hover}`): Link hover state on the light canvas — a medium charcoal rather than a chromatic shift. - **Focus Ring** (`{colors.focus-ring}`): 2px solid black ring — maximum contrast against the warm canvas without introducing color. ### Borders - **Black Rule** (`{colors.border}`): Bottom-edge input rules, list-item dividers, structural hairlines. Weight 1px throughout. - **Subtle Divider** (`{colors.border-subtle}`): Light surface separators — between product grid cells, between navigation sections. - **Ghost Border** (`{colors.border-ghost}`): was `rgba(0,0,0,0.2)` — combobox and select component outlines. ### Shadows - **Ambient Lift** (`{colors.shadow-soft}`): was `rgba(0,0,0,0.1) 0px 0px 44px 0px` — the single shadow in the system, used for modals and elevated panels. Diffuse, wide, purely neutral. ## Typography ### Font Family - **Display / Heading**: `SangBleuRepublic`, closest Google Font match: `Cormorant Garamond, Georgia, serif` - **UI / Body / Navigation**: `SweetSansPro`, closest Google Font match: `Raleway, Helvetica Neue, Helvetica, Arial, sans-serif` - **Italic Variant**: `SangBleuRepublic-RegularItalic` — deployed for editorial captions, pull quotes, and product story copy - Both fonts are self-hosted OTF; no Adobe Fonts, no Google Fonts, no variable font axis ### Hierarchy | Token | Use | |---|---| | `display-hero` | Collection launch titles, full-bleed hero statements | | `display` | Product name headers, collection section titles | | `heading-section` | Category titles, editorial section leads | | `heading-sub` | Product sub-titles, secondary editorial heads | | `body-large` | Featured editorial copy, lead paragraphs | | `body` | Standard product descriptions, navigation labels | | `nav-link` | Header navigation, in-page anchor links | | `button-ui` | All interactive button labels, CTA text | | `label-ui` | Form labels, filter tags, structural annotations | | `caption` | Image credits, edition numbers, fine metadata | ### Principles - **Negative tracking on all serif display text**: SangBleuRepublic carries `-1.44px` letter-spacing at 36px — a direct compensation for the optical expansion of high-contrast serifs at display sizes. - **Weight 300 for SweetSansPro UI**: The geometric grotesque at its lightest weight is chosen deliberately to reduce visual weight in the chrome, preserving the product photography's primacy. - **No uppercase tracking treatment**: Unlike many luxury brands that uppercase and expand-track all UI labels, JMM keeps navigation in mixed case at modest size — quiet authority rather than institutional shouting. - **Serif for content, sans for structure**: SangBleuRepublic names and describes the objects; SweetSansPro navigates, labels, and controls. The registers are clean. - **Raleway fallback**: The closest freely-available weight-300 geometric sans that approximates SweetSansPro's aperture and x-height. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Spacing in the JMM system reads as deliberately unhurried. The macro rhythm uses `{spacing.2xl}` (64px) and `{spacing.3xl}` (96px) between major sections, while the micro scale uses `{spacing.xs}` (4px) and `{spacing.sm}` (8px) for form element stacking and caption-to-image proximity. There is almost nothing in between — the system jumps from intimate closeness to gallery-scale breathing room. ### Grid & Container - Max content width: 1440px (fullscreen product photography) with inner text content capped around 1200px - Product grid: typically 2–3 columns at desktop, large images with minimal gutter — closer to a gallery layout than a commerce grid - Hero: full-viewport photographic heroes, image as UI — close-cropped frame details filling the entire canvas - Navigation: top-fixed horizontal bar; brand name centered, utility links (`RESERVEE / GALLERIES / ARCHIVE`) left and right at small type size ### Whitespace Philosophy - **Gallery-scale section gaps**: Major content sections separated by large vertical space that instructs the eye to pause before the next collection, the way a museum places blank wall between works. - **Image-first compression**: Product grids minimize inter-cell spacing so the photographs tile continuously — the negative space is inside the image itself, not between cells. - **Form field austerity**: Single-border inputs with no surrounding container or shadow; the field is defined by its bottom rule alone. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | All page content, product cards, navigation | | Ambient (Level 1) | `rgba(0,0,0,0.1) 0px 0px 44px 0px` | Modals, overlay panels, floating tooltips | | Focus Ring | `0 0 0 2px {colors.focus-ring}` | Keyboard focus on all interactive elements | **Shadow Philosophy**: JMM's elevation system is essentially flat. Depth is communicated photographically — the macro product images carry their own three-dimensional presence through depth-of-field, and the page layers (canvas, navigation, modal) are separated by opacity rather than shadow stacking. The single ambient shadow (`rgba(0,0,0,0.1) 0px 0px 44px`) is reserved exclusively for floating panels; it is wide and diffuse, casting no directional light, as though the object is floating inside a softbox rather than under a harsh key light. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | All buttons, inputs, cards, containers, navigation — the universal default | | `pill` | 9999px | Carousel navigation arrow circles only | The JMM radius system is maximally binary: everything interactive and structural is sharp-cornered (`{rounded.none}`), and the single pill shape is reserved for the scroll/carousel navigation controls that appear over product imagery. This mirrors the physical product language — JMM frames have geometric, precise silhouettes; the acetate corners are cut at angle, never rounded. ## Components The complete component spec lives in the `components:` token block above. ### Button Variants - **`button-primary`** — absolute black fill (`{colors.primary}`), white label (`{colors.on-primary}`), `{typography.button-ui}` at weight 500, zero radius, 12px 24px padding. Used for "ADD TO BAG", "RESERVE", primary conversion actions. - **`button-secondary`** — white fill (`{colors.surface}`), black label, same geometry as primary. Used for secondary actions, filter toggles. - **`button-ghost`** — transparent fill on the warm canvas, black label; functionally a text-link with button padding. Used for "SEE COLLECTION", tertiary navigation CTAs. ### Cards JMM product cards are near-frameless: no border, no shadow, no container background — `{components.card}` padding is `0px` because the image IS the card. Below the image, product name appears in `{typography.heading-sub}` (SangBleuRepublic 18px) and a short descriptor in `{typography.body}`. Hover state reveals an overlay with quick-shop controls; no card lift or shadow elevation. ### Inputs Form inputs follow the bottom-border-only convention: no surrounding border-box, just `1px solid {colors.border}` beneath the field on `{colors.surface}` background. `{typography.body}` for user input text, `{typography.label-ui}` for field labels positioned above. On focus, the border intensifies via `{colors.focus-ring}`. Used for newsletter signup, reservation forms, and search. ### Navigation - Header: fixed top bar on `{colors.background}`, full-width - Brand name: centered, SangBleuRepublic or SweetSansPro at display weight - Utility nav: sparse set of links (`RESERVEE`, `GALLERIES`, `ARCHIVE`, `LOG IN`) at `{typography.nav-link}`, left and right flanking the brand name - Cart/account icons: SVG, right-aligned - Mobile: collapses to hamburger/drawer at small breakpoints - No active-state color change — only typographic weight shift on current page ### Badges Edition number badges use `{components.badge}`: black fill, white label, no radius, tight `4px 8px` padding. These announce "NO. 04 / 500" or "LIMITED EDITION" — the collector credential, not a status chip. ## Do's and Don'ts ### Do - Use `{rounded.none}` on every interactive element — sharp corners are the structural identity; they carry the precision-machining language of the frames themselves. - Set all SangBleuRepublic display text with negative letter-spacing (`-1.44px` at 36px, `-0.72px` at 24px) — positive or zero tracking undermines the optical density the serif requires. - Keep `{colors.background}` as the photographic canvas — warm off-white holds product imagery better than pure white or pure neutral. - Use SweetSansPro at weight 300 for all UI chrome — the near-invisible weight ensures the product photography carries visual authority. - Maintain the achromatic palette everywhere in the UI — if a component feels like it needs an accent color, the solution is better typography or spacing, not color. - Apply the bottom-border-only input treatment — it is the most reductive form element this side of no styling at all; it signals that the form is a formality, not a feature. - Reserve `{rounded.pill}` exclusively for carousel navigation controls over image surfaces — it is the only exception to the square-corner rule. - Use `{typography.display}` SangBleuRepublic for product names — the high-contrast serif at `-1.44px` tracking gives each piece the weight of a proper noun. ### Don't - Don't introduce any chromatic color into the UI layer — not in buttons, links, focus rings, hover states, or borders. The brand's warmth lives in the object, not the interface. - Don't use border-radius values between 1px and 9998px — the system is binary; anything in the middle range softens the precision the brand requires. - Don't set SweetSansPro above weight 500 in UI contexts — heavier weights compete with the product imagery and disrupt the weight hierarchy with SangBleuRepublic. - Don't add drop shadows or elevation effects to product cards — the photography carries its own depth; a shadow layer undermines the floating-in-studio quality. - Don't add gradient overlays to hero imagery — JMM's product photography is designed to be seen in full fidelity; scrims and gradients are a commercial concession this brand doesn't make. - Don't capitalize and expand-track navigation labels — that is the luxury-generic treatment; JMM keeps navigation mixed-case at small point size, which reads as more confident, not less. - Don't use border-box inputs — the bottom-rule-only convention is deliberate; a surrounded form field introduces utilitarian energy that conflicts with the collector register. - Don't use multiple typefaces — the system is strictly two-family (SangBleuRepublic + SweetSansPro). No third typeface for any purpose. --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <376px | Single column, hero image fills viewport, navigation collapses | | Mobile | 376–679px | Single column, full-bleed product photography, hamburger nav | | Mobile Large | 680–767px | Slightly expanded gutters, 2-column product grid begins | | Tablet | 768–1024px | 2-column grid, condensed navigation, full header visible | | Desktop | 1025–1440px | 2–3 column product grid, full nav, editorial sections at full width | | Large Desktop | >1440px | Maximum photographic scale, centered containers with generous lateral margins | ### Touch Targets - Primary CTA buttons: `12px 24px` padding reaches adequate touch height at 13px button-ui type - Navigation links: `{typography.nav-link}` at 15px with adequate surrounding tap area via padding - Product cards: the entire image surface is the tap target — inherently oversized - Carousel navigation circles: pill-shaped, sized to approximately 40–44px for touch accuracy ### Collapsing Strategy - **Navigation**: Full top-bar collapses to hamburger; brand name persists centered; cart icon persists right - **Product grid**: 3-column → 2-column → 1-column across desktop → tablet → mobile - **Hero photography**: Maintains full-bleed at all breakpoints; aspect ratio adjusts via `object-fit: cover` - **Section spacing**: `{spacing.3xl}` (96px) section gaps reduce to `{spacing.2xl}` (64px) at tablet and `{spacing.xl}` (40px) at mobile - **Display type**: SangBleuRepublic display scale reduces proportionally — 72px hero → ~48px at tablet → ~36px at mobile ### Image Behavior - Product photography maintains edge-to-edge at all breakpoints — no padding, no containment within a card chrome - Close-cropped macro detail shots are art-directed for vertical mobile crop; no art-direction attribute needed because the frame detail reads at any crop - Lazy loading below the fold; above-the-fold hero images load eagerly - No responsive image size-swapping visible in the crawl; full-resolution images serve all breakpoints --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Text: `{colors.ink}` - Brand accent: none — `{colors.primary}` is `#000000` - Secondary text: `{colors.ink-secondary}` - Border: `{colors.border}` - CTA: `{colors.primary}` fill, `{colors.on-primary}` label ### Example Component Prompts - "Create a full-viewport hero section on a warm off-white canvas (`{colors.background}`). Fill the frame edge-to-edge with a close-cropped product photograph — no gradient scrim, no overlay. Center a collection title in SangBleuRepublic (fallback: Cormorant Garamond) 72px, weight 400, line-height 1.1, letter-spacing -1.44px, color `{colors.ink}`. Below it, a two-word edition descriptor in SweetSansPro (fallback: Raleway) 15px, weight 300, line-height 1.2, `{colors.ink-secondary}`. Bottom-center: a CTA button labeled 'EXPLORE COLLECTION' in SweetSansPro 13px weight 500, background `{colors.primary}`, text `{colors.on-primary}`, border-radius 0, padding 12px 24px." - "Design a product card with zero container chrome on `{colors.background}`. The card is the image: fill the cell with a close-cropped product photograph at natural aspect ratio (roughly 4:3 or 1:1), no border, no shadow, border-radius 0. Below the image: product name in SangBleuRepublic 24px, weight 400, line-height 1.17, letter-spacing -0.72px, color `{colors.ink}`. Edition count in SweetSansPro 11px weight 400, line-height 1.4, `{colors.ink-secondary}`: 'NO. 04 / 500'. On hover, add a subtle overlay panel from the bottom (background `{colors.surface}`, padding 16px) with an 'ADD TO BAG' button: background `{colors.primary}`, text `{colors.on-primary}`, border-radius 0, padding 12px 24px." - "Build a minimal navigation header on `{colors.background}`: brand name 'JACQUES MARIE MAGE' centered in SangBleuRepublic 18px weight 400 letter-spacing -0.36px, color `{colors.ink}`. Left side: 'RESERVEE', 'GALLERIES', 'ARCHIVE' in SweetSansPro 15px weight 300 line-height 1.2, `{colors.ink}` — no underline, no uppercase, no letter-spacing. Right side: 'LOG IN' same style plus a cart icon SVG 18px `{colors.ink}`. All links on hover shift to `{colors.text-hover}`. Transition: color 0.2s ease-in-out." - "Create a newsletter signup form on `{colors.surface}`. Field label 'EMAIL ADDRESS' in SweetSansPro 11px weight 400, `{colors.ink-secondary}`, positioned above the input. Input field: background transparent, text `{colors.ink}` in SweetSansPro 15px weight 300, no border-box — only a single `1px solid {colors.border}` bottom rule. Padding 8px 0px. On focus: border-bottom becomes `2px solid {colors.focus-ring}`, no color change. Adjacent CTA button: background `{colors.primary}`, text `{colors.on-primary}`, SweetSansPro 13px weight 500, padding 12px 24px, border-radius 0." - "Design a collection editorial section on `{colors.background}`. Section title in SangBleuRepublic 36px, weight 400, line-height 1.22, letter-spacing -1.44px, `{colors.ink}`, left-aligned. Below it: a 2-column grid of large product photographs (no gutter, images tile edge-to-edge within the grid). Under each image: product name in SangBleuRepublic 24px weight 400 letter-spacing -0.72px and collection name in SweetSansPro 11px weight 400 `{colors.ink-secondary}`. Section-to-section spacing: 96px ({spacing.3xl}). All images at border-radius 0." ### Iteration Guide 1. **Start with the photograph**: Every JMM layout begins with the product image at maximum fidelity — edge-to-edge, close-cropped, no scrim. The UI is built around the object, not the other way around. 2. **Achromatic everywhere**: If you add a color — any color — remove it. The entire system is `{colors.ink}` on `{colors.background}`. Warmth comes from the acetate, tortoiseshell, and gold in the photography. 3. **Serif for names, sans for everything else**: SangBleuRepublic with negative tracking (`-1.44px`) names and describes products. SweetSansPro weight 300 handles every functional UI element — never swap these registers. 4. **Sharp corners are non-negotiable**: `border-radius: 0` everywhere except carousel circles. Even the most "soft" interaction (a newsletter form, a search bar) uses sharp-cornered inputs. 5. **Bottom-rule only for inputs**: `1px solid {colors.border}` on the bottom edge, transparent elsewhere. No surrounding box. 6. **Motion is a transition, not an animation**: All interactive state changes use `transition: 0.2s–0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)`. No keyframe animations, no movement effects on the main canvas — only state changes on interactive elements. 7. **Edition language over pricing language**: Wherever possible, lead with "NO. 04 / 500" or "LIMITED EDITION" before a price — collector framing before commerce framing. --- ## 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 Jacques Marie Mage. Brand names and trademarks belong to their respective owners.