> Part of the PWA DevGuide (split from pwa_dev_style.md on 2026-07-02 — see that file for the index; ADR-099).

## 1. App Identity

| Property | Value |
|---|---|
| Full name | Branding Recce |
| Short name | Recce |
| Purpose | Offline-first field form — branding recce data for field agents |
| Font | DM Sans (400/500/600/700) via Google Fonts |
| Theme color | `#0f172a` (navy) |
| Background color | `#0f172a` |
| Orientation | Portrait |
| Display | Standalone (installed PWA) |
| Language | en-IN |
| Auth gate | Checks `lm360-session` in localStorage. Session expires in 12 hours. Expired or missing → redirect to `'/hub/?next=' + encodeURIComponent(location.pathname + location.search)` — the `?next=` is MANDATORY (ADR-001) so the hub returns the user here after login. Hub only honours same-origin relative paths (must start with `/`, never a full URL). Logout buttons redirect to bare `/hub/` (deliberate exit — ADR-001 does not apply). |

---

## 2. Design System

### 2.1 CSS Custom Properties

```css
--nv:  #0f172a   /* Navy dark — headers, heroes, dark backgrounds */
--nv2: #1e293b   /* Navy medium — secondary dark surfaces */
--or:  #f97316   /* Orange — primary accent, CTAs, active states */
--orl: #fed7aa   /* Orange light — hover tints */
--gn:  #16a34a   /* Green — synced, success, GPS good */
--rd:  #dc2626   /* Red — error, danger, failed */
--am:  #d97706   /* Amber — warning, pending, distributor text */
--g50:  #f8fafc  /* Page background */
--g100: #f1f5f9  /* Section backgrounds */
--g200: #e2e8f0  /* Borders */
--g300: #cbd5e1  /* Disabled borders */
--g400: #94a3b8  /* Muted text */
--g500: #64748b  /* Secondary text */
--g600: #475569  /* Body text */
--r:    12px     /* Card border-radius */
--rs:   8px      /* Small element border-radius */
--sh:   0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06)  /* Card shadow */
--bnav-h: 72px   /* Bottom nav bar height */
--host-bar: 0px  /* Raised dynamically if tiiny.host bar detected */
```

### 2.2 Typography Scale

| Usage | Size | Weight | Color |
|---|---|---|---|
| Hero title | 22px | 700 | #fff |
| Header title | 16px | 600 | #fff |
| Card section title | 11px UPPERCASE | 700 | `--g500` |
| Form label | 13px | 500 | `--g600` |
| Form input | 15px | 400 | `--nv` |
| Body text | 14px | 400 | `--nv` |
| Metadata / chips | 11–12px | 500–600 | varies |
| Stat number | 22px | 700 | white / green / yellow |

### 2.3 Button System (4 variants)

| Class | Style | Use |
|---|---|---|
| `.btn-p` | Orange fill, white text, 15px bold, full-width, 15px padding | Primary action (Continue, Submit) |
| `.btn-s` | White fill, navy text, 1.5px `--g200` border, full-width | Secondary / back action |
| `.btn-o` | White fill, orange text + border, inline-flex, 14px | Outline action (Add, Fetch, Save) |
| `.btn-d` | White fill, red text + `#fecaca` border, inline-flex, 12px | Destructive (Remove, Delete) |

Active states: `.btn-p:active` → `#ea6c05`; `.btn-s:active` → `--g100`; `.btn-o:active` → `--orl`

### 2.4 Form Controls

- **Input / Textarea / Select**: `1.5px --g200` border, `--rs` radius, `15px` font, focus → `1.5px --or` border (no outline)
- **Read-only input**: `--g50` background, `--g600` text
- **Select**: custom chevron SVG via background-image, `padding-right:36px`
- **Required asterisk**: `<span class="req">` → orange color
- **Radio buttons (`.rbtn`)**: flex group, 1:1, orange fill when `.sel`
- **Chips (`.chip`)**: `7px 12px`, `20px` border-radius, orange fill + white text when `.sel`

### 2.5 Photo Slot (`.pslot`)

- Empty: `2px dashed --g300`, `min-height:110px`, centered icon + label
- Filled (`.filled`): `2px solid --or` (orange border), no padding, `img` covers slot
- Remove button (`.premove`): `26×26px` red circle, top-right corner, z-index 5
- Size badge (`.pbadge`): bottom-right pill, `rgba(0,0,0,.6)`, file size label
- Quality toggle buttons (`atool`): appear below empty pslot for branding items only

---


> **theme-v2 (ADR-100):** palette/font/radius/shadow tokens now come from `/shared/theme-v2.css` presets (`navy-classic`, `ember-v2`, `forest`, `ivory`, `slate`, `coral-pulse` — the last a 2026-07-06 demo preset built via `/shared/theme-editor.html`, not yet adopted by any PWA) selected via `<html data-theme>`. The values below document the classic Recce look = the `navy-classic` preset. New looks = new presets in theme-v2.css, never per-PWA forks.