What is Jaguar's primary brand color after the 2024 rebrand?

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.

What typeface does Jaguar use and what is the open-source substitute?

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.

Why does Jaguar use zero border-radius on every component?

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.

Why is Jaguar's canvas near-black (#141414) rather than pure black?

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.

How are Jaguar's form elements styled and what spacing do they use?

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.

Jaguar Design System

Jaguar's post-rebrand design system captured as a DESIGN.md file.

About Jaguar DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source jaguar.com

Automotive

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.

What makes it distinct

Photography-as-brandthe 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 labelsProximaNova at 5.2px letter-spacing for the hero wordmark and 1.2px for form labels, never sentence-case in the chrome
Zero border-radiusevery button, dropdown, and input uses 0px corners, the sharpest radius commitment in any luxury automotive brand captured here
Dual sans familiesProximaNova carries UI labels and body, AvenirNext carries the primary button and navigation link accent
Near-black not pure blackthe canvas reads as midnight charcoal (#141414) against which white-only text creates maximum contrast without the cold shock of true black

Live at jaguar.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

jaguar.com

Explore Jaguar

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Jaguar design system FAQ

Common questions about Jaguar's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Jaguar — official site

Jaguar's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.