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)

<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

<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)

<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

<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

<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

<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