# Honda Product UI/UX Design Pattern Standard

**Client:** Honda · **Brand:** RoboTaxi (Honda 0 Series)
**Purpose:** Reusable design law & pattern language for Honda-themed digital products.
**Role:** Part of a 3-tier brand model — this is the law (tier 2).

> The 3-tier model:
> 1. `agent_skills/params/honda.yaml` — parametric values (hex codes, font names). Single source.
> 2. **This document** — reusable design law (principles, patterns, rationale). Cross-project IP + Metis KB.
> 3. `flow_docs/J2_internal_design/_common/theme-tokens.md` — this project's concrete token instantiation.
>
> No duplication: tier 3 cites this standard; this standard references tier 1 for raw values.

**Sources:** Honda Design Guideline images `honda-design-01..10.png` (principles/rationale) +
`flow_docs/UI_UX_Specification.md` (implemented layout & component architecture) +
`src/frontend/tailwind.config.js` (verified tokens). This document supersedes and consolidates
`UI_UX_Specification.md` as the single Honda design authority.

---

## 1. Color System

**Source images:** `honda-design-01.png`, `honda-design-02.png`, `honda-design-03.png`

### 1.1 Primary brand color

Honda red is the defining accent. Reference `honda.yaml` for the exact hex value. Usage rules:

- **Primary CTAs:** solid red background, white foreground text. Never use red for non-interactive decoration.
- **Active/selected states:** red background or red left-border accent (the "red tick" pattern).
- **Focus rings:** red ring with 2px width, 1px offset on interactive elements.
- **Subtle red:** tinted background (`#FDEAEC` equivalent) for badges, hover states, and informational callouts.

### 1.2 Neutral palette

- **Ink (text):** near-black, for body text and headings.
- **Muted ink:** medium gray, for secondary text, labels, and placeholders.
- **Surface tertiary (`#F1F3F5`):** near-white gray, for table header fills and subtle backgrounds.
- **Surface alt (`#F8F9FA`):** off-white app background.
- **Line (borders):** light gray, for card borders, dividers, and table rules.
- **Surface alt:** off-white, for alternating rows and secondary surfaces.

### 1.3 Semantic colors

- **Active/positive:** green for statuses "Active", "Online", "BUILT".
- **Inactive/disabled:** gray for "Inactive", "Offline".
- **Error/destructive:** red for validation errors, delete actions, "ACCESS_DENIED".
- **Warning:** amber for security findings, deviation tags, "live wiring in progress".

---

## 2. Typography

**Source images:** `honda-design-04.png`, `honda-design-05.png`

### 2.1 Typeface stack

Reference `honda.yaml` for the font family names. General principles:

- **Display/headings:** geometric sans-serif (Space Grotesk) — used for page titles, KPI values, brand name.
- **Body:** clean sans-serif (Inter) — used for paragraphs, table cells, form labels, buttons.
- **Monospace:** system monospace stack — used for file paths, code, technical data.

### 2.2 Scale

- Headings: display font, bold, tracking tight.
- KPI values: display font, 3xl (30px), bold.
- Body text: 14px base, 1.5 line-height.
- Small text: 13px for secondary content, 12px for metadata.
- Captions: 11px for file sizes, timestamps, version numbers.
- Micro: 10px uppercase for badges, labels, status pills.

### 2.3 Uppercase conventions

- Section labels, badge text, and status pills use uppercase with letter-spacing.
- Navigation labels use sentence case (not uppercase).

---

## 3. Spacing & Layout Rhythm

**Source images:** `honda-design-06.png`, `honda-design-07.png`

### 3.1 Base spacing unit

8px base grid. Common spacing tokens: 4px (micro), 8px (tight), 12px (standard gap), 16px (section padding), 24px (page padding), 32px (section separation).

### 3.2 Card padding

- Content cards: 16px (p-4) for standard content, tables, lists.
- Form cards: 24px (p-6) — forms need more breathing room.
- KPI cards: 20px (p-5) — tight but impactful.

### 3.3 Layout rhythm

- Page header → content: 32px gap.
- Between sections: 40px gap.
- Between related elements within a section: 16px gap.
- Grid gutters: 16px on standard 4-column grids.

### 3.4 Border radius

- Cards: 8px (rounded-lg).
- Buttons: 6px (rounded-md).
- Inputs: 6px (rounded-md).
- Badges/pills: full round (rounded-full).

---

## 4. Buttons & Controls

**Source images:** `honda-design-08.png`

### 4.1 Button variants

- **Primary:** solid Honda red background, white text, hover darkens.
- **Secondary:** white background, gray border, ink text, hover shows light gray background.
- **Ghost:** transparent, ink-muted text, hover shows light gray background. Used for icon-only actions.
- **Danger:** red-tinted background for destructive actions (delete, deactivate).

### 4.2 Button sizing

- Standard: 40px height, 16px horizontal padding.
- Compact: 32px height, 12px horizontal padding.
- Icon-only: 32px square.

