# Honda Web Design Guideline

> A consolidated visual language reverse-engineered from Honda's live global properties — colors, typography, layout, and components — captured to accelerate automated frontend code generation.

**Sources:** honda.com (US 🇺🇸) · honda.se (Europe 🇸🇪) · honda.co.jp (Japan 🇯🇵) — production CSS/HTML, captured Jul 2026.
**Regions analysed:** 3

---

## 1. Brand at a Glance

Honda's digital identity is built on a single unmistakable red, disciplined neutral grays, condensed/bold typography, and generous whitespace. Each region layers its own market flavor on top of this shared spine.

**Core principles:**

- **Honda Red is sacred** — the primary red (`#DC182D`) is reserved for the logo, primary CTAs, and key accents. It is never used for large surfaces.
- **Monochrome foundation** — near-black inks (`#1F1F1F` / `#35363B`) on white, with a ladder of neutral grays for structure.
- **Bold, condensed headlines** — strong weights and tight leading convey engineering confidence.
- **Content-forward layouts** — full-bleed hero imagery of vehicles, then modular card grids.

> **Shared spine, local dialects.** Europe (honda.se) runs a mature token-based design system ("HME") on *Proxima Nova Extra Condensed*. Japan (honda.co.jp) ships a bespoke brand typeface *HondaGlobalFont* with a cooler, more corporate palette. The US (honda.com) is a Bootstrap-derived system using a custom *"Honda"* font and pill CTAs.

**At a glance:** Red `#DC182D` · Proxima Nova Ex Cn · HondaGlobalFont · Pill & rounded CTAs · Card-grid IA

---

## 2. Color System

Values extracted directly from each site's production stylesheets.

### Core Brand 🔴

The one constant across every Honda property worldwide.

| Name | Hex | Role |
| --- | --- | --- |
| Honda Red | `#DC182D` | Primary brand · CTA · logo |
| Red Bright | `#EE1B2F` | Hover / highlight variant |
| Red Deep | `#B3121F` | Active / pressed |
| Ink | `#1F1F1F` | Primary text |
| White | `#FFFFFF` | Base surface |

### honda.se — Europe (HME design system) 🇸🇪

Honda Red primary, teal & eco-green secondaries, and a full neutral ramp.

| Name | Hex | Role |
| --- | --- | --- |
| Honda Red | `#DC182D` | Primary |
| Graphite | `#3B3B3B` | Dark accent / footer |
| Ink | `#1F1F1F` | Body text |
| Teal | `#017D75` | Secondary |
| Teal Bright | `#01948B` | Secondary hover |
| Eco Green | `#00803E` | Electrified |
| Eco Green Lt | `#7AB99B` | Eco tint |
| Gray 500 | `#757575` | Muted text |
| Gray 400 | `#979797` | Icons / borders |
| Gray 300 | `#CBCBCB` | Dividers |
| Gray 200 | `#E2E3E5` | Hairlines |
| Gray 100 | `#EFEFEF` | Surface alt |
| Paper | `#F7F7F7` | Section bg |
| Paper Cool | `#F4F3F8` | Panel bg |

### honda.co.jp — Japan 🇯🇵

Cooler, corporate charcoal/navy base with vivid category accent colors.

| Name | Hex | Role |
| --- | --- | --- |
| Charcoal | `#35363B` | Primary text (dominant) |
| Navy | `#041D41` | Brand / headers |
| Slate | `#50617A` | Secondary text |
| Gray | `#ACADAF` | Muted / borders |
| Paper | `#F6F6F6` | Section bg |
| Accent Orange | `#ED7F02` | Category |
| Accent Yellow | `#D1CD0D` | Category |
| Accent Green | `#73B53C` | Category |
| Accent Cyan | `#19B1D2` | Category |

---

## 3. Typography

Each region uses a distinct primary typeface but shares the same intent: bold, confident headings and highly legible body text.

### Proxima Nova Extra Condensed — honda.se · Europe

```
font-family: ProximaNovaExCnSbold / ProximaNovaExCnSReg / ProximaNovaExCnLight,
             Tahoma, Helvetica, Arial, sans-serif
```

**Weights:** Light 300 · Regular 400 · Semibold 600 · Bold 700

**Type scale:**

| Token | Size | Usage |
| --- | --- | --- |
| `heading-4xl` | 52px | Marketing headline |
| `heading-xl` | 36px | Section heading |
| `heading-m` | 28px | Sub-heading |
| `paragraph-l` | 20px | Lead paragraph |
| `paragraph-m` | 16px | Body |
| `supported-s` | 12px | Caption / legal |

### HondaGlobalFont — honda.co.jp · Japan

```
font-family: "HondaGlobalFontJP-Bold" / "-Regular" / "-Light", sans-serif
```

Bespoke brand typeface (JP + Latin). Root font-size 62.5% (10px base) → sizes authored in rem. Scale: 1.2 / 1.4 / 1.6 / 2.0 / 2.4 / 3.2 / 4.6 rem.

**Weights:** Light · Regular · S-Bold · Bold / ExBold

