diff --git a/OTO_DESIGN_SYSTEM_v1.md b/OTO_DESIGN_SYSTEM_v1.md new file mode 100644 index 0000000..ff7e747 --- /dev/null +++ b/OTO_DESIGN_SYSTEM_v1.md @@ -0,0 +1,274 @@ +# 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 + +``` + +## 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 + +``` + +### CTA secondaire (ghost) +```html + +``` + +### Panel/Card +```html +
+

Titre section

+ ... +
+``` + +### Input formulaire +```html + +``` + +### Badge état +```html +Disponible +``` + +### 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 +- `` (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