### 4.3 Input styling

- Height: 40px (h-10).
- Border: 1px line color, 6px radius.
- Focus: 2px Honda red ring with 1px offset.
- Invalid: red border, no ring (ring overrides border color).
- Disabled: 50% opacity, not-allowed cursor.

### 4.4 Select (dropdown)

Native `<select>` uses `appearance-none` to strip OS chrome. A custom chevron icon is positioned on the right with `pointer-events-none`. Focus ring matches the input pattern. This preserves native ARIA, keyboard navigation, and mobile picker behavior without custom dropdown implementation.

---

## 5. Iconography

**Source images:** `honda-design-09.png`

### 5.1 Icon library

Use lucide-react for all icons. Sizes: 16px (h-4 w-4) standard, 20px (h-5 w-5) for nav items, 14px (h-3.5 w-3.5) for inline/file icons.

### 5.2 Icon color

Icons inherit the text color of their container (currentColor). Use muted ink for secondary actions; Honda red for active/selected nav items; semantic colors for status indicators.

### 5.3 Icon + label pattern

Nav items in sidebar: 20px icon left-aligned, followed by label text. Action buttons: icon 14px, optional text label at 11px. File lists: icon 14px, monospace path at 13px.

---

## 6. Imagery

**Source images:** `honda-design-10.png`

### 6.1 Honda 0 Series vehicle

The Honda 0 Series vehicle render is the primary brand visual. Stylized renders only — real press assets require licensing. Used sparingly on login/landing screens.

### 6.2 Licensing note

These design guideline images are internal reference only. Real Honda press/marketing assets require explicit licensing from Honda Motor Co., Ltd. Do not use reference images in externally published material without clearance.

---

## 7. Motion

### 7.1 Principles

Animation serves comprehension, not spectacle. Use CSS transitions (Tailwind `transition-colors`, `transition-opacity`) for state changes. Custom keyframes only for deliberate entrance animations.

### 7.2 Reduced motion

Always honor `prefers-reduced-motion: reduce`. When active: skip all animations, show content instantly, reduce or eliminate timed auto-advance. The `animate-fade-in` utility should degrade to instant display.

### 7.3 Common transitions

- Button hover: 150ms background-color transition.
- Dropdown open: fade-in (opacity 0→1, 200ms).
- Table loading: 200ms opacity transition (dim existing rows).
- Page enter: fade-in (opacity 0→1, 300ms).

---

## 8. Reusable Component Patterns

### 8.1 Card

Standard container: `rounded-lg border border-line bg-white shadow-card`. No default padding — consumer applies p-4/p-5/p-6 as needed. Accent variant adds a 3px Honda red top border (`card-accent`). Use for content sections, forms, KPI tiles, and info panels.

### 8.2 StatCard (KPI tile)

Card with p-5 padding. Label: 12px uppercase, muted ink. Value: display font, 3xl (30px), bold, ink. Subtitle: 13px, muted ink. First KPI in a row uses the accent variant.

### 8.3 Table

Header: `border-b border-line bg-surface-tertiary` with `text-[11px] font-semibold uppercase tracking-wide text-ink-muted`. Padding: `py-2.5` on th cells. Body: horizontal dividers `border-b border-line/70`. Data rows: hover shows `bg-surface-alt` (Gray alpha 5). Selected rows: Honda red alpha tint (`brand.redTint`). Empty state: centered message with muted styling.

### 8.4 Status badge

`rounded-full border px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide`. Colors match semantic palette. Always paired with a matching icon (CheckCircle2 for active, XCircle for inactive).

### 8.5 Badge/pill

`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-bold uppercase`. Used for deviation tags, demo markers, role labels.

### 8.6 File section (INPUT/OUTPUT)

For document artifact displays: `border-2` with colored border (blue-200 for INPUT, emerald-200 for OUTPUT), tinted background. File paths at 13px bold monospace. Larger bullet dots for visual prominence. Distinct from secondary beats which use `border` (1px) with subtler styling.

### 8.7 Navigation item

Sidebar: collapsible tree groups on a dark base (`surface.darker`). Group header: icon + label + chevron. Child link: `block px-3 py-2 rounded-md text-sm`. Active child: `#CC0000` left border (3px) + white text + red-alpha background. Inactive: gray-alpha text, hover raises opacity.

### 8.8 Dialog/Modal

Uses `@radix-ui/react-dialog` with Portal (renders to document.body). Overlay: `fixed inset-0 z-[100] bg-black/40`. Content: `fixed z-[101]` centered with `-translate-x-1/2 -translate-y-1/2`, white background, border, shadow-pop. Must be rendered outside CSS grid containers to avoid stacking context conflicts. Header with title + close button; scrollable body; footer with contextual note.

---

## 8A. Global Layout Framework

**Source:** `flow_docs/UI_UX_Specification.md` (implemented app). Every screen inherits three zones.

### 8A.1 Left navigation sidebar
Fixed-width dark container (`surface.darker`). Top: **HONDA** wordmark + *The Power of Dreams* slogan.
Collapsible tree groups (Dashboard, Ride/Vehicle/Passenger/User/Promotion Management, Customer Support,
Configuration). Active item: white text + 2–3px Honda red (`#CC0000`) left border. Inactive: gray-alpha
50–70 text with hover opacity transition.

### 8A.2 Top application bar
White background, low-emphasis bottom border. Contains breadcrumb, real-time monospace clock,
deployment version, and user profile avatar + operator name.

### 8A.3 Main content viewport
Flexible grid canvas on `surface.alt`. All functionality encapsulated in cards with standardized
corner radius and soft multi-layer elevation (`card` shadow). Card gaps & padding: **24px**.

## 8B. Screen Layout Patterns

**Source:** `flow_docs/UI_UX_Specification.md`.

- **Search / filter / data table:** page title left + primary actions right; unified filter bar (search
  + clear on the left, advanced-search toggle + refresh on the right); table header on `surface.tertiary`
  with uppercase labels + sort indicators; row actions (Lock, Power, Edit, Delete) with hover tooltips.
- **Forms & profiles:** two-column — left avatar/media card + upload + validation rules; right general-info
  form with responsive two-column field grid, radios, toggles. Utility cards for Reset Password / metadata.
  Footer: Cancel (secondary) + Save (primary), **48px** button height.
- **Split-screen auth gateway:** 50/50 — left white credential form (Honda branding, forgot-password,
  full-width sign-in); right `surface`-dark brand showcase (grid overlay + EV flagship render).
- **Vehicle telemetry dashboard:** local tabs (Honda-red underline on selected); three columns
  (telemetry cards + circular battery/speed gauges · specifications key-value · live map); 2×2 camera grid
  with distinct offline (gray + disabled icon + error) and live (stream + latency + monospace labels) states.
- **Historical telemetry:** 50/50 split — telemetry table (timestamp, coordinates, speed, heading, battery;
  date filter, export, pagination) + interactive route map (paths, warning markers, layer/zoom controls).
- **Relational entity mapping:** header with title + Delete-Group (danger: red outline + red text);
  35/65 split — metadata form (required indicators, focus rings, primary action) + relational table
  (assigned assets, refresh, Assign Vehicle; status badges Available→blue, On Trip→green, Maintenance→gray).
- **Fleet operations center:** full-screen map; floating left panel (filters All/On-Trip/Available/Offline,
  search, asset cards with ID/model/last-seen/status + Details/See-on-Map); marker telemetry overlay
  (name, model, status, battery, range, speed; View Camera / Ride Details).

## 8C. Production Token Facts (verified)

- **Typography:** standard UI (Inter) for nav/forms/labels/content; **monospace (SF Mono / Roboto Mono)**
  for coordinates, timestamps, latency, speed, telemetry.
- **Tactility:** **48px** minimum touch target (buttons, tabs, icons, table actions).
- **Grid:** 24px card gaps and internal padding.
- **Color tokens:** Attention Green (success/healthy), Attention Blue (available/info), Caution Red
  (alerts/failures/low battery), Honda Red `#CC0000` (brand actions, focus, active nav). See `theme-tokens.md`.
- **Row selection:** Honda-red alpha tint + subtle background emphasis + clear focus indication.

---

## 9. Interpretation Notes

Rules in this document are interpreted from the Honda Design Guideline reference images. Where a guideline image is ambiguous or silent on a specific pattern, the rule is tagged `[ASSUMPTION]` to flag it for Honda review. No rule is presented as a Honda requirement without source evidence.

**Tagged assumptions:**
- Honda red is `#CC0000` — now **verified** against the implemented app (`src/frontend/tailwind.config.js`) and `flow_docs/UI_UX_Specification.md`, superseding the earlier `#E40521`/`#E60012` approximations. Reference `honda.yaml` for the canonical value. `[HONDA-CUSTOMIZATION]`
- [ASSUMPTION] Spacing rhythm (8px base grid) inferred from card layouts and form spacing in `honda-design-06.png`, `honda-design-07.png`.
- [ASSUMPTION] Border radius values (6px, 8px, full) inferred from button and card styling in `honda-design-08.png`.
- [ASSUMPTION] Type scale (display/body/monospace stack) inferred from heading and body text in `honda-design-04.png`, `honda-design-05.png`.
- [ASSUMPTION] Motion constraints (150ms–300ms transitions, reduced-motion) are accessibility best practice applied to Honda's clean aesthetic — not directly sourced from the guideline images.

---

**For Metis KB:** This document is the content the G6 gate checks against. Upload it to the Metis TextIQ knowledge base. An agent queries the KB to fact-check and refine generated J1 (screen descriptions) and J2 (theme/component/design) docs against Honda's design pattern language.