# AUDWeld × AUDEO — extracted brand spec

Sources (nothing here is invented):

- `audeo.sg` live Elementor global kit → `wp-content/uploads/elementor/css/post-20.css`
- `mwavuj1g-audweld_product_brochure.pdf` → text + 11 embedded images + logo mark
- `audeo.sg/contact-us/` → address, hotline

## Color tokens

| Token | Hex (source) | OKLch | Where it came from |
|---|---|---|---|
| `--bg` | `#0A0B14` | `oklch(13.5% 0.017 278)` | AUDEO `--e-global-color-044b931` |
| `--surface` | `#222334` | `oklch(26.5% 0.027 281)` | AUDEO `--e-global-color-secondary` |
| `--fg` | `#F5F4F5` | `oklch(96.2% 0.001 300)` | AUDEO `--e-global-color-cfa1f76` |
| `--muted` | `#9FA0B2` | `oklch(70% 0.025 283)` | lightened from AUDEO `--e-global-color-primary` `#616379` for 4.5:1 on `--bg` |
| `--border` | `rgb(255 255 255 / 0.11)` | — | AUDEO `--e-global-color-accent` is `#FFFFFF2B` (white 17%) |
| `--accent` | `#F05400` | `oklch(66% 0.21 44)` | spark orange sampled from the AUDWeld logo mark in the brochure |
| `--audeo` | `#B51717` | `oklch(47% 0.195 28)` | AUDEO `--e-global-color-d49ac81` |
| `--audeo-deep` | `#760000` | `oklch(33% 0.15 29)` | AUDEO `--e-global-color-332724a` |

**Accent zoning (the cross-breed rule).** AUDEO crimson is confined to the site chrome — top utility bar and footer. AUDWeld orange owns the product body between them. The two never appear in the same viewport band, so each screen still reads one accent.

## Type

```css
--font-display: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
```

Be Vietnam Pro, Inter and Raleway are the three faces audeo.sg already serves from
`wp-content/uploads/elementor/google-fonts/`. Display = Be Vietnam Pro 600, body = Inter 400/510.
Mono carries the wire designations (DXE71, DFA-811Ni1 …) — they are part numbers, not prose.

## Layout posture (observed on audeo.sg + brochure)

1. **Dark industrial canvas, hairline white borders.** No drop shadows except on sticky nav. Radius 2–4px — the brochure is hard-edged.
2. **Mono uppercase eyebrow over every section head**, tracked `0.14em`, matching the brochure's `01 / BRAND & CAPABILITIES` running head.
3. **Photo-left / data-right** pairing for every industry block — the brochure does this on pages 4 and 5.
4. **Accent budget: two uses per screen.** One eyebrow or rule + one primary action. Wire designations stay neutral.
5. **Weld-bead divider** (1px rule with a travelling orange node) as the only decorative flourish — one per page, at the hero.

## Contact (real, from the brief + audeo.sg)

- Product enquiries: `AUDWeld@audeo.sg` (new address requested by Ryan Fernandez)
- Hotline / WhatsApp: `+65 8752 4395` → `wa.me/6587524395`
- Head office: 50 Bukit Batok St 23, #04-07, Midview Building, Singapore 659578
- Target URL: `audeo.sg/audweld` (or `audweld.audeo.sg`)

## Assets extracted

`assets/img/` — `audweld-logo.png` (logo mark recomposed from the brochure's image + soft mask),
`audeo-logo-white.svg` (live from audeo.sg), `product-wire-spools.jpg`, `civil-engineering.jpg`,
`marine-offshore.jpg`, `energy-infrastructure.jpg`, `ships.jpg`, `petrochemical.jpg`,
`marine-engineering.jpg`, `bridges-steel-structures.jpg`, `pressure-vessels.jpg`,
`structural-steel-band.jpg`.

Photo credits per the brochure: Pexels and Unsplash contributors; boiler hall Lauri Veerde
CC BY-SA 4.0 via Wikimedia Commons; tank farm U.S. Department of Energy (public domain);
civil engineering welder U.S. Navy (public domain, via DVIDS).

---

## Three directions (added 2026-11-11)

`index.html` is the launcher. Each concept is a standalone page sharing
`js/audweld.js` and the extracted assets; only the CSS and the IA differ.

| File | Direction | Canvas | Accent | IA |
|---|---|---|---|---|
| `concept-01-industrial-dark.html` | Industrial dark (main) | AUDEO navy `#0A0B14` | AUDWeld orange, AUDEO crimson in chrome | Hero → capabilities → brand → industries → accordion range → tabbed applications → enquiry |
| `concept-02-technical-sheet.html` | Technical datasheet | AUDEO paper `#F5F4F5` + blueprint rule grid | AUDEO crimson `#B51717` only (darkened to 44% L for text on paper) | Spec hero → full range table → application matrix (all 5 sectors) → approvals → about → enquiry |
| `concept-03-editorial.html` | Editorial / photo-led | warm charcoal `oklch(14% 0.008 60)` | AUDWeld orange `#F05400` | Full-bleed hero → manifesto → 4 numbered chapters → product rail → pull quote → sector strips → split-screen enquiry |

Behaviour contract shared by all three (so one script serves them):
`#primary-nav`, `.navtoggle`, `.nav.is-open`, `.nav a[href^="#"]`,
`#enquiry-form`, `.field.is-invalid`, `#form-ok.is-shown`, `#wa-prefilled`,
`[role="tablist"]` + `.panel[hidden]`, `.reveal.is-in`.