Jaguar Design System

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

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.