**Type scale:**

| Token | Size | Usage |
| --- | --- | --- |
| `4.6rem` | 46px | Hero headline |
| `3.2rem` | 32px | Section heading |
| `2.4rem` | 24px | Sub-heading |
| `2.0rem` | 20px | Lead |
| `1.6rem` | 16px | Body |
| `1.4rem` | 14px | Small / nav |
| `1.2rem` | 12px | Caption |

### "Honda" (custom) — honda.com · US

```
font-family: Honda, "Helvetica Neue", Arial, sans-serif
```

Bootstrap-based component layer. Uppercase, letter-spaced labels on primary CTAs (`.btn-honda-primary`). Heading weights 700–800.

---

## 4. Layout & Grid

All three regions follow a centered, max-width content column with full-bleed hero media and responsive card grids.

| Aspect | honda.com 🇺🇸 | honda.se 🇸🇪 | honda.co.jp 🇯🇵 |
| --- | --- | --- | --- |
| **Content max-width** | ~1170px (Bootstrap container) | 800 / 992 / 1024 px tiers | 1080 / 1200 / 1680 px tiers |
| **Mobile breakpoint** | 768 / 992 / 1200 px | 620 / 768 / 1024 px | 768 px primary |
| **Corner radius** | Pill CTAs + subtle cards | 3 / 5 / 10 / **25px** (pills) | 5 / 6 / **8** / 12px (rounded) |
| **Grid system** | 12-col Bootstrap | Token-based flex/grid | Custom flex, 2–4 col cards |
| **Hero pattern** | Full-bleed vehicle imagery + overlay CTA | Full-bleed + condensed headline | Carousel (slick) hero + tiles |

**Spacing rhythm:** Layouts use an 8px-based rhythm. Sections breathe with 64–88px vertical padding on desktop; cards use 16–28px internal padding. Whitespace is intentionally generous to keep vehicle photography as the hero.

---

## 5. Components

The two dominant button dialects and the ubiquitous content card, reconstructed from production class names.

### Buttons — Europe / US (pill)

- **Primary:** Honda Red background, white text, `border-radius: 100px`, uppercase — `.btn-honda-primary`
- **Secondary:** transparent background, ink border and text, pill radius; inverts to ink fill on hover

### Buttons — Japan (rounded rect)

- **Primary:** charcoal `#35363B` background, white text, `border-radius: 8px`, sentence case
- **Ghost:** transparent background, Honda Red text, gray border, `border-radius: 8px`

### Content Cards

Modular cards with a media header, title, short description, and a red text link. Category treatment via header background:

- **Standard** — neutral dark gradient header
- **Vehicles (red)** — Honda Red gradient header
- **Electrified (eco)** — eco-green gradient header signals hybrid & EV

Cards lift on hover (subtle translate + shadow) and flow in a responsive `minmax(240px, 1fr)` grid.

---

## 6. Regional Comparison

One brand, three expressions. Understanding the deltas is key to generating region-correct code.

| Dimension | US 🇺🇸 | Europe 🇸🇪 | Japan 🇯🇵 |
| --- | --- | --- | --- |
| **Personality** | Bold, sales-led | Refined, systemized | Calm, corporate, precise |
| **Primary text** | `#1F1F1F` | `#1F1F1F` | `#35363B` |
| **Brand accent** | Honda Red `#DC182D` | `#DC182D` | Navy `#041D41` + red logo |
| **Secondary accents** | Grays | Teal `#017D75`, Eco-green `#00803E` | Category set: `#ED7F02` `#D1CD0D` `#73B53C` `#19B1D2` |
| **Typeface** | "Honda" custom | Proxima Nova Ex Cn | HondaGlobalFont |
| **Button shape** | Pill | Pill (25px) | Rounded rect (8px) |
| **Tech stack cue** | Bootstrap + Akamai | AEM + HME tokens | Bespoke + slick carousel |

---

## 7. Guidance for Automated Code Generation

Turning the observed patterns into rules the codegen pipeline can apply consistently.

### Do

- Drive everything from **design tokens** (CSS custom properties) — Europe already proves this model works at Honda.
- Reserve **`#DC182D`** for logo, primary CTA, and key accents only.
- Default to a **neutral-on-white** canvas with an 8px spacing scale.
- Make **region a parameter**: font stack, accent set, and button radius switch per market.
- Keep **hero imagery full-bleed**; let vehicles carry the page.

### Avoid

- Large red fills or red backgrounds — it cheapens the mark.
- Hard-coding one region's font/radius as if global.
- Decorative gradients competing with product photography.
- Mixing pill and rounded-rect buttons within one region.

### Suggested Token Starter Set

For the POC codegen:

```css
--color-brand: #DC182D;
--color-ink: #1F1F1F;
--color-surface: #FFFFFF;
--color-surface-alt: #F7F7F7;
--radius-pill: 100px;
--radius-card: 8px;
--space: 8px;
/* plus a per-region --font-heading / --font-body pairing */
```

---

*Honda Web Design Guideline · Reverse-engineered from live properties for internal digital-transformation POC.*