---
version: "2.0.0"
name: Proton Mainline Showroom
description: Authoritative design system for Proton non-EV and PHEV models (S70, X50, X70, X90, Saga, Persona). Features high-key daylight porcelain canvas (#F8FAFC), pure white card surfaces (#FFFFFF), solid Proton Obsidian Black CTAs (#1A1A1A, 17.4:1 contrast ratio), mechanical Oswald condensed telemetry typography, uniform brand Electric Cyan accents (◆, #0284C7), 45-degree precision diamond slider calipers, 52px slim header with official circular tiger crest, and responsive 78vw mobile infinite swipe carousels.
colors:
  primary: "#1A1A1A" # Proton Obsidian Black
  primary-hover: "#2D2D2D"
  primary-fg: "#FFFFFF"
  accent-cyan: "#0284C7" # Vivid brand accent & Tiger Fang Apex (◆)
  bg-canvas: "#F8FAFC" # Porcelain Slate page ground
  bg-surface: "#F1F5F9"
  bg-card: "#FFFFFF" # Pure Studio White card
  text-primary: "#0A0E17" # Deep Space Navy (16.2:1 against white)
  text-secondary: "#334155" # Slate Charcoal (7.1:1 against white)
  text-muted: "#475569" # Subdued Slate (5.2:1 against white)
  border-subtle: "#E2E8F0"
  border-solid: "#CBD5E1"
  border-focus: "#1A1A1A"
typography:
  font-display:
    fontFamily: "Sora, -apple-system, sans-serif"
    fontWeight: "800"
  font-body:
    fontFamily: "Work Sans, -apple-system, sans-serif"
    fontSize: "14px"
    lineHeight: "1.6"
  font-condensed:
    fontFamily: "Oswald, 'Barlow Condensed', 'Impact', -apple-system, sans-serif"
    fontWeight: "700"
    letterSpacing: "-0.01em"
  font-mono:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: "12px"
rounded:
  card: "10px"
  inner: "6px"
  button: "6px"
  badge: "4px"
---

# Proton Mainline Showroom Design System (DESIGN-PROTON-MAINLINE.md)
*Standard Specification for Proton Non-EV & PHEV Models (S70, X50, X70, X90, Saga, Persona)*
*Production Reference Implementation: https://proton-design-systems.pages.dev/showroom/*

---

## 1. Brand Essence & Visual Character
* **Core Paradigm:** High-Key Executive Precision (Porcelain Slate & Obsidian Black).
* **Target Audience:** Mainstream Malaysian automotive purchasers seeking engineering reliability, executive comfort, and transparent hire purchase numbers.
* **Canvas Philosophy:** Daylight showroom environment (`#F8FAFC`) with pure studio white card backings (`#FFFFFF`) and solid Obsidian Black accents (`#1A1A1A`). Deliberately rejects dark-mode SaaS dashboard slop, floating Gaussian glow blobs, and box-in-a-box containment cards.

---

## 2. Token Architecture

### 2.1 Color Palette & Contrast Contract (WCAG AA & AAA Compliant)
```css
[data-theme="showroom"] {
  /* Canvas & Surfaces */
  --bg-page: #F8FAFC;            /* Porcelain Slate page ground */
  --bg-header: #FFFFFF;          /* Pure White sticky masthead (52px) */
  --bg-surface: #F1F5F9;         /* Cool slate structural surface */
  --bg-card: #FFFFFF;            /* Pure studio card backing */
  --bg-card-raised: #FFFFFF;

  /* Typography (High Contrast Ratios) */
  --color-text-main: #0A0E17;    /* Deep Space Navy (16.2:1 against white) */
  --color-text-muted: #334155;   /* Slate Charcoal (7.1:1 against white) */
  --color-text-dim: #475569;     /* Subdued Slate (5.2:1 against white) */

  /* Interactive Obsidian Engine */
  --color-primary: #1A1A1A;      /* Proton Obsidian Black (17.4:1 contrast ratio against white) */
  --color-primary-hover: #2D2D2D;/* Refined charcoal hover state */
  --color-primary-fg: #FFFFFF;   /* Pure White button typography */
  --color-accent-cyan: #0284C7;  /* Vivid brand accent needle & Tiger Fang Apex (◆) */

  /* Hairline Borders */
  --color-border: #CBD5E1;       /* Neutral hairline divider */
  --color-border-hover: #1A1A1A; /* Solid focus border */
  --color-border-subtle: #E2E8F0;/* Soft surface card edge */

  /* Concentric Radius Formula */
  --radius-card: 10px;           /* Outer component card */
  --radius-inner: 6px;           /* Nested media or result frame */
  --radius-btn: 6px;             /* Touch interactive control (Modern Luxury Automotive) */
  --radius-badge: 4px;           /* Specification chip */

  /* Typography Stacks */
  --font-display: "Sora", -apple-system, sans-serif;
  --font-body: "Work Sans", -apple-system, sans-serif;
  --font-condensed: "Oswald", "Barlow Condensed", "Impact", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}
```

---

## 3. Structural Anatomies & Component Contracts

### 3.1 52px Slim Navigation Masthead
* **Height:** Exactly `52px` sticky navigation bar.
* **Brand Lockup:** Official circular Proton Malayan Tiger Crest vector SVG emblem (`32px` diameter) paired with the bold uppercase `PROTON` wordmark.
* **Anti-Clutter Rule:** No secondary sub-text ("SHOWROOM RASMI" removed).
* **Mobile Action Rule:** Header CTA button (`Tempah Pandu Uji ›`) is hidden on viewports `<768px` (`display: none`) to eliminate visual conflict and double-CTA collision with the sticky bottom action bar.

### 3.2 Unblocked Hero Stage
* Headlines, category kickers, and lead value copy sit strictly in an editorial block *above* the vehicle.
* Vehicle photography rests on its own clean, borderless canvas with grounded floor reflection lighting (`rgba(3, 105, 161, 0.08)`).
* Strictly zero text overlays, dark gradient vignettes, or floating pill buttons on top of vehicle sheet metal.

### 3.3 Tactile Exterior Color Swapper
* **Unboxed Direct Row:** Swatches sit directly on the page canvas. No isolated card container or boxed sample tray.
* **Authentic Factory Discs:** Flat 32px factory paint discs (`#193655` Marine Blue, `#1D4342` Teal Bayou, `#FFFFFF` Snow White, `#4A515A` Space Grey, `#94A3B8` Armour Silver).
* **Anti-Skeuomorphic Rule:** Strictly zero artificial white radial gradient shine bubbles (`::after` plastic marbles removed).
* **Concentric Luxury Active Ring:** Selected swatch scales to `1.12x` with a concentric double ring:
  ```css
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A0E17;
  ```
* **Finish Badge:** Paired with a clean category label and finish tag (`METALLIC`, `EKSKLUSIF FLAGSHIP`, `SOLID CLEAR`).

### 3.4 Mechanical Telemetry Dock (Dyno Sheet Typography)
* **Numbers:** Rendered in high-compression, condensed bold display typography (`Oswald`, 700 weight, 38px, `letter-spacing: -0.01em`). Replaces wide geometric sans fonts.
* **Proton Signature Element:** Preceded by the **Tiger Fang Apex (`◆`)** in uniform brand cyan (`#0284C7`).
* **Unboxed Floating Units:** Strictly zero bounding box outlines or grey pill badges around units. `PS`, `Nm`, `Kelajuan`, and `Bintang` float beside the number as plain cyan text (`font-size: 16px; font-weight: 700; color: #0284C7;`).
* **Divider:** Clean 1px hairline divider (`#E2E8F0`) separates metric from Malaysian vehicle feature description.

### 3.5 Modern Luxury CTA Button Engine (Obsidian Solid)
* **Geometry:** Solid fill (`#1A1A1A`), clean `6px` radius, `48px` touch target height.
* **Borders:** Razor-sharp 1px outer hairline border (`border: 1px solid rgba(0, 0, 0, 0.1)`).
* **Anti-Slop Rule:** Strictly zero skeuomorphic 3D bevel bottom borders (`border-bottom: 2px solid ...` prohibited) and zero vertical gloss gradients.
* **Typography & Icon:** Bold tracked 14px white type paired with a clean directional forward arrow (`Semak Kelayakan Pinjaman ›`).
* **Hover State:** Smooth background shift to `#2D2D2D` with neutral elevation shadow (`box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16)`).

### 3.6 Precision Diamond Caliper Slider Thumb
* The hire purchase loan deposit slider uses a custom 45° rotated diamond caliper thumb:
  ```css
  .calc-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: #1A1A1A;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transform: rotate(45deg);
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
  }
  ```
* Connects the mechanical `◆` motif directly to user interaction on Malaysian banking tools.

### 3.7 Responsive Carousels: Desktop Grid vs Mobile Infinite Loop
* **Mobile (<768px):** Cards calibrated to `78vw` width with clear peek affordance of the adjacent card. Infinite circular loop runs via JavaScript buffer recycling so touch-swiping never hits a wall.
* **Desktop (≥769px):** Rendered as a clean CSS multi-column grid (`display: grid; grid-template-columns: repeat(4, 1fr)`).
* **DOM Safeguard:** JavaScript clones are gated to mobile viewports only, and desktop CSS strictly enforces:
  ```css
  @media (min-width: 769px) {
    [data-clone="true"] { display: none !important; }
  }
  ```
  Guarantees desktop never displays duplicate card rows.

### 3.8 Split Visual Booking Section
* **Left Column:** Headline, value proposition copy, high-resolution Proton S70 studio image (`s70-hero-main.webp`) framed with 8px radius, and trust badge chips (`Ready Stock Tanjung Malim`, `Tiada Caj Tersembunyi`, `Cawangan 3S/4S Sah`).
* **Right Column:** Lead capture form (Name, WhatsApp, Branch) with full-width primary CTA.

### 3.9 Mobile Floating Sticky Action Bar
* Persistent `64px` bottom bar fixed to mobile viewport (`background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(8px); border-top: 1px solid #E2E8F0`).
* Holds active variant installment badge (`RM 785/bln`) on left and primary conversion CTA (`SEMAK KELAYAKAN ›` in `#1A1A1A`) on right.
* Controlled via `IntersectionObserver` on the hero action cluster: automatically hides while viewing hero buttons to avoid double-CTA clutter; reveals upon scrolling downward.

---

## 4. Anti-Patterns & Quality Gate

Every deployment must achieve **0 anti-patterns** via `npx impeccable detect`:
* No `all-caps-body` on text blocks longer than short labels.
* No `tiny-text` below 12px for body content.
* No `wide-tracking` (`letter-spacing > 0.05em`) on body text.
* No `dark-glow` or colored Gaussian box-shadows on dark or light cards.
* No `low-contrast` text (WCAG AA 4.5:1 minimum enforced across default and hover states).