oto-enterprise-os-dtp/OTO_DESIGN_SYSTEM_v1.md

# OTO Design System v1 · 2026-08-03

**Statut** · référence canonique · à respecter par tous les agents Claude Code DTP, ERPNext IA, OTOIA, sous-agents web/mobile/print/PDF.
**Portée** · site public vente.otov7.com, portail client /mon-compte/, console admin, applications mobiles iOS/Android, documents PDF (Trousse Client, Promesa, brochures, kit banquier).

## 1. Marque

### Identités visuelles officielles
- **World Activities Group (WAG)** · marque holding · logo `WA·official.png` avec 3 buildings dorés stylisés
- **HELIOS RD** · marque publique immobilière sous WAG · logo helios avec soleil abstrait
- **AC · Arias Cuevas SRL** · division construction · logo AC-official.png
- **Consortium ECR DR** · paymaster RH · logo ECR-official.png
- **9060 QC (World Activities Cdn.)** · entité canadienne 9060-2111
- **OTO CONCIERGE** · service client · silhouette majordome cercle doré (voir /static/oto-concierge-logo.png)

### Anciens logos INTERDITS
Ne jamais utiliser les versions historiques "WA-v1", "heliosroy-logo", "WA-triangle". Toujours privilégier les *-official.png.

## 2. Palette couleurs

### Palette site public + PDF
- **Fond principal** · `#0A0A0E` (noir profond, très légèrement bleuté)
- **Or accent** · `#C9A465` (or premium mat, principal)
- **Or lumineux hover** · `#e6c17f` (or doré clair pour hover)
- **Or halo/glow** · `#ffd66a` (or vif pour effets)
- **Texte principal** · `#FAF8F4` (blanc cassé chaleureux)
- **Texte secondaire** · `rgba(250,248,244,0.72)` (subtle)
- **Texte tertiaire** · `rgba(250,248,244,0.5)`
- **Bordures subtiles** · `rgba(255,255,255,0.08)`
- **Bordures dorées** · `rgba(201,164,101,0.3)` à `rgba(201,164,101,0.5)`

