--- version: alpha name: "Jeep" website: "https://www.jeep.com" description: >- A Stellantis-owned off-road brand whose marketing identity is built around the seven-slot vertical grille, full-bleed adventure photography on dust, rock, and tree-line backdrops, and a typographic voice that runs Jeep Sans across every display tier in an upright, slightly-condensed cut. The chrome trends toward near-black masthead, white below-fold canvas, and one of the most photography-heavy hero treatments in the automotive category — chromatic interest is borrowed almost entirely from the vehicle and the terrain, with the brand's own palette reduced to ink-on-canvas plus a single muted military green that surfaces on the Wrangler / Gladiator sub-brand bands. Type sits at modest weights with uppercase chips carrying small-caps duty and CTA buttons rendering square-edged at 2-4px corners. seo: title: "Jeep Design System for React — adventure photography, Jeep Sans, 14 components" metaDescription: "Jeep's marketing-site design tokens packaged for React, Next.js, and AI coding tools. Adventure photography hero, Jeep Sans display, near-black masthead, monochrome chrome with one military-green accent." highlights: - "Adventure photography as canvas — full-bleed rock, dust, and tree-line backdrops do the chromatic labor that a brand color would carry on a SaaS site" - "Seven-slot grille as brand mark — the vertical grille emblem is the only protected geometric element across the entire chrome" - "Jeep Sans display tier — an upright slightly-condensed sans with all-caps section labels and sentence-case hero h1s" - "Square-edge button geometry — primary CTAs render at 2-4px corners, matching the off-road utility aesthetic against the SaaS pill default" - "Single olive accent — a muted military green surfaces on Wrangler / Gladiator bands as the sole chromatic note outside grayscale" tags: - "Automotive" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Jeep's marketing identity is one of the most photography-dependent in the automotive category. The hero on jeep.com hands the entire viewport to a vehicle staged in its native terrain — a Wrangler hard-crawling over a rock shelf, a Grand Cherokee on a forest two-track, a Gladiator parked on a dust shoulder above the tree line. Headlines sit small relative to the photograph; the seven-slot grille and round headlamp pair carry the brand recognition before any wordmark loads. Where Hyundai softens the same convention with a corporate-editorial floor and Lexus stages its chrome on dark luxury surfaces, Jeep is the most willing of the three to disappear behind the photograph and let the vehicle plus terrain do the chromatic work. The DESIGN.md file packages this into a machine-readable spec for React tooling. Inside: a near-monochrome color palette built on near-black masthead, white canvas, and grayscale text tiers, with a single muted olive-green accent reserved for the Wrangler / Gladiator sub-brand bands; Jeep Sans across every display tier at modest weights; square-edged corner radii in the 2-4px range that match the off-road utility aesthetic; and component definitions covering the photo-fronted hero, the masthead nav, the model-card grid, and the CTA buttons. The full token surface is smaller than a comparable SaaS system would expose — by design. The chrome is intentionally thin so the photography reads first. Feed this file to Claude or Cursor and the AI reproduces Jeep's specific moves: full-bleed adventure photography as the hero, near-monochrome chrome that disappears behind the imagery, square-edged button corners matching the utility aesthetic, and the seven-slot grille protected as the brand mark. The one move worth borrowing only if your product genuinely has a photogenic protagonist is the willingness to give the canvas to photography. For most B2B SaaS surfaces the same restraint reads as undercooked, but for a vehicle marketer where rugged terrain context is the entire pitch, the chrome's restraint is the design. 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.jeep.com" title: "Jeep — official site" description: "Jeep's public US 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: "primary-color" title: "What is Jeep's primary brand color?" answer: "Jeep doesn't operate from a single chromatic voltage the way most consumer brands do — the brand mark is the seven-slot grille, and the marketing chrome is built on a near-monochrome ink-on-canvas palette. The closest thing to a brand accent is a muted military olive green that surfaces on Wrangler and Gladiator sub-brand bands, echoing the heritage palette from the brand's military-vehicle origins. Across the chrome the dominant colors are near-black on the masthead, pure white on the below-fold canvas, and a grayscale text ladder. The photography supplies every chromatic note the page needs." - id: "typography" title: "What typeface does Jeep use, and what should I use as a substitute?" answer: "Jeep runs Jeep Sans across every display tier — an upright, slightly-condensed proprietary sans that matches the utility aesthetic of the brand. Display headlines sit at modest weights with sentence-case casing, and small-caps section labels use the same family at smaller sizes. Body and nav typography sits in a neutral sans fallback stack. The closest open-source substitutes are Barlow Condensed for the display tier — the upright slight-condensation transfers cleanly — and Inter or Noto Sans for body and nav. If you need a tighter alternative for the all-caps label tier, Industry or Trade Gothic at 700 captures the same utility-vehicle voice." - id: "photography-canvas" title: "Why does Jeep give the canvas to photography instead of brand chrome?" answer: "Jeep's brand promise is terrain capability. The chromatic interest of a Wrangler on a rock shelf, a Gladiator parked above the tree line, or a Grand Cherokee on a forest two-track is the actual product story — the dust, foliage, and stone tones supply more chromatic information than any brand color could. The convention in the automotive luxury category is to stage vehicles on neutral plinths against dark studio backdrops (Lexus, Mercedes, Aston Martin); Jeep inverts the move and stages vehicles in working environments. The chrome stays out of the way so the terrain reads." - id: "radii-and-pills" title: "What is Jeep's corner-radius philosophy?" answer: "The radius scale is small-step utility. Primary buttons render at 2-4px corners, secondary chips at similar values, and the masthead bar sits at 0px square edges. There is no SaaS-default 8 / 12px middle tier, and there is no fully-rounded pill treatment on body chrome — the pill geometry would feel borrowed from a consumer-tech category that doesn't match the off-road utility aesthetic. Icons render as circles where they need to read as buttons; everything else stays angular. The geometry of the chrome echoes the geometry of the vehicles themselves." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own outdoor-brand marketing site?" answer: "Yes — the file is structured for ingestion by Claude, Cursor, or any AI tool that reads design tokens. The agent will reproduce Jeep's specific moves: full-bleed adventure photography hero, near-monochrome chrome that disappears behind the imagery, square-edged button corners, and the muted olive accent on sub-brand bands. One important caveat: the live extraction was blocked by Akamai's bot-protection rules during the capture pass, so the token values in this file are inferred from publicly-known brand identity rather than measured from a live page render. Treat the file as a high-fidelity reference rather than a byte-perfect clone target, and verify any specific value against the live site before shipping." mockups: - "marketing-hero" - "media-grid" colors: ink: "#1a1a1a" ink-deep: "#000000" ink-soft: "#333333" muted: "#666666" muted-light: "#888888" hairline: "#cccccc" hairline-soft: "#e6e6e6" surface-muted: "#f3f3f3" canvas: "#ffffff" masthead: "#1a1a1a" olive-accent: "#3a4f1f" olive-soft: "#5e6e3a" typography: display-xl: fontFamily: "\"Jeep Sans\", \"Trade Gothic\", Arial, sans-serif" fontSize: 56px fontWeight: 500 lineHeight: 60px letterSpacing: 0 display-lg: fontFamily: "\"Jeep Sans\", \"Trade Gothic\", Arial, sans-serif" fontSize: 40px fontWeight: 500 lineHeight: 44px letterSpacing: 0 display-md: fontFamily: "\"Jeep Sans\", \"Trade Gothic\", Arial, sans-serif" fontSize: 30px fontWeight: 500 lineHeight: 36px letterSpacing: 0 heading-lg: fontFamily: "\"Jeep Sans\", \"Trade Gothic\", Arial, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 30px letterSpacing: 0 heading-md: fontFamily: "\"Jeep Sans\", \"Trade Gothic\", Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 24px letterSpacing: 0 body-lg: fontFamily: "\"Jeep Sans\", \"Trade Gothic\", Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 26px letterSpacing: 0 body-md: fontFamily: "\"Jeep Sans\", \"Trade Gothic\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "\"Jeep Sans\", \"Trade Gothic\", Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 label-md: fontFamily: "\"Jeep Sans\", \"Trade Gothic\", Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 18px letterSpacing: "1px" button-md: fontFamily: "\"Jeep Sans\", \"Trade Gothic\", Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 20px letterSpacing: "1px" nav-link: fontFamily: "\"Jeep Sans\", \"Trade Gothic\", Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: 0 rounded: none: "0px" sharp: "2px" sm: "4px" full: "9999px" spacing: xs: "4px" sm: "8px" base: "12px" md: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.sharp}" padding: "14px 24px" height: "48px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sharp}" padding: "14px 24px" height: "48px" borderColor: "{colors.ink}" button-ghost: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.sharp}" padding: "14px 24px" height: "48px" borderColor: "{colors.canvas}" top-nav: backgroundColor: "{colors.masthead}" textColor: "{colors.canvas}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "16px 24px" height: "72px" nav-link: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.nav-link}" padding: "8px 12px" hero-heading: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.display-xl}" padding: "0" hero-subtitle: backgroundColor: transparent textColor: "{colors.canvas}" typography: "{typography.body-lg}" section-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: transparent textColor: "{colors.ink-soft}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.body-sm}" model-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0" uppercase-label: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.label-md}" padding: "0" olive-band: backgroundColor: "{colors.olive-accent}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "32px 24px" --- ## 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 | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 56px | 500 | 60px | 0 | Hero h1 ("Built for the trail you haven't found yet") | | `{typography.display-lg}` | 40px | 500 | 44px | 0 | Secondary display heads on feature bands | | `{typography.display-md}` | 30px | 500 | 36px | 0 | Section h2 ("All Vehicles", "Build & Price") | | `{typography.heading-lg}` | 24px | 500 | 30px | 0 | Large model-card titles | | `{typography.heading-md}` | 18px | 500 | 24px | 0 | Sub-section titles, feature card heads | | `{typography.body-lg}` | 18px | 400 | 26px | 0 | Hero sub-paragraph, section lead-paragraph | | `{typography.body-md}` | 16px | 400 | 24px | 0 | Default running text | | `{typography.body-sm}` | 14px | 400 | 20px | 0 | Captions, disclaimer text, footnotes | | `{typography.label-md}` | 14px | 700 | 18px | 1px | Small-caps section labels above hero h2s | | `{typography.button-md}` | 14px | 700 | 20px | 1px | All-caps primary and secondary button labels | | `{typography.nav-link}` | 14px | 500 | 20px | 0 | Top-nav link labels in the masthead | ### 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.