Jeep Design System

Overview

Jeep's marketing chrome is the most photography-dependent in the mainstream automotive category. Terrain as voltage. Where Lexus stages vehicles on dark luxury plinths and Hyundai softens with a corporate-editorial floor, Jeep hands the entire above-fold to a vehicle in working environment — a Wrangler at a rock shelf angle, a Gladiator at a tree-line shoulder, a Grand Cherokee tracking forest two-track. The chromatic interest of dust, foliage, and stone supplies the page's color story; the brand chrome is reduced to near-monochrome ink-on-canvas with one muted military-olive accent reserved for Wrangler and Gladiator sub-brand bands.

The seven-slot grille is the protected brand element. It carries every recognition signal a brand color would supply on a SaaS surface, and it is the one geometric form that never gets stylized, abstracted, or thinned. The wordmark sits secondary to the grille emblem. Below the photography, the page returns to a {colors.canvas} (#ffffff) floor with charcoal {colors.ink-soft} (#333333) running text, a grayscale model-card grid, and small-caps section labels in Jeep Sans at weight 700 with 1px tracking. The single chromatic exception is {colors.olive-accent} (#3a4f1f) — a heritage military olive that surfaces on dedicated Wrangler / Gladiator promotional bands and never on body chrome.

The type voice is upright utility. Jeep Sans is an upright, slightly-condensed proprietary sans that pairs naturally with Trade Gothic as the open-source fallback. Display sits at weight 500 with sentence-case casing; small-caps duty falls to the same family at 14px / 700 with 1px tracking — a treatment that reads as field-spec lettering rather than as SaaS-marketing caps. The shape language is square-edge utility: 2-4px corners on buttons, 0px square on photographic crops, no fully-rounded pill anywhere on body chrome. The geometry of the chrome echoes the angular geometry of the vehicles themselves.

Key Characteristics:

• Adventure photography occupies the chromatic role that a brand color would carry on a SaaS site — every chromatic interest above the fold belongs to the vehicle and its terrain.
• Near-monochrome chrome: near-black {colors.masthead} (#1a1a1a) masthead, pure {colors.canvas} (#ffffff) below-fold floor, charcoal text ladder, no SaaS brand voltage.
• Seven-slot grille emblem as protected brand mark — sits visually above the wordmark in hierarchy and carries the recognition load.
• Jeep Sans across every display tier at modest weights, with all-caps 1px-tracked labels in the same family for small-caps duty.
• Single olive accent {colors.olive-accent} (#3a4f1f) reserved for Wrangler / Gladiator sub-brand bands — never on primary CTAs or body chrome.
• Square-edge corner radii in the 2-4px range, with 0px on full-width photographic blocks and 50% circles on icon affordances. No SaaS pill treatment.
• Modest display weights (500 not 700+) — the photograph carries the volume, not the typography.
• 4px / 8px / 12px spacing module with 24px as the dominant inter-element gap on the model-card grid.

Colors

Brand

• Olive Accent ({colors.olive-accent} — #3a4f1f): the heritage military green that surfaces on Wrangler and Gladiator sub-brand bands. The single chromatic note outside grayscale on the entire chrome — reserved exclusively for sub-brand identity blocks, never used on primary CTAs or body surfaces.
• Olive Soft ({colors.olive-soft} — #5e6e3a): a lighter end-stop for the olive band gradient on Wrangler / Gladiator hero overlays. Used as a tonal pairing with the deeper olive accent.

Surface

• Canvas ({colors.canvas} — #ffffff): the dominant below-fold floor for the model-card grid and feature bands. Pure white — not warmed.
• Surface Muted ({colors.surface-muted} — #f3f3f3): a near-white alternate-band tone used to separate model-strip sections from feature blocks without introducing a hairline divider.
• Masthead ({colors.masthead} — #1a1a1a): the near-black full-width bar at the top of the page holding the wordmark + grille emblem and the product nav. Near-black rather than pure black to soften the contrast against the cream-toned photography crops.

Text

• Ink ({colors.ink} — #1a1a1a): the primary dark text and CTA fill — used on section h2s, button-primary fill, and high-emphasis label text on the white floor.
• Ink Deep ({colors.ink-deep} — #000000): a pure-black variant reserved for the wordmark and the grille emblem outline. Used sparingly.
• Ink Soft ({colors.ink-soft} — #333333): the workhorse body running-text tone — paragraph copy on white floor reads softer than masthead near-black.
• Muted ({colors.muted} — #666666): secondary captions, footer category sub-labels, and "Disclaimer" small print.
• Muted Light ({colors.muted-light} — #888888): the lightest readable tone used for tertiary metadata under model cards.

Hairlines

• Hairline ({colors.hairline} — #cccccc): the default border tone for model-card outlines and form-element rules. Soft enough to disappear at normal viewing distance but visible on print.
• Hairline Soft ({colors.hairline-soft} — #e6e6e6): a lighter divider tone reserved for separating footer columns and disclaimer rules.

Typography

Font Families

The system runs Jeep Sans across every display tier — an upright, slightly-condensed proprietary sans with character widths that match the utility aesthetic of the brand. The open-source fallback stack walks "Trade Gothic", Arial, sans-serif. There is no separate display serif or alternate body family; one variable-weight sans does every job from 56px hero h1 down to 14px all-caps small-caps labels. The Jeep Sans face was developed to pair with the seven-slot grille emblem and the angular wordmark — its slight condensation reads as functional rather than decorative.

Hierarchy

Principles

Display weight tops out at 500. The hero h1 at 56px / 500 is the loudest typographic moment — Jeep Sans, weight 500 with neutral 0 letter-spacing, sentence-case casing. Most off-road / utility brands run heavier 700+ display tiers; Jeep holds at 500 because the photograph is doing the volume work. The 700 weight is reserved for two specific roles: small-caps section labels at 14px / 1px tracking, and all-caps button text at 14px / 1px tracking. The tracking is what turns the same weight into a different visual register.

Note on Font Substitutes

Jeep Sans is proprietary. The closest open-source substitute is Barlow Condensed at weights 500 / 700 — the upright slight-condensation transfers cleanly across the display sizes. For an even closer match, Trade Gothic itself (licensed) is the historical reference for the Jeep wordmark. If you need a flatter neutral grotesk for body sizes, Inter at 400 with no tracking adjustment fits. For the all-caps label tier, Industry at weight 700 with 1px tracking captures the same field-spec lettering voice.

Layout

Spacing System

• Base unit: 4px module with 8px and 24px as dominant pair values.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.base} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 64px.
• Section padding (vertical): the hero plate is full-viewport height; below the fold, sections sit at ~64px vertical rhythm with {spacing.lg} (24px) gutters.
• Card internal padding: {spacing.lg} (24px) on model cards and feature blocks; 32px vertical on the olive sub-brand bands.
• Nav padding: {spacing.md} (16px) vertical, {spacing.lg} (24px) horizontal in the masthead.

Grid & Container

• Max content width: ~1440px viewport with the hero photograph extending edge-to-edge; below-fold content centers at ~1280px.
• Hero block: full-bleed adventure photography canvas with the headline either left-aligned over the photograph or centered against a darker overlay band.
• Model-card grid: 3-up or 4-up grid of vehicle thumbnails on a {colors.canvas} floor, each card carrying a vehicle render, model name, MSRP starting price, and inline link to Build & Price.
• Feature bands: full-width photography crops alternating with constrained-text editorial sections at 1080px max-width.
• Footer: multi-column link grid in {colors.muted} text at {typography.body-sm}, separated by {colors.hairline-soft} divider rules.

Rhythm

The page alternates between edge-to-edge cinematic and constrained editorial-grid bands. The hero is generous (full-viewport, single sentence). Sections 2-3 (model strip, Build & Price callouts) pack densely into 3-up or 4-up grids. The Wrangler / Gladiator sub-brand bands break the rhythm with the olive accent fill — visually announcing a sub-brand band even with the headline read at distance. Section 4 (lifestyle photography, "Where will you take it?") returns to full-bleed. The footer is densely packed.

Elevation

The system has essentially no shadow tier. Body cards use hairline borders or photographic-edge contrast for separation; the masthead doesn't carry a shadow under it either. The flat treatment matches the utility-vehicle aesthetic — shadows would feel borrowed from a consumer-tech category that doesn't match the off-road context.

• Flat (no shadow): hero, body bands, model cards, feature blocks, footer — 99% of surfaces.
• Hairline outlines: {colors.hairline} (#cccccc) on model-card and form-element borders.
• Photographic edge: model cards lean on the cropped edge of the vehicle render itself for definition rather than on a drawn outline.

Shapes

The radius scale is square-edge utility:

• {rounded.none} 0px — the dominant treatment on photographic crops, masthead bar, and the hero block.
• {rounded.sharp} 2px — the primary button corner ({component.button-primary}).
• {rounded.sm} 4px — secondary chips and small form elements.
• {rounded.full} 9999px — only on icon-only buttons that need to read as circular affordances (location pin, search, share).

The scale skips the 8-16px SaaS-default middle tier entirely. There is no {rounded.lg} or {rounded.xl} token in the system because the chrome is intentionally angular — the geometry of the buttons matches the geometry of the vehicles. Fully-rounded pills would feel borrowed from a consumer-tech category and break the utility aesthetic.

Components

button-primary — The signature CTA. Near-black {colors.ink} fill, white text, {rounded.sharp} 2px corners, 14x24 padding, 48px height. All-caps label at {typography.button-md} with 1px tracking. "BUILD & PRICE" is the canonical instance.

button-secondary — White {colors.canvas} fill, ink text, 1px ink border, {rounded.sharp} 2px corners. Same dimensions as primary. Used for "Find a dealer" / "Learn more" tertiary actions on the white floor.

button-ghost — Transparent fill with white text and a 1px white border, {rounded.sharp} 2px. Reserved for actions placed over hero photography where an opaque fill would obscure the imagery.

top-nav — Near-black {colors.masthead} surface, white wordmark and nav labels, 72px height, 16x24 padding. Houses the Jeep grille emblem and wordmark flush left, the model nav center (Vehicles, Build & Price, Inventory, Owners, Performance), and the right-aligned Search / Account cluster.

nav-link — Transparent background, white text in {typography.nav-link} (14px / 500). No persistent underline; hover state surfaces a thin underline rule.

hero-heading — White text on transparent over the photography, Jeep Sans at 56px / 500, sentence-case. 0 padding because the photograph extends edge-to-edge.

hero-subtitle — White Jeep Sans at {typography.body-lg} (18px / 400), used for the secondary line beneath the h1 ("Available Now" / model year callout).

section-heading — Ink {colors.ink} text on the below-fold white floor, Jeep Sans at {typography.display-md} (30px / 500). Used for the model-strip h2s and section labels.

body-paragraph — Default soft-ink running text at {typography.body-md} — the workhorse paragraph treatment on the editorial floor.

body-paragraph-muted — Muted {colors.muted} (#666666) variant of the body paragraph for secondary captions, disclaimer text, and footer category sub-labels.

model-card — White {colors.canvas} fill, ink text, {rounded.none} square corners, 0 internal padding (the model render fills the card edge-to-edge with metadata sitting beneath). Used in the model-grid strip showing every available Jeep nameplate.

uppercase-label — Ink-colored text in {typography.label-md} (14px / 700 / 1px tracking), used for small-caps section labels above hero h2s ("EXPLORE THE LINEUP", "BUILD YOUR JEEP").

olive-band — Olive {colors.olive-accent} (#3a4f1f) fill, white text, square corners, 32x24 padding. The Wrangler / Gladiator sub-brand band — the single in-body application of any color outside grayscale.

Do's and Don'ts

Do let adventure photography occupy the chromatic role a brand color would carry on a SaaS surface. The chrome stays out of the way so the dust, foliage, and stone tones in the photograph supply the page's color story.

Do protect the seven-slot grille emblem. It is the brand's load-bearing recognition signal — never stylize, thin, abstract, or replace it. The wordmark sits secondary in hierarchy.

Do reserve {colors.olive-accent} (#3a4f1f) for Wrangler and Gladiator sub-brand bands. The olive is a sub-brand identifier, not a general accent — using it on primary CTAs or feature blocks flattens the sub-brand signal.

Do keep display weight at 500 across the Jeep Sans tier. The photograph is doing the volume work; bumping to 700 turns the hero h1 into a competing chromatic-and-typographic shout that fights the imagery.

Don't use the {colors.hairline} (#cccccc) tone for body text — it is a border-only token. For dim text use {colors.muted} (#666666) or {colors.muted-light} (#888888) instead.

Don't introduce a fully-rounded pill {rounded.full} on body buttons. The shape language is square-edge utility at 2-4px corners — pill geometry reads borrowed from a consumer-tech category and breaks the off-road aesthetic.

Don't introduce a 12 or 16px middle radius tier. The system is binary — square 2px-or-4px on body chrome, 50% on icon affordances. Adding a middle radius softens the contrast between angular vehicle geometry and chrome.

Don't soften the masthead from near-black {colors.masthead} (#1a1a1a) to a mid-gray. The high-contrast against the cream-toned photography is intentional — the bar needs to disappear-or-frame the imagery cleanly, not sit as a mid-tone band that competes with the vehicle.

Known Gaps

• Live extraction blocked: the bun run design:extract pass for jeep.com was rejected by Akamai bot-protection rules during capture, returning an "Access Denied" page rather than the live marketing chrome. The token values in this file are inferred from publicly-known Jeep brand identity and visual conventions rather than measured byte-for-byte from a live render. Verify any specific hex / px against the live site before shipping production code.
• Color frequencies: because the extraction was blocked, the per-color frequency breakdowns (text / bg / border counts) that anchor most DESIGN.md ## Colors entries are not available for Jeep. The colors listed here are mapped semantically rather than measured.
• Hover and focus states: the full interaction state matrix (button hover, focus rings, active press, disabled tints) is not represented; the live page render would need a fresh capture to surface those states.
• Form input error states: form chrome (text-input, validation, error styling) is not captured in this file.
• Dark mode: the captured marketing surface is light-only. A dark variant likely exists in the Jeep dealer-portal product but is not represented here.
• Motion: the hero photography is typically delivered as a continuously-looping video; easing curves, loop duration, and crossfade timing are not represented in the static spec.
• Sub-brand surfaces: the Wrangler, Gladiator, Grand Cherokee, and Compass sub-brands each carry slightly distinct band treatments on dedicated landing pages that are not enumerated here.
• The full inventory / Build & Price chrome: the localized inventory and configurator flows render post-ZIP and use a richer filter chrome that is not visible in the public marketing surface.