### Palette console admin dark
- Fond · `#0a0a12`
- Or accent · `#f0b429` (or plus vif qu'en public)
- Icônes/dividers · `rgba(255,255,255,0.1)`

### États sémantiques
- Succès · `#25D366` (vert WhatsApp)
- Warning · `#f59e0b` (ambre)
- Erreur · `#ef4444` (rouge doux)
- Info · `#3b82f6` (bleu)
- Muted · `#6b7280` (gris)

### Interdictions couleurs
- ❌ Pas de blancs purs `#FFFFFF` (préférer `#FAF8F4`)
- ❌ Pas de noirs purs `#000000` (préférer `#0A0A0E`)
- ❌ Pas de couleurs saturées primaires (rouge/bleu/vert vif) sauf états sémantiques

## 3. Typographie

### Hiérarchie
- **Titres majeurs** · `Cormorant Garamond` (300-500), fallback `Playfair Display`, fallback Georgia serif
- **Titres décoratifs** · `Cormorant Garamond` italic ou `Playfair Display` italic pour emphase
- **Body texte** · `Inter` (300-500), fallback system-ui, -apple-system, sans-serif
- **Nav / boutons / meta** · `Inter` (600-700) letterspacing 1.5-3px uppercase
- **Chiffres élégants** · `Fraunces` ou `Cormorant Garamond`
- **Monospace (code)** · SF Mono / Menlo (rarissime dans le luxury)

### Règle du "j"
Le caractère "j" doit être bien rendu · **Cormorant Garamond prioritaire** (queue courbée élégante). Playfair Display en fallback (queue moins jolie mais acceptable). **Éviter Fraunces pour "j" majeurs** (queue trop courte).

### Tailles typiques (rem/px)
- Hero title · `clamp(48px, 8vw, 96px)` weight 300
- Section title · `clamp(32px, 4vw, 56px)` weight 300 italic decorative
- Card title · `22-28px` weight 400-500
- Body · `14-17px` line-height 1.6-1.7
- Small/caption · `11-13px` letter-spacing 1.5-2.5px

### Import Google Fonts (par toutes pages)
```html
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Fraunces:wght@200;300;400;500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
```

## 4. Registre et ton d'écriture

### Style obligatoire · Big 4 institutionnel (Deloitte / Christie's Real Estate)
- Ton chaleureux mais professionnel institutionnel
- Vocabulaire soutenu · patrimoine, résidence, adresse, héritage, art de vivre, cadence, prestige
- Éviter les tournures marketing agressives ou commerciales

### Interdictions ABSOLUES écriture
- ❌ Emojis (aucun symbole unicode 😀🎉📱)
- ❌ Astérisques markdown en public (`**gras**`)
- ❌ Listes à puces trop chargées
- ❌ Points d'exclamation multiples
- ❌ Ton familier ou tutoiement dans les documents officiels
- ❌ Anglicismes injustifiés ("appartement" pas "apartment")

### Séparateur privilégié
Le middle dot ` · ` (Alt+Shift+9 macOS) sépare les éléments courts avec plus d'élégance que la virgule ou le tiret. Ex " · disponible · vue mer · 3 chambres · dès 145 000 USD ".

### Vocabulaire clientèle
Systématiquement adapter selon la clientèle cible du projet (défini dans les faisabilités) ·
- Ultra-luxe international · "résidence d'exception", "villégiature", "art de vivre caribéen"
- Bajo Costo local · "logement social qualitatif", "projet résidentiel familial"
- Investisseur · "opportunité patrimoniale", "actif immobilier", "rendement locatif"

## 5. Nomenclature standard OTOV7

### Typologies unités (JAMAIS T1/T2/T3 côté client)
- **Studio** (0 chambre)
- **1 Chambre**
- **2 Chambres**
- **3 Chambres**
- **Penthouse**

### Suffixes gamme
- Standard · gamme base
- Confort · gamme milieu
- Prestige · gamme haute
- Panorama · gamme premium (vue exceptionnelle)

### Codes projets
- P01 Coralis · P02 Coral del Sur · P03 Nakua · P04 Xamaná Cantiles · P05 Las Colinas Najayo Arriba · P06 Coco Real · P07 Aqua Terra · P08 Fasano Espirilla · P09 Résidence Gazcue

## 6. Composants UI

### CTA principal
```html
<button style="background:#C9A465;color:#0A0A0E;padding:16px 32px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:4px;border:none;cursor:pointer;">Concierge · à votre écoute</button>
```

### CTA secondaire (ghost)
```html
<button style="background:transparent;color:#C9A465;border:1px solid #C9A465;padding:16px 32px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:4px;cursor:pointer;">Découvrir</button>
```

### Panel/Card
```html
<div class="panel" style="background:rgba(255,255,255,0.03);border:1px solid rgba(201,164,101,0.3);border-radius:8px;padding:32px 28px;">
  <h3 style="color:#C9A465;font-size:14px;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;">Titre section</h3>
  ...
</div>
```

### Input formulaire
```html
<input type="text" style="background:rgba(255,255,255,0.05);border:1px solid rgba(201,164,101,0.25);color:#FAF8F4;padding:12px 14px;border-radius:4px;font-size:14px;">
```

### Badge état
```html
<span style="padding:4px 10px;background:#25D36622;color:#25D366;border:1px solid #25D36655;border-radius:12px;font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;">Disponible</span>
```

### Widget devise + langue (toujours transparent, top-right)
Fond transparent, texte doré avec double text-shadow pour lisibilité sur tout fond. Soulignement doré fin sur l'actif (pas de fond doré plein). Voir `devise-switch-v7.js`.

### Bandeau pré-commercialisation
Fond transparent + padding 26px 24px + texte doré. Voir `waitlist-banner.js`.

### Concierge silhouette bottom-right
Position fixe bottom:125px right:125px, image PNG 110px transparent (voir `concierge-icon.js`).

## 7. Accessibilité (WCAG 2.1 AA)

### Obligatoires sur toutes pages
- `<html lang="fr">` (ou en/es selon langue active)
- **Skip link** "Aller au contenu principal" visible au focus, position off-screen
- **Focus visible** · outline 2px `#C9A465` sur tous éléments focusables
- Alt text sur toutes images (nom fichier + contexte projet minimum)
- Contraste texte principal (#FAF8F4 sur #0A0A0E) · 15.8:1 (AAA+)
- Contraste texte or (#C9A465 sur #0A0A0E) · 7.8:1 (AAA)
- Boutons min 44×44px zone tactile mobile
- Formulaires · label associé + placeholder complémentaire pas remplaçant

## 8. Multi-langue (FR/EN/ES trilingue)

### Fichiers i18n
- `/opt/oto/sites/vente/i18n/{fr,en,es}.json`
- Attribut HTML `data-i18n="clé"` pour texte à traduire
- Widget devise/langue déclenche `location.href = url + '?lang=xx'` (reload propre + cookie otov7_lang)

### Espagnol · variante République Dominicaine
- Utiliser `es-DO` comme locale principale (pas `es-ES`)
- Vocabulaire · "apartamento" (pas "piso"), "parqueadero" (pas "aparcamiento")
- Devise RD$ (pesos dominicains) + format `1.234.567`

### Anglais · variante US
- `en-US` (pas en-GB)
- Vocabulaire · "apartment" (pas "flat"), "condominium", "downpayment", "escrow"
- Format prix `$145,000`

## 9. Voix OTOIA (synthèse vocale)

### Ordre priorité par langue
- **FR** · fr-CA Nicolas Enhanced → fr-FR Thomas Enhanced → fallback fr-* Neural
- **EN** · en-US Nathan Enhanced → en-US Evan → en-US Aaron → en-US Alex (NEVER en-GB Daniel/UK)
- **ES** · es-DO Diego → es-US → es-PR → es-MX (Latino/Caribbean naturel)

### Pré-processing texte avant TTS (cleanForTTS)
- `·` → `,` (pause naturelle)
- Em/en dash → `,`
- `HELIOS` → `Elios` (prononciation)
- `WAG` → `W A G` épelé
- `R+20` → `R plus 20`
- Acronymes CONFOTUR/INVI/DGII/IFRS/ISA → épelés lettre par lettre
- Emojis strippés

### Cible qualité premium
ElevenLabs Amélie multilingual_v2 quand token dispo. Pour l'instant · voix native macOS Enhanced/Premium.

## 10. Design mobile

### Applications natives (Expo)
- App name · `OTOv7` (marque World Activities Group)
- Bundle · `com.otov7.app` (iOS + Android)
- Icône · fond noir `#000000` + logo bronze `#f5b04a` + typo Fraunces ("OTO" droit + "v7" italique) + tagline WORLD ACTIVITIES GROUP en Inter
- Splash · variantes light/dark
- Navigation · bottom tabs 4-5 onglets max

### Portail client mobile
Mêmes onglets que /mon-compte/ web · Profil / Unités / Documents / Paiements / Financement / Chantier / SAV / HOA

## 11. Documents PDF (Trousse Client, Promesa, Brochures, Kit Banquier)

### Format et présentation
- Format `Letter US` (215.9×279.4mm) · pas A4
- Marges 25.4mm / 20.32mm (1 inch / 0.8 inch)
- Header · logo entité (WA-official ou HELIOS ou AC selon contexte) + numéro projet
- Footer · WORLD ACTIVITIES, S.R.L. · RNC 1-31-91989-8 · Calle Las Orquídeas No. 18, Mirador del Oeste, Santo Domingo Oeste, RD 10608 · +1 (849) 517-2355 · vente@otov7.com · Page X/Y

### Signatures Certification Ley 126-02
Bordure dorée fine, fond crème `#faf8f4`, checkbox "He leído · He comprendido · Acepto" plus ligne signature + date pré-remplie.

## 12. Écrans admin console

### Layout
- Sidebar gauche 240px dark
- Header top 64px avec logo WA + user menu
- Body scrollable avec padding 32px
- Cards en grid responsive 3-4 colonnes desktop, stack mobile

## 13. Interdictions absolues design

- ❌ Pas de gradients arc-en-ciel ou saturés (rester monochrome noir+or)
- ❌ Pas d'animations bounce/wobble/rotate ridicules
- ❌ Pas de material design Google flat (rester textural luxury)
- ❌ Pas d'ombres portées noires massives (préférer ombres or subtiles `0 0 20px rgba(201,164,101,0.15)`)
- ❌ Pas de border-radius rond exagéré (max 8-12px pour cartes, 20-24px pour pastilles seulement)
- ❌ Pas de tables avec fond alterné bleu/blanc (rester subtil rgba(255,255,255,0.02))

## 14. Références externes visuelles

Style à répliquer selon projet ·
- **Christie's Real Estate** · https://www.christiesrealestate.com/ (référence marque)
- **The Modern House UK** · https://www.themodernhouse.com/
- **The Agency** · https://www.theagencyre.com/
- **Fasano Hotels** (P08 branding partner) · https://www.fasano.com.br/
- **Aman Resorts** · https://www.aman.com/ (ultra luxe minimaliste)

## 15. Fichiers canoniques sur VPS

- Design system (ce document) · `/opt/oto/docs/design/OTO_DESIGN_SYSTEM_v1.md`
- Logos officiels · `/opt/oto/sites/vente/static/logos/*-official.png`
- Concierge assets · `/var/www/html/static/oto-concierge-logo.png` + `oto-concierge-icon.png`
- Scripts UI canoniques · `/var/www/html/static/devise-switch-v7.js` `waitlist-banner.js` `contact-modal.js` `concierge-icon.js` `oto-living-banner.js` `cookies-banner-v2.js` `consent-mode-v2.js`

## 16. Références projet mémoire

Design system connecté à ·
- `otov7_directive_experience_client_premium`
- `otov7_console_design_dark_gold`
- `otov7_signature_brand`
- `otov7_style_deloitte`
- `otov7_nomenclature_typologies_standard`
- `otov7_directive_workflow_documentaire_20260801`

---

**Version** · v1 · 2026-08-03
**Auteur** · Michel Roy (Co-Président WAG)
**Prochaine révision** · à chaque évolution majeure marque
**Consommateurs** · tous agents Claude Code DTP, ERPNextIA, OTOIA, sous-agents web/mobile/PDF/print