# DESIGN-EMAS.md — Proton e.MAS Clean Tech (Vision-Extracted Specification)

## 1. Brand Identity & Vision Source
- **Official Source:** `https://emas.proton.com/` (Sampled via Vision Inspection 2026-09-15)
- **Core Stance:** High-key electric minimalism, Scandinavian-Asian crossover, airy porcelain surfaces, starlight white type, and signature electric cyan energy trails.
- **Key Brand Signatures:**
  - Header Cyan Radial Gradient (`#06080E` deep space vignette transitioning into luminous `#00C4FF` cyan trail).
  - Champagne Gold "No. 1 EV Brand in Malaysia" emblem (`#C89B3C`).
  - 3-Column 1px border warranty guarantee container (6-Year Vehicle / 5-Year Data / 8-Year HV Battery).
  - 3-Tier variant architecture: Prime (RM96,800), Premium (RM112,800), Premium Plus (RM118,800).

---

## 2. Design Tokens (CSS Custom Properties)

```css
:root[data-theme="emas"] {
  /* Brand Palettes (Extracted from official e.MAS assets) */
  --emas-bg-page: #F5F7FA;          /* High-key soft pearl white */
  --emas-bg-surface: #FFFFFF;       /* Crisp card white */
  --emas-bg-dark: #06080E;          /* Header deep space black */
  --emas-navy-base: #0E1424;        /* Midnight slate navy */
  
  --emas-cyan-primary: #00C4FF;     /* Official Electric Cyan (Active dot / EV trail) */
  --emas-cyan-glow: #6FE3F7;        /* Aqua Cyan highlight */
  --emas-laser-red: #E51A31;        /* Speed trail high-velocity accent */
  --emas-gold-badge: #C89B3C;       /* No. 1 EV Brand gold */
  
  --emas-text-primary: #0F172A;     /* Deep slate for high-contrast on light */
  --emas-text-muted: #64748B;       /* Muted technical gray */
  --emas-text-light: #FFFFFF;       /* Pure white on dark surfaces */
  
  --emas-border-light: #E2E8F0;     /* Clean 1px structural line */
  --emas-border-dark: rgba(255, 255, 255, 0.15);

  /* Geometry & Curves */
  --emas-radius-card: 14px;
  --emas-radius-button: 9999px;     /* Full rounded pill */
  --emas-radius-badge: 6px;

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

---

## 3. Component Anatomies

### A. Header Navigation Lockup
- Deep space gradient background: `linear-gradient(180deg, #06080E 0%, rgba(6, 8, 14, 0.92) 80%, transparent 100%)`.
- Center brand lockup: Flat white Proton tiger emblem + uppercase `PROTON` + stylized italic `e.MAS`.
- Right CTA: High-contrast solid white rounded pill button with dark navy text (`#0F1B2C`).

### B. 3-Column Warranty Guarantee Dock
- Segmented container with 1px border.
- Bold display numerals on top line (e.g., `6-YEAR`, `5-YEAR`, `8-YEAR/160,000KM`).
- Tight two-line uppercase microcopy underneath with letter-spacing `0.06em`.