--- version: alpha name: "Jaguar" website: "https://www.jaguar.com" description: >- A British luxury automotive brand in the middle of a controversial identity rupture — the 2024 Type 00 rebrand traded classic racing heritage for a modernist palette anchored by deep violet-blue photography and stark white typography set in ProximaNova. The market-selector page captures this post-rebrand face: a full-bleed abstract blue render fills the canvas behind a three-column region picker, the wordmark is a flat all-caps sans, and every interactive element is a sharp-cornered rectangle with no radius. Zero brand color in the UI chrome itself — all chromatic energy lives in the background photography. seo: title: "Jaguar Design System for React — near-black on midnight blue, ProximaNova, 14 components" metaDescription: "Jaguar's post-rebrand design system captured as a DESIGN.md file. Near-black canvas, ProximaNova type, all-caps wide-tracked labels, zero-radius sharp forms. For React, Next.js, and AI tools." highlights: - "Photography-as-brand — the only chromatic voltage on the page is the abstract violet-blue background render; every UI element sits in stark monochrome on top" - "All-caps wide-tracked labels — ProximaNova at 5.2px letter-spacing for the hero wordmark and 1.2px for form labels, never sentence-case in the chrome" - "Zero border-radius — every button, dropdown, and input uses 0px corners, the sharpest radius commitment in any luxury automotive brand captured here" - "Dual sans families — ProximaNova carries UI labels and body, AvenirNext carries the primary button and navigation link accent" - "Near-black not pure black — the canvas reads as midnight charcoal (#141414) against which white-only text creates maximum contrast without the cold shock of true black" tags: - "Automotive" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Jaguar's market-selector page is the first glimpse of a brand in deliberate rupture. Gone is the leaping cat; the wordmark is now flat uppercase JAGUAR in a low-contrast sans. The entire chromatic identity is delegated to a single full-bleed background photograph: an abstract field of deep violet-blue metallic lens fragments, rendered so close-up that the source object is unrecognizable. No hero headline, no product photography, no color accent in the chrome — just the image and a three-column form sitting in the lower-left quadrant of a near-black canvas. It is the most restraint any luxury automotive brand has committed to at the point-of-entry screen. The DESIGN.md file packages this system for React tooling. Inside: 6 color tokens spanning a near-black canvas (#141414), a slate mid-tone (#4a4f54), and white for all text and borders — no hue anywhere in the structural palette. ProximaNova carries every label and body surface; AvenirNext appears only on the primary button and a small navigation link. Every component uses 0px corner radius: buttons, dropdowns, inputs — all hard rectangles. Where BMW uses a gentle 4px radius and Mercedes uses 2px, Jaguar commits to zero and lets the sharpness read as the luxury statement. Letter-spacing at 5.2px on the hero wordmark and 1.2px on form labels is the typographic substitute for decorative ornamentation. Feed this file to an AI coding tool and it will reproduce Jaguar's specific moves: midnight canvas instead of pure black, white-only UI chrome against photographic color, zero-radius forms at 45px height, and ProximaNova running all label tiers with the aggressive letter-spacing that substitutes for the decorative flourishes the brand has discarded. The one thing to borrow carefully: the "photography does all chromatic work" move only lands when the photo is this controlled. Substitute a less resolved image and the page collapses into an empty dark form. 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.jaguar.com" title: "Jaguar — official site" description: "Jaguar'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: "jaguar-primary-color" title: "What is Jaguar's primary brand color after the 2024 rebrand?" answer: "Jaguar's post-rebrand marketing surface carries no structural brand color in the UI chrome — there is no accent hex wired into buttons, links, or active states. The only chromatic element on the captured market-selector page is the full-bleed background photograph, a deep violet-blue abstract render of metallic lens shapes. Every UI element — buttons, dropdowns, inputs, the wordmark itself — uses the monochrome stack: near-black canvas (#141414), slate border mid-tone (#4a4f54), and white text and borders. This is the inverse of a brand-voltage system: instead of holding one accent in reserve, Jaguar reserves ALL color for photography and none for chrome." - id: "jaguar-typeface" title: "What typeface does Jaguar use and what is the open-source substitute?" answer: "Jaguar's 2024 rebrand runs two proprietary sans families in the captured system. ProximaNova handles the majority of UI surfaces: region labels, dropdown text, body copy, and secondary spans at 12–24px across weights 400, 500, and 600. AvenirNext carries the primary button and the skip-link anchor at 10px / weight 700 with 3px letter-spacing. Both are licensed families. The closest open-source substitutes are Inter for ProximaNova (the proportions and weight distribution transfer well at label sizes) and Outfit or DM Sans for AvenirNext's button tier. The distinctive wide-tracking on the hero wordmark (5.2px at 24px size) requires explicit letter-spacing on any substitute — Inter at 0.22em tracks comparably." - id: "jaguar-radius" title: "Why does Jaguar use zero border-radius on every component?" answer: "The 0px corner radius is a deliberate signal of the 2024 brand overhaul. Jaguar's previous identity leaned on rounded elements in vehicle renders and some soft UI chrome; the Type 00 rebrand introduced architectural rigidity as a design stance — hard edges, flat surfaces, and no decorative softening. Every interactive element on the captured market-selector page — the three select dropdowns (45px height), the Continue button, the form containers — uses 0px border-radius without exception. By comparison, Land Rover (a JLR sibling) also uses 0px on its parallel market-selector page, suggesting this is a JLR-platform decision. The sharpness distinguishes both brands from BMW (4px), Mercedes (2px), and Audi (4px), and reads as the severity of a modernist restatement rather than digital-default border styling." - id: "jaguar-canvas" title: "Why is Jaguar's canvas near-black (#141414) rather than pure black?" answer: "The canvas tone is #141414 — a very dark charcoal rather than pure #000000. This appears in the background color declared on the page and in button fill states. At this darkness level the difference from true black is nearly imperceptible to most viewers, but it serves the photograph: a pure-black canvas would make the photograph's deep-shadow areas disappear entirely into the page, flattening the depth illusion. The near-black toe gives the image a foundation to sit on rather than bleeding into the page. The same reasoning explains why Spline's marketing site uses pure #000000 — that page presents 3D objects that need maximum contrast, while Jaguar's page presents a photograph that needs tonal continuity. The mid-slate tone (#4a4f54) used for border and label states threads a similar needle between legible contrast and excessive harshness." - id: "jaguar-forms" title: "How are Jaguar's form elements styled and what spacing do they use?" answer: "The market-selector form uses three side-by-side select dropdowns at 45px height (derived from the 15.5px vertical padding × 2 plus the text line-height), each with a white text label and a down-chevron. All three dropdowns use 0px border-radius, a slate-gray border (#4a4f54), and white text on the near-black canvas. The label tier above each dropdown (SELECT A REGION, SELECT A MARKET, SELECT A LANGUAGE) runs in ProximaNova at 12px / weight 600 / 1.2px letter-spacing — wide-tracked all-caps small. The Continue button sits below at 45px height, with AvenirNext 10px / weight 700 / 3px letter-spacing, a near-black fill (#141414), and white text with a gray border. The horizontal gutter between dropdowns and the form container left-edge uses approximately 8px as the base module. Internal button padding is approximately 1px vertical and 24px horizontal — the vertical padding is intentionally near-zero because the 45px height is driven by a fixed height declaration, not padding expansion." mockups: - "marketing-hero" - "checkout-flow" colors: ink: "#ffffff" ink-muted: "#4a4f54" canvas: "#141414" surface-1: "#4a4f54" hairline: "#4a4f54" hairline-light: "#e4e4e4" pure-black: "#000000" skeleton: "#f0f0f0" typography: display-xl: fontFamily: "ProximaNova, \"Arial Unicode MS\", Arial, Helvetica, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 26px letterSpacing: 5.2px label-lg: fontFamily: "ProximaNova, \"Arial Unicode MS\", Arial, Helvetica, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 13px letterSpacing: 1.2px label-md: fontFamily: "ProximaNova, \"Arial Unicode MS\", Arial, Helvetica, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 18px letterSpacing: 1.2px body-md: fontFamily: "ProximaNova, \"Arial Unicode MS\", Arial, Helvetica, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 19px letterSpacing: 0 body-sm: fontFamily: "ProximaNova, \"Arial Unicode MS\", Arial, Helvetica, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 19px letterSpacing: 0 button-md: fontFamily: "AvenirNext, arial, helvetica, sans-serif" fontSize: 10px fontWeight: 700 lineHeight: 12px letterSpacing: 3px nav-link: fontFamily: "AvenirNext, arial, helvetica, sans-serif" fontSize: 10px fontWeight: 700 lineHeight: 12px letterSpacing: 3px rounded: none: "0px" spacing: xs: "8px" sm: "14px" md: "20px" lg: "24px" xl: "40px" 2xl: "60px" components: button-primary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "1px 24px 0px" height: "45px" borderColor: "{colors.surface-1}" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "1px 24px 0px" height: "45px" borderColor: "{colors.hairline}" top-nav: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "8px 0px" height: "72px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "8px 10px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" form-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-lg}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "24px" borderColor: "{colors.hairline}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "10px 34px 10px 14px" height: "45px" borderColor: "{colors.surface-1}" select-dropdown: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "10px 34px 10px 14px" height: "45px" borderColor: "{colors.surface-1}" skeleton-loader: backgroundColor: "{colors.skeleton}" rounded: "{rounded.none}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" padding: "24px" --- ## Overview Jaguar's market-selector page is the sharpest expression of a brand in deliberate self-overhaul. **Monochrome Chrome, Photographic Color.** Where BMW places a single accent on white and Mercedes deploys a fine silver gradient, Jaguar removes all structural color from its UI entirely and delegates every chromatic statement to a single full-bleed background image — a swirling field of deep violet-blue metallic lens shapes that fills the canvas and frames a near-black form interface in the lower left. The brand name sits in flat uppercase at the top: JAGUAR, no leaping cat, no serifs. The system's commitment to 0px border-radius on every component is the most resolved shape statement in any luxury automotive brand captured in this directory — harder than BMW's 4px, harder than Mercedes's 2px, and matching the JLR corporate sibling Land Rover at zero. ProximaNova carries the label and body tier; AvenirNext handles the button CTA and the skip link at 10px / weight 700 with 3px letter-spacing, the widest CTA tracking in the group. **Key Characteristics:** - Near-black canvas (`{colors.canvas}` — #141414) rather than pure black — maintains tonal continuity with the dark zones of the background photograph. - Zero radius on every interactive element — buttons, dropdowns, inputs all at 0px — the sharpest shape commitment of any automotive brand here. - White-only text and border chrome (`{colors.ink}` — #ffffff) against the near-black and slate palette; no hue in the structural layer. - Slate mid-tone (`{colors.surface-1}` — #4a4f54) carries both border and secondary text — one tone doing two jobs, 26 combined occurrences. - ProximaNova for all UI labels with letter-spacing at 1.2–5.2px — the typographic substitute for decorative flourishes the rebrand has removed. - AvenirNext exclusively for the primary button and nav link at 10px / weight 700 — a secondary voice reserved for the action tier. - No brand-layer accent color at all — the extraction shows zero CSS custom properties for a brand hex. ## Colors ### Surface - **Canvas** (`{colors.canvas}` — #141414): frequency 20. Used as background (3), text (9), border (8). The page floor and button background. Near-black rather than pure black — sits as a tone the photograph's dark zones can register against. - **Pure Black** (`{colors.pure-black}` — #000000): frequency 3. Used as border (2), text (1). Appears in the footer strip and a handful of rule elements below the main chrome. ### Text & Border - **Ink** (`{colors.ink}` — #ffffff): frequency 51. Used as text (24), border (23), background (4). The dominant and only text color across the entire UI. White on near-black, no tinting. - **Ink Muted** (`{colors.ink-muted}` / `{colors.surface-1}` — #4a4f54): frequency 26. Used as text (13), border (13). The slate mid-tone serving both secondary text labels and the structural border on form elements. One tone doing two jobs efficiently. - **Hairline Light** (`{colors.hairline-light}` — #e4e4e4): frequency 5. Used as text (2), background (1), border (2). Appears on placeholder text in the disabled/unselected dropdown states. ### Utility - **Skeleton** (`{colors.skeleton}` — #f0f0f0): frequency 2. Used as background only — the CSS skeleton loader background wired as `--_dxskeleton-background`. Not rendered in the visible capture. ## Typography ### Font Families The system runs two sans families: **ProximaNova** (with "Arial Unicode MS" as the first fallback) carries every label, body, and heading tier. **AvenirNext** carries the action tier — the primary CTA button and the skip-to-content navigation anchor. The split is function-driven: ProximaNova is the editorial voice, AvenirNext is the action voice. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 24px | 600 | 26px | 5.2px | Hero wordmark "JAGUAR" | | `{typography.label-lg}` | 12px | 600 | 13px | 1.2px | Form field labels (SELECT A REGION) | | `{typography.label-md}` | 12px | 600 | 18px | 1.2px | Secondary all-caps labels | | `{typography.body-md}` | 13px | 500 | 19px | 0 | Dropdown option text, running UI body | | `{typography.body-sm}` | 13px | 400 | 19px | 0 | Secondary spans | | `{typography.button-md}` | 10px | 700 | 12px | 3px | Primary button (CONTINUE) | | `{typography.nav-link}` | 10px | 700 | 12px | 3px | Skip-to-content link accent | ### Principles The letter-spacing on the hero wordmark (5.2px at 24px — approximately 0.22em) is the system's loudest typographic moment. The 1.2px tracking on form labels is the second. Both choices substitute typographic tension for the decorative ornaments the rebrand has discarded. Display weight peaks at 600 on the wordmark and drops to 500 on body copy; the AvenirNext button tier runs at 700 but the small 10px size means it reads lighter than the numbers suggest. ### Note on Font Substitutes ProximaNova is a licensed family. **Inter** at the same weights is the closest open-source substitute; to match the wide-tracking on the hero wordmark, add `letter-spacing: 0.22em` explicitly at display sizes. **DM Sans** is a slightly softer alternative. For AvenirNext in the button tier, **Outfit** at weight 700 with 0.3em letter-spacing reads closest. ## Layout ### Spacing System - **Base module:** 8px. - **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 14px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 40px · `{spacing.2xl}` 60px. - **Form dropdowns:** `{spacing.2xl}` (60px) horizontal page margin; form sits flush left starting at approximately 60px from the left edge. - **Internal padding (form elements):** `10px 34px 10px 14px` — right-heavy to accommodate the chevron icon without overlap. - **Section spacing:** The 60px top padding, with the navigation bar at 72px height, places the heading at approximately one-third down the viewport. ### Grid & Container - **Layout:** no explicit max-width container — the background image fills 100vw. The form sits in the left half of the viewport in a three-column horizontal arrangement. - **Form grid:** three equal-width dropdowns arranged horizontally, each approximately 430px wide at 1440px viewport. - **Heading:** left-aligned, appears directly above the form at the same left margin. ### Rhythm The page is a single-band layout: background image, wordmark top-left, heading and form in the lower left quadrant, footer strip at the base. There is no section rhythm — the only vertical beat is the spacing between the heading, the label row, the dropdown row, and the button row below. ## Elevation The system carries **no shadow tier**. The photography provides all depth cues; the UI chrome sits flat against the near-black canvas with hairline borders doing the only structural work. No box-shadow, no blur backdrop — the form elements read as precisely-cut apertures in the dark surface rather than elevated panels above it. ## Shapes The radius philosophy is **absolute zero**: - `{rounded.none}` 0px — every element on the page, without exception. No softening at any surface size. Buttons, dropdowns, inputs, and form containers all use hard right angles. This is the defining shape commitment of the post-2024 rebrand and the clearest departure from Jaguar's previous identity. Among luxury automotive brands, only Land Rover matches this severity; BMW, Mercedes, Audi, and Porsche all carry at least 2px. ## Components **`button-primary`** — Near-black `{colors.canvas}` fill, white text, AvenirNext 10px / weight 700, 3px letter-spacing, 0px radius, `1px 24px 0px` padding, 45px height, slate `{colors.surface-1}` border. The "CONTINUE" CTA in the market-selector form. **`button-secondary`** — Transparent fill, white text, same AvenirNext specs, hairline-white border, 0px radius. Used for "VISIT THE INTERNATIONAL SITE" with a chevron prefix. **`top-nav`** — Transparent background, white wordmark (JAGUAR in display-xl tracking), 72px height. No filled background bar — the nav floats over the image. **`nav-link`** — Transparent, white text, AvenirNext 10px / 700 / 3px tracking. The skip-to-content link and any secondary navigation anchor. **`hero-heading`** — White text, ProximaNova 24px / weight 600 / 5.2px letter-spacing. "VIEW JAGUAR IN YOUR MARKET" — the single heading on the market-selector page. **`form-label`** — White text, ProximaNova 12px / weight 600 / 1.2px tracking. "SELECT A REGION", "SELECT A MARKET", "SELECT A LANGUAGE" all-caps labels above each dropdown. **`select-dropdown`** — Near-black fill, white text, ProximaNova 13px / weight 500, 0px radius, `10px 34px 10px 14px` padding, 45px height, slate `{colors.surface-1}` border. The three region/market/language pickers. **`text-input`** — Same spec as select-dropdown — near-black fill, white text, 0px radius, 45px height, slate border. **`card`** — Near-black fill, white text, 0px radius, 24px padding, hairline border. The content card pattern for any surfaced information panels. **`body-paragraph`** — White text, ProximaNova 13px / weight 500. **`skeleton-loader`** — Light gray `{colors.skeleton}` fill with no radius. The CSS-variable-driven loading state for dynamic content. **`footer`** — Near-black canvas, slate muted text, 24px padding. The narrow strip at the base of the viewport. ## Do's and Don'ts **Do** delegate all chromatic energy to a single, intentionally-chosen background image. The system has zero hue in its structural layer; the photograph IS the brand color. Choosing an image without strong chromatic direction — a grey environmental shot, for example — would leave the page visually inert. **Do** maintain 5.2px letter-spacing on the hero wordmark. The wide tracking is the system's loudest design statement and the primary vehicle for luxury signaling in the absence of decorative elements. Collapsing it to 2–3px reads as a consumer-brand label, not an automotive identity. **Do** use `{colors.surface-1}` (#4a4f54) for all form borders and secondary labels simultaneously. The system is efficient: one mid-tone does both structural and textual work, keeping the palette count at a monochrome minimum. **Do** run form elements at exactly 45px height. The dropdowns and button share the same height, creating a horizontal rhythm across the selector row that reads as deliberate alignment rather than approximate sizing. **Don't** introduce any border-radius. The 0px commitment is the sharpest shape signal in the rebrand — adding even 2px to the form elements would soften it into a generic digital form. Use `{rounded.none}` on every surface. **Don't** use hue in the UI chrome. No blue link states, no orange hover accents, no green success feedback. The only color permitted in the structural layer is the monochrome stack: #ffffff, #4a4f54, #141414. Semantic states (error, success) belong in form-level microcopy, not in border or fill changes. **Don't** substitute AvenirNext-tier button labels with a geometric sans at normal tracking. The 3px letter-spacing at 10px — approximately 0.3em — is what makes the button feel automotive-precision rather than app-store default. Substitutes need explicit tracking applied. **Don't** use the skeleton loader color (`{colors.skeleton}` — #f0f0f0) as a page surface or card background. It is a loading-state token only; used as a card fill it would read as a design error against the near-black canvas. ## Known Gaps - **Full product site tokens:** the extraction captured the market-selector landing page, not the full jaguar.com vehicle configurator or model pages, which carry a more complete token set including vehicle color swatches and spec-table formatting. - **Type 00 rebrand palette:** the controversial new pink, yellow, and chartreuse accents visible in Type 00 campaign photography do not appear in the captured marketing surface — they may be exclusive to campaign creative assets rather than wired into the web system. - **Hover and focus states:** no hover or focus state is captured; the CSS `--nav-default-animation-duration: 0.2s` and `--x-axis-fade-animation-name: fadeInFromLeft` suggest animated transitions exist but are not represented in the extracted static snapshot. - **Dark vs. light variants:** the page is dark-only; no light-mode token set is exposed on this surface. - **Vehicle configurator components:** color picker swatches, trim-level selectors, and 3D vehicle rotators are core to the Jaguar product experience but belong to a different surface not captured here. - **Mobile navigation:** the full nav bar with product links (models, EV, configurator) is not present on the market-selector page and thus not captured in the component definitions.