---
version: alpha
name: "Royal Enfield"
description: "Dark cinematic canvas anchored by a single forge-red accent, Montserrat utility text alongside the proprietary Guardian Sans, and an uncompromising flatness that channels heritage metalwork over digital polish"

colors:
  # Canvas
  background: "#212529"
  surface: "#1a1d20"
  surface-light: "#ffffff"

  # Ink
  ink: "#ffffff"
  ink-on-light: "#212529"
  ink-secondary: "#b0b3b8"

  on-background: "#ffffff"
  on-surface: "#ffffff"
  on-primary: "#ffffff"

  # Brand accent — RE Forge Red, hover/active converge to same hue
  primary: "#da291c"
  primary-hover: "#b82217" # was rgb(184,34,23) — darkened shift on interaction

  # State
  text-hover: "#da291c"
  focus-ring: "#0a84ff" # was rgba(0,123,255,0.25) — Google format requires opaque hex

  # Borders
  border: "#ffffff"
  border-muted: "#3a3d41"

  # Shadow tints
  shadow-soft: "#000000"

typography:
  display-hero:
    fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 55px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.5px
  display:
    fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  heading-section:
    fontFamily: "Guardian Sans, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.17
    letterSpacing: 1.2px
  heading-sub:
    fontFamily: "Guardian Sans, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 1px
  body-large:
    fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: 0px
  body:
    fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  nav-link:
    fontFamily: "Guardian Sans, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.29
    letterSpacing: 0px
  button-ui:
    fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.29
    letterSpacing: 0px
  label-caps:
    fontFamily: "Guardian Sans, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 1px
  caption:
    fontFamily: "Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 4px
  circle: 9999px

components:
  button-primary:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 35px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 35px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 35px
    border: 1px solid {colors.border}
  button-ghost-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 35px
  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 12px 20px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  card-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px
    border: 1px solid {colors.border}
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px
    borderColor: "{colors.focus-ring}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
---

# Royal Enfield Design System

## Overview

Royal Enfield's digital presence is a direct expression of its motorcycles: dark, unhurried, and built on the confidence of a brand that has been casting engines since 1901. The homepage opens on a close-up of deep racing green bodywork — a macro study of paint gloss, chrome badges, and the Royal Enfield medallion — with the "Flying Flea" wordmark set in white at the lower left, accompanied by a lone ghost button. Nothing competes for attention. The visual hierarchy is simple because the photography is doing all the heavy lifting, and the design system knows it.

The canvas is `{colors.background}` — a near-black Bootstrap charcoal (`#212529`) rather than a pure black, which gives the site a slightly warmer, industrial darkness rather than the cold pitch of luxury automotive brands. On this ground, the Forge Red (`{colors.primary}`) operates as the sole chromatic accent: it appears in the logotype wordmark, in link-hover transitions, and in carousel pagination dots. A single color, used three times in the viewport, yet unmistakably in command. The typography pairs Montserrat — a geometric sans-serif available on Google Fonts — with the proprietary Guardian Sans used for section headings, navigation, and capitalize-cased labels. Together they split duties cleanly: Montserrat handles display drama and body text; Guardian Sans handles institutional tone and wayfinding.

What sets Royal Enfield apart from its motorcycle-brand peers is the refusal of UI decoration. There are no drop shadows, no gradient overlays on photography, no glassmorphism, no floating elements. Instead, depth is managed through editorial photography and a tight motion system: transitions at 0.3s ease for hero media and 0.6s ease for buttons and navigation panels. The `border-radius` system is effectively binary — `0px` for all structural containers and interactive elements, `20px` for a handful of content-panel cards, and `50%` for circular avatars. Buttons are ghost rectangles with `1px solid #ffffff` borders on dark surfaces, flipping to RE Red fill on hover — a utilitarian directness that reads like the toggle on an old British motorcycle.

**Key Characteristics:**
- Near-black charcoal (`{colors.background}`) as canvas — warmer and more grounded than pure black
- RE Forge Red (`{colors.primary}`) as the sole chromatic accent — logo, link hover, and pagination only
- Montserrat bold at 55px for hero displays; no custom display typeface
- Guardian Sans at 500 weight for section headings with 1–1.2px letter-spacing — institutional, structured
- Zero border-radius on all interactive components — flat-tooled aesthetic
- Ghost buttons (`1px solid {colors.border}`) with RE Red fill on hover — directional, unembellished
- Full-bleed macro motorcycle photography as the primary compositional device
- Linear gradients used exclusively as edge vignettes to allow text legibility over imagery
- Motion system at two speeds: 0.3s ease (media transitions) and 0.6s ease (interactive components)
- No box shadows — depth comes from photography, not CSS elevation
- 8px base spacing unit producing a disciplined but not rigid scale
- Navigation links shift from white to `{colors.primary}` on hover — confirming interaction without drama

## Colors

### Canvas
- **Gunmetal Charcoal** (`{colors.background}`): The primary canvas — near-black Bootstrap gray `#212529` used across navigation, hero backgrounds, and dark section panels. Slightly softer than pure black, it adds warmth that references aged metal and oiled leather.
- **Deep Charcoal** (`{colors.surface}`): Slightly darker `#1a1d20` used for secondary surfaces, cards, and the navigation bar itself, creating a subtle layering within the dark system.

### Brand Accent
- **RE Forge Red** (`{colors.primary}`): The definitive Royal Enfield red — `#da291c`. Appears in the logotype wordmark, all link hover states (white and black links alike), carousel dot active state, and button hover fills. Its presence is always purposeful and never diluted.
- **Primary Hover** (`{colors.primary-hover}`): A deeper red `#b82217` for pressed/active button states, providing tactile feedback depth.

### Text Scale
- **Primary White** (`{colors.ink}`): All primary text on dark surfaces — navigation links, hero headlines, button labels, body copy on dark panels. Consistent, unqualified white.
- **Ink On Light** (`{colors.ink-on-light}`): `#212529` for text when rendered on white (`{colors.surface-light}`) sections — the canvas dark recycled as body text.
- **Secondary Ink** (`{colors.ink-secondary}`): `#b0b3b8` for metadata, captions, and secondary navigation elements.

### Surfaces
- **White Surface** (`{colors.surface-light}`): Pure white sections for product specifications, feature grids, and editorial content below the dark hero zones.

### Borders
- **White Border** (`{colors.border}`): `1px solid #ffffff` — the default ghost button border and input outline on dark surfaces.
- **Muted Border** (`{colors.border-muted}`): `#3a3d41` for structural dividers within dark panels, separating sections without contrast drama.

### Interactions
- **Text Hover** (`{colors.text-hover}`): All link hover states converge on RE Forge Red — white nav links, black body links, and red links all hover to `{colors.primary}` with underline.

## Typography

### Font Families
- **Primary Display & Body**: `Montserrat` — a Google Fonts geometric sans used across display headings (weight 700), body text (weight 400), and UI labels. Self-hosted as `montserrat-regular.woff`.
- **Institutional / Headings**: `Guardian Sans` — proprietary sans-serif in Medium and SemiBold cuts. Used for section headings, navigation, and capitalize-cased labels. Self-hosted as `guardiansans-medium.woff`, `guardiansans-semibold.woff`. Closest Google Font substitute: Barlow SemiCondensed or Raleway.
- **Icon Fonts**: `reicons.woff` and `royalenfield-icon.woff` for proprietary UI iconography.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 55px Montserrat Bold — hero carousel model names and campaign headlines |
| `display` | 28px Montserrat Bold — feature section headings, motorcycle model titles |
| `heading-section` | 24px Guardian Sans Medium, 1.2px tracking — section anchors with institutional weight |
| `heading-sub` | 20px Guardian Sans Medium, 1px tracking — sub-section dividers and card titles |
| `body-large` | 18px Montserrat Regular — lead paragraphs and feature descriptors |
| `body` | 15px Montserrat Regular — standard body text, product descriptions |
| `nav-link` | 14px Guardian Sans Medium — primary navigation: Motorcycles, Locate Us, Rides, etc. |
| `button-ui` | 14px Montserrat Regular — CTA button labels ("Explore") |
| `label-caps` | 14px Guardian Sans Medium, 1px tracking — capitalize-cased structural labels |
| `caption` | 12px Montserrat Regular — image credits, legal text, metadata |

### Principles
- **Two-family division**: Montserrat carries display energy and body readability; Guardian Sans supplies structural authority. Neither crosses into the other's domain.
- **Capitalize over uppercase**: Guardian Sans labels use `text-transform: capitalize` rather than `uppercase` — a slightly more approachable register than the full-uppercase notation common in automotive design.
- **Letter-spacing on institutional text**: 1–1.2px tracking on Guardian Sans at 20–24px creates the engraved-signage quality associated with heritage brand systems.
- **Weight as signal**: Montserrat 700 is display; Montserrat 400 is information. The two weights share a clear role boundary — heavy for hero moments, regular for communication.
- **No display typeface**: Unlike Triumph (DIN2014) or BMW (BMWTypeNextLatin), Royal Enfield uses Montserrat — a widely available web font — as its display voice. The brand identity comes from the palette and photography, not a proprietary typeface.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Royal Enfield's spacing is generous at the section level (64–96px vertical padding between hero zones) and compact at the component level (8–24px internal padding). This creates a readable breathing rhythm: wide open at the editorial scale, precise at the functional scale.

### Grid & Container
- Max content width: approximately 1350px, centered with auto margins
- Hero: full-viewport-width, near-full-height, photography fills the frame
- Product grid: 4-up thumbnail carousel below the hero, full-bleed edge-to-edge
- Content sections: alternating dark and white zones, each claiming full width
- Navigation: fixed-top bar at approximately 50px, sitting above all content

### Whitespace Philosophy
- **Photography as whitespace**: The macro-photography hero sections need no padding rationale — the subject matter creates its own breathing room. Text is positioned as a minimal overlay, not a competing layer.
- **Dark panels, tight rhythm**: Within dark sections, card grids use 7–8px gutters — reminiscent of vintage British print layouts where economy of space reflects craft economy.
- **Section transitions**: The shift between dark and white zones is abrupt and deliberate. No gradient fade between sections — the cut is sharp, like a page turn in a brand catalogue.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All content surfaces, navigation bar, cards |
| Vignette Overlay | `linear-gradient(to right, rgba(0,0,0,0.25) 0, rgba(0,0,0,0) 100%)` | Left-edge image vignette for hero carousel text legibility |
| Bottom Fade | `linear-gradient(rgba(0,0,0,0) 0, rgba(0,0,0,0.5) 100%)` | Bottom-edge photo fade beneath overlay text |
| Focus Ring | `rgba(0,123,255,0.25) 0 0 0 0.2rem` — rendered as `{colors.focus-ring}` | Input focus accessibility state |

**Shadow Philosophy**: Royal Enfield uses zero box shadows. The site is completely flat in the CSS elevation sense — no cards float, no panels lift, no nav casts depth. Dimensionality comes entirely from the three-dimensionality of the photography: the chrome reflections, the depth of field, the specular highlights on the petrol tank. The CSS refuses to compete with the photography's inherent depth.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, cards, containers, inputs, panels — the overwhelming default |
| `sm` | 4px | Modal dialogs and rare UI overlays where the platform framework (PrimeReact) introduces softening |
| `circle` | 9999px | Circular avatar images and carousel pagination dots |

The system is effectively binary: flat rectangular for all brand-authored elements, circle for representational elements (avatars, dot indicators). The `20px` value detected on `div` elements belongs to PrimeReact component internals, not Royal Enfield's authored design language.

## Components

The complete component spec lives in the `components:` token block above.

### Buttons

- **`button-primary`** — White-fill rectangle (`{colors.surface-light}`, black text) used as the "Explore" CTA on white-surface sections. Sharp corners, minimal padding, Montserrat Regular 14px. On hover: fills with `{colors.primary}` RE Red, text inverts to white.
- **`button-ghost`** — Transparent fill with `1px solid {colors.border}` border on dark surfaces. The standard dark-canvas CTA. Same hover behavior: RE Red fill. This is the dominant button pattern on the dark hero.
- **`button-primary-hover` / `button-ghost-hover`** — Both converge on RE Forge Red (`{colors.primary}`) on hover, unifying the interaction signal regardless of surface context.

### Cards
- **`card`** — Dark surface, zero radius, no shadow. Used for product thumbnails, ride event listings, and motorcycle model cards in the grid below the hero.
- **`card-light`** — White surface variant for specification sections and editorial content on light zones.

### Navigation
**`nav-bar`** — Deep charcoal (`{colors.surface}`) background at fixed-top. Links in Guardian Sans Medium 14px, white, no decorative underline. On hover, links shift to `{colors.primary}` RE Red. Logo wordmark in the same red at top-left. Right-side icons: Login, search, and region selector (flag + language code).

### Inputs
**`input`** — Transparent background, `1px solid {colors.border}` white border, Montserrat 15px, white text. No radius. Focus state adds a blue glow ring per browser default. Used primarily in search overlays and dealer-locator forms.

### Hero Carousel
Full-bleed automotive macro photography, full-viewport-height. Model name in `{typography.display-hero}` white at lower-left, a ghost CTA button below it. Navigation arrows as white chevrons at left/right edges. Pagination dots at bottom-center — inactive in white, active in `{colors.primary}`.

## Do's and Don'ts

### Do
- Use `{colors.background}` (`#212529`) as the dark canvas — not pure black; the warmth matters
- Apply RE Forge Red (`{colors.primary}`) only to the logo wordmark, link hover states, active pagination, and button hover fills — three uses maximum per viewport
- Use ghost buttons (`1px solid {colors.border}` with transparent background) as the primary CTA on dark surfaces
- Let macro close-up motorcycle photography carry visual weight — text is a label, not a story
- Apply `{typography.heading-section}` with 1.2px letter-spacing for section anchors — the tracking creates the heritage signage quality
- Keep `{rounded.none}` on all authored interactive elements — the flat tooled aesthetic is intentional
- Use Montserrat Bold at the `{typography.display-hero}` scale for model names and hero headlines
- Apply transition durations of 0.3s ease for media and 0.6s ease for interactive components

### Don't
- Don't introduce gradients as backgrounds or decorative fills — gradients exist only as photography vignettes
- Don't use RE Red (`{colors.primary}`) as a card background, section fill, or decorative element — one accent used many times loses authority
- Don't add box shadows — the system is CSS-flat by deliberate choice
- Don't apply `border-radius` greater than `{rounded.sm}` (4px) to any button or card — the 20px radius in the codebase belongs to the PrimeReact framework, not the brand
- Don't use Montserrat Regular for hero headlines — display sizes require weight 700 to read with authority on photographic backgrounds
- Don't center-align body text — Royal Enfield uses left-aligned layouts consistently; centered text reads as decorative, not editorial
- Don't introduce additional accent colors alongside RE Red — the monochromatic red-on-dark system depends on that color's scarcity

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | ≤375px | Single-column, hero text at ~28px, stacked CTAs |
| Mobile | 376–480px | Single-column, compressed hero overlay |
| Tablet | 768–1023px | 2-column product grid, navigation condenses |
| Desktop | 1024–1365px | Full 4-up product carousel, horizontal nav |
| Large Desktop | ≥1366px | Max-width container centered, hero at full 55px display |

*Royal Enfield ships 45 active breakpoints — an unusually dense responsive grid reflecting the range of global markets (India, USA, UK, Southeast Asia) at varied device widths.*

### Touch Targets
- Ghost CTA buttons: `padding: 10px 35px` on 14px text creates approximately 34px height — supplemented with implicit touch-area expansion on mobile
- Navigation links: horizontal spacing provides adequate tap areas; collapsed to hamburger on mobile
- Carousel arrows: rendered as full-zone tappable overlays, not icon-sized targets

### Collapsing Strategy
- **Navigation**: 8-item horizontal bar collapses to hamburger on tablets and below; secondary utility links (Login, search, region) move into the mobile drawer
- **Hero**: Full-bleed maintained at all breakpoints; `object-fit: cover` preserves photographic composition; text overlay repositions to bottom-left on mobile
- **Product grid**: 4-up carousel collapses to 2-up on tablet, single-column swipeable on mobile
- **Typography**: 55px hero scales to 28–35px on mobile; tracking values maintained; weight does not change

### Image Behavior
- All hero photography uses `object-fit: cover` to maintain full-bleed at every viewport
- Edge vignette gradients are applied in CSS, not baked into source images, allowing responsive adaptation
- Product thumbnail images maintain aspect ratio within card containers using `object-fit: cover`

---

## Agent Prompt Guide

### Quick Color Reference
- Background (dark canvas): `{colors.background}` — `#212529`
- Surface (cards/nav): `{colors.surface}` — `#1a1d20`
- Primary text: `{colors.ink}` — `#ffffff`
- Secondary text: `{colors.ink-secondary}` — `#b0b3b8`
- Brand accent: `{colors.primary}` — `#da291c`
- Border (ghost buttons): `{colors.border}` — `#ffffff`
- CTA on hover: `{colors.primary}`

### Example Component Prompts

- "Create a full-bleed hero section with background `{colors.background}`. Layer a close-up motorcycle photograph at 100vw × 90vh using `object-fit: cover`. Apply a left-edge vignette with `linear-gradient(to right, rgba(0,0,0,0.25) 0, rgba(0,0,0,0) 100%)`. Overlay at bottom-left: model name in Montserrat Bold 55px, `{colors.ink}`, `line-height: 1.1`. Below it, a ghost CTA button: `background: transparent`, `border: 1px solid {colors.border}`, `color: {colors.ink}`, `padding: 10px 35px`, `border-radius: 0px`, Montserrat Regular 14px. Button hover: `background: {colors.primary}`, `color: {colors.on-primary}`, transition 0.6s ease."

- "Design a motorcycle model card on `{colors.surface}` background, zero radius, no shadow. Top half: product photograph at 16:9. Bottom: model name in Montserrat Bold 21px, `{colors.ink}`. Descriptor in Montserrat Regular 14px, `{colors.ink-secondary}`. Below: a ghost CTA button (Explore →). Internal padding 20px. No border on the card itself."

- "Build a top navigation bar at `{colors.surface}` background, fixed-top, ~50px height. Left: Royal Enfield wordmark in `{colors.primary}` red. Center: primary links in Guardian Sans Medium 14px, `{colors.ink}` — Motorcycles, Locate Us, Rides, Accessories, Apparel, Promotions, Our World, Support. Right: Login, search icon, region flag. All links hover to `{colors.primary}` with `text-decoration: underline`. Transition 0.6s ease."

- "Create a section heading block: full-width background `{colors.background}`, padding 48px 32px. Eyebrow label in Guardian Sans Medium 14px, `{colors.ink-secondary}`, `letter-spacing: 1px`, `text-transform: capitalize`. Main heading in Guardian Sans SemiBold 24px, `{colors.ink}`, `letter-spacing: 1.2px`, `line-height: 1.17`. Sub-copy in Montserrat Regular 15px, `{colors.ink-secondary}`, `line-height: 1.20`. No decorative lines or dividers."

- "Design a 4-up product carousel on `{colors.background}`. Each card: `{colors.surface}` background, `border-radius: 0px`, no shadow. Photo at top (3:2 ratio). Below: motorcycle name Montserrat Bold 18px white, category label Guardian Sans Medium 12px `{colors.ink-secondary}`. Bottom: pagination dots — inactive `{colors.border}`, active `{colors.primary}`, 8px diameter, `border-radius: 9999px`, 8px gap."

### Iteration Guide

1. Start with `{colors.background}` as the canvas — the charcoal warmth is the foundation; never swap it for pure black
2. RE Forge Red (`{colors.primary}`) gets exactly three roles: logo wordmark, link/button hover, active indicator. Add a fourth use and the scarcity breaks down
3. Ghost buttons on dark surfaces (`border: 1px solid {colors.border}`, transparent fill) are the brand's native CTA shape — fill with `{colors.primary}` only on hover, never by default
4. Typography authority comes from weight contrast: Montserrat 700 for everything the user reads first, Montserrat 400 for everything that supports it. Guardian Sans handles the institutional layer
5. Photography is the depth system — if a section needs perceived dimensionality, add a photograph; if it needs a shadow, reconsider the layout
6. `border-radius: 0px` is the authored default. Any rounded corner in the codebase came from the PrimeReact component library, not the design intent — don't propagate it
7. Motion runs at 0.3s ease for imagery and 0.6s ease for components — slower than fashion brands, deliberately unhurried

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Royal Enfield. Brand names and trademarks belong to their respective owners.