Design System

Openstone

Guide complet d'identité visuelle

01 Principes Directeurs

L'Essence du Design

Respirer

L'espace blanc n'est pas du vide, c'est de l'élégance. Chaque élément doit avoir l'espace pour exister pleinement et créer une harmonie visuelle.

Hiérarchiser

Guider le regard avec intention. Chaque composition raconte une histoire claire et structurée, mettant l'accent sur l'essentiel.

Épurer

La sophistication réside dans la simplicité. Chaque élément doit justifier sa présence et contribuer au message global.

Équilibrer

Alternance subtile entre rigueur architecturale et chaleur humaine, minimalisme et richesse visuelle, tradition et modernité.

02 Système de Logos

Identité Visuelle — Variations & Usage

Guide d'Application des Logos

Le logo OpenStone existe en plusieurs variations pour s'adapter à tous les contextes de présentation. Chaque variation a un usage spécifique. Respecter ces guidelines assure une cohérence de marque maximale.

Règle d'Or: Ne jamais modifier, redimensionner au-delà du raisonnable, ou appliquer d'effets au logo.

Full Logo Green

Full Logo Green

Version complète avec texte. Usage principal sur fonds clairs. Format recommandé pour présentations.

Télécharger PNG
Full Logo White

Full Logo White

Version complète sur fonds teal ou sombres. Usage : slides de transition, sections premium.

Télécharger PNG
Full Rounded Green

Full Rounded Green

Version arrondie avec fond carré. Moderne et amical. Pour slides couverture, footer.

Télécharger PNG
Full Rounded White

Full Rounded White

Version arrondie blanche. Sur fonds teal. Impact maximal et moderne.

Télécharger PNG

Icons — Green (Fonds Clairs)

Green Icon

Icon Simple

Télécharger
Green Square Icon

Square

Télécharger
Green Rounded

Rounded Square

Télécharger
Green Name

Texte Seul

Télécharger

Icons — White (Fonds Teal)

White Icon

Icon Simple

Télécharger
White Square

Square

Télécharger
White Rounded

Rounded Square

Télécharger
White Name

Texte Seul

Télécharger

Guide d'Utilisation

Slides Couverture
  • Full Logo Green sur fond blanc
  • Full Rounded Green pour impact
  • Minimum 120px de hauteur
  • Centré ou en haut à gauche
Slides de Transition
  • Full Logo White sur #264C51
  • Full Rounded White version moderne
  • Centré ou bas de page
  • Hauteur: 100-120px
Footer / Petits Espaces
  • Icon Simple (Green sur fond clair)
  • Icon Simple (White sur fond teal)
  • Minimum 40px de hauteur
  • Toujours en bas à gauche ou centre
Zones Premium/Glasmorphism
  • Icon White Rounded Square
  • Full Rounded White pour impact
  • Sur arrière-plan dépoli
  • Contraste maximal garantis

À FAIRE

  • Utiliser les fichiers PNG officiels fournis
  • Maintenir les proportions du logo
  • Vérifier le contraste avec le fond
  • Respecter l'espace vide autour du logo
  • Choisir la variation appropriée au contexte

À ÉVITER

  • Ne pas créer de nouvelles variations
  • Ne pas appliquer d'effet 3D ou ombre
  • Ne pas changer les couleurs du logo
  • Ne pas distordre ou modifier les proportions
  • Ne pas utiliser les mauvaises variantes de couleur

02 Système Chromatique

Palette de Couleurs

Palette Primaire

OpenStone Teal

#264C51 | RGB(38, 76, 81)

Titres principaux, éléments de marque, fonds pour moments clés. Confiance, stabilité, expertise.

Blanc Pur

#FFFFFF | RGB(255, 255, 255)

Fond principal (50-60% des slides). Clarté maximale. Toile de base premium.

Blanc Épuré

#ECF3F8 | RGB(236, 243, 248)

Fond alternatif (20-30%). Variation subtile. Teinte teal légère.

Noir Carbon

#000000 | RGB(0, 0, 0)

Texte de lecture, contraste maximal sur fonds clairs.

Palette Secondaire & Étendue

Teal Clair

#3A6B72

Accents, éléments interactifs, graphiques, bordures.

Teal Vibrant

#2D7F8A

Visualisations de données, charts, accents dynamiques.

Cyan Doux

#5FA5B3

Visualisations, zones secondaires, accents doux.

Gris Pierre

#6B6B6B

Texte secondaire, légendes, informations.

Palette d'Accents — Contextuels

Trois familles de couleurs d'accent avec des règles d'utilisation précises selon le contexte visuel. Fond blanc → Teal | Fond teal → Orange & Pêche

🔥 Orange Terracotta

#D97642 | RGB(217, 118, 66)

Contexte: Boutons CTA sur fond teal/foncé. Raison: Contraste chaud/froid, attire l'attention, évoque confiance et rendement.

🔥 Orange Terracotta Light

#E89B6F | RGB(232, 155, 111)

Contexte: Hover states, highlights importants sur sections à gradient teal. Raison: Variante plus douce de l'accent chaud.

🍑 Pêche

#FFDABF | RGB(255, 218, 191)

Contexte: Labels, highlights subtils sur fond teal/gradient. Raison: Lisibilité optimale sur foncé, chaleur sans agressivité, évoque croissance.

🔥 Orange Terracotta Dark

#C4652F | RGB(196, 101, 47)

Contexte: Dégradés, ombres, états actifs de boutons orange. Raison: Profondeur et contraste pour effets visuels.

📋 Règles d'Utilisation Contextuelle

Sur Fond BLANC/CLAIR

Utiliser TEAL (#3A6B72, #264C51)

Cohérence de marque, contraste optimal

Sur Fond TEAL/FONCÉ

Utiliser ORANGE (#D97642) + PÊCHE (#FFDABF)

Contraste chaud/froid, lisibilité optimale

💡 Pro Tip: L'orange se détache sur toutes les variations de teal, privilégier pour les actions importantes sur dégradés.

03 Système de Composants

Badges, Tabs & Timeline Steppers

Composants modernes et accessibles pour vos interfaces et présentations. Palette de couleurs sémantique, variations de tailles, et états interactifs. Tous les composants respectent les standards WCAG AA (contraste 4.5:1 minimum).

Système de Badges

Badges sémantiques pour statuts, classifications et actions. Utilisez-les dans les tableaux, listes, et interfaces de données.

Badges de Statut

✓ Validé ⏱ En Attente De Signature ⓘ Averti ! Non Averti ✕ Expiré Désactivé
Tailles
✓ Small ✓ Medium ✓ Large
Variantes Outline
Primary Success Warning Action Pêche

Badges de Marque

OpenStone Primary Accent Teal Accent Chaud 🍑 Pêche 🍑 Pêche Soft

Sur fond foncé

Action CTA +87% Métriques Performance

Badges Interactifs

Cliquable Filtrer Action

Survolez pour voir l'effet interactif

Exemple d'Utilisation — Tableau KYC

Investisseur Statut KYC Type Document
Jean Dupont ✓ Validé Averti ✓ Signés
Marie Martin ⏱ En Attente Non Averti ⏱ En Attente De Signature
Pierre Dubois ✓ Validé Averti ✓ Signés
Sophie Bernard ✕ Expiré — ✕ Expirés

Système d'Onglets (Tabs)

Navigation fluide entre différentes sections de contenu. Deux styles disponibles : Classic et Pills.

Style Classic — Tabs Soulignés

Vue d'ensemble

Dashboard principal avec les métriques clés, graphiques de performance et résumé des investissements actifs.

Investissements

Liste détaillée de tous vos investissements avec statuts, montants et rendements.

Documents

Accès à tous vos documents contractuels, bulletins de souscription et rapports.

Historique

Chronologie complète de vos transactions et interactions.

Style Pills — Tabs Arrondis

Affichage de tous les projets sans filtre.

Projets actifs en cours d'investissement.

Projets complétés et clôturés.

Projets archivés pour référence future.

Timeline Stepper

Visualisation claire de processus séquentiels et étapes de progression. Parfait pour KYC, onboarding, et workflows multi-étapes.

Timeline Vertical — Processus KYC

✓
Création du Compte

Compte créé avec succès le 15 janvier 2025. Email vérifié.

✓
Informations Personnelles

Identité complète fournie et vérifiée. Document d'identité validé.

3
Vérification Bancaire

En cours de traitement. IBAN fourni, validation en attente.

4
Signature des Documents

Signature électronique des conditions générales requise.

5
Compte Activé

Activation finale et accès complet à la plateforme.

Timeline Horizontal — Parcours Investissement

✓
Découverte

Exploration

✓
Due Diligence

Analyse

3
Souscription

En cours

4
Signature

À venir

5
Investissement

À venir

Boutons Contextuels

Les boutons s'adaptent automatiquement selon le contexte : teal sur fond blanc, accent chaud sur fond teal.

Sur Fond Blanc

Utilise la couleur primary teal (#264C51)

Sur Fond Teal

Utilise l'accent chaud terracotta (#D97642)

Guide d'Utilisation des Composants

À FAIRE
  • Utiliser les icônes dans les badges pour renforcer le sens
  • Respecter le contraste minimum 4.5:1 (WCAG AA)
  • Adapter la taille des badges au contexte (sm pour tableaux)
  • Limiter à 3-4 onglets pour une navigation optimale
  • Utiliser le timeline vertical pour processus détaillés
  • Fournir des ARIA labels pour l'accessibilité
  • Utiliser les boutons contextuels appropriés
À ÉVITER
  • Ne pas surcharger avec trop de badges différents
  • Éviter les badges sans icônes pour les statuts critiques
  • Ne pas utiliser plus de 6 onglets simultanément
  • Éviter le timeline horizontal avec plus de 5 étapes
  • Ne pas mélanger les styles de tabs dans une page
  • Éviter les couleurs hors palette système
  • Ne pas utiliser bouton accent sur fond blanc

04 Graphiques & Visualisations

Data Visualization

Utiliser la palette teal pour créer des graphiques cohérents et lisibles. Aucun effet 3D, pas de surcharge visuelle. Les données doivent être claires et parlantes.

Bar Chart — Distribution

Idéal pour comparaisons et distributions annuelles ou mensuelles.

Couleurs: #264C51, #3A6B72, #2D7F8A, #5FA5B3 | Police: Inter 12pt | Pas de 3D
Créer ce graph

Line Chart — Évolution

Mouvement fluide pour tendances et progressions mensuelles.

Couleurs: #264C51, #2D7F8A | Stroke: 3px | Remplissage: 0.1 opacity
Créer ce graph

Doughnut Chart — Parts

Proportions et répartition. Maximum 4 couleurs de la palette.

Palette teal | Bordure: Blanc #FFFFFF | Légende: Bottom
Créer ce graph

Area Chart — Évolution Remplie

Évolution avec zone remplie pour montrer le volume et la tendance.

Couleur: #264C51 | Fill: rgba(38,76,81,0.2) | Bordure: 3px
Créer ce graph

Stacked Bar — Comparaison Empilée

Comparer plusieurs datasets empilés pour voir la contribution totale.

Datasets multiples | Couleurs palette | Empilés verticalement
Créer ce graph

Horizontal Bar — Classement

Barres horizontales pour classements, top 5, comparaisons de catégories.

Orientation: Horizontale | Parfait pour noms longs
Créer ce graph

Multi-Line — Comparaison Multiple

Comparer plusieurs séries de données temporelles en parallèle.

2-3 lignes max | Couleurs contrastées | Légende claire
Créer ce graph

Pie Chart — Répartition Simple

Diagramme circulaire pour proportions simples (max 5 segments).

Palette teal | Max 5 segments | Alternative au doughnut
Créer ce graph

Créateur de Graphiques Interactif

Créez vos propres graphiques aux couleurs Openstone.

Ouvrir le Créateur ↗

05 Images & Photographies

Architecture Contemporaine

Architecture minimaliste avec lumière naturelle. Haute qualité (min 1920px), traitement standardisé avec overlay teal subtil et flou. Ces images créent un contexte premium aux présentations. Maximum 20% de slides avec images comme fonds.

Façades vitrées modernes

Façades Vitrées Urbaines

Perspectives géométriques avec jeux de reflets. Bâtiments modernes en verre. Traitement: opacité 35-50%, overlay #264C51 65-75%

Vue aérienne immeuble résidentiel

Immeuble Résidentiel

Vue aérienne d'architecture contemporaine. Haute résolution, perspective unique et moderne.

Vue aérienne bâtiment

Architecture Vue Plongeante

Vue aérienne épurée. Structure géométrique contemporaine, clarté maximale et impact visuel.

À Éviter Absolument

  • Photos génériques de banques d'images
  • Architectures anciennes ou trop chargées
  • Surexposition ou sous-exposition
  • Filtres Instagram ou HDR excessif
  • Présence humaine dominante (sauf contexte intentionnel)
  • Résolution inférieure à 1920px

06 Effet Signature

Glassmorphism — Verre Dépoli

Effet Glassmorphism

Verre dépoli + flou + transparence. Cet effet signature crée une sensation de modernité, de légèreté et de sophistication.

Card Premium — Message Clé

Message Principal

Contenu court et impactant sur fond dépoli. Utiliser pour mettre en avant les chiffres clés.

Remplissage: Blanc 75% opacité | Bordure: Blanc 1.5px, 65% opacité
Backdrop: blur(20px) | Rayon: 20px | Shadow: 0 8px 32px rgba(0,0,0,0.1)

Card Callout — Mise en Avant Données

Chiffre Clé

+45%

Croissance annuelle

Fond arrière: Gradient #264C51 → #3A6B72 | Usage: transitions, zones premium
Maximum: 20% des slides | Ne jamais abuser de l'effet

CSS - Implémentation Technique

.glassmorphism-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 40px;
}

07 Slides de Transition

Rythme & Structure Visuelle

Les slides de transition créent du rythme et marquent les changements de section. Elles permettent une pause réflexive et structurent le narrative. Ne pas en abuser : maximum une tous les 4-5 slides.

Partie 1

Introduction & Contexte

Transition de Section

Fond: #264C51 (teal signature)
Titre: Montserrat 48pt Bold, Blanc
Sous-titre: Inter 20pt Regular, Blanc 80%
Usage: Entre sections principales
Fréquence: 1 slide par 4-5 slides

Citation

Pause réflexion

Slide Citation ou Question

Fond: Blanc avec image architecture subtile (opacité 15%)
Style: Merriweather serif 32pt
Couleur: #264C51 centrée
Usage: Créer respiration et moments de réflexion
Maximum: 1 par présentation

Distribution Type — Présentation 15 Slides

Structure Recommandée

  • 01 Couverture — Architecture + glasmorphism
  • 02 Agenda — Blanc
  • 03 Transition — Section 1
  • 04-06 Contenu — Blanc
  • 07 Image — Architecture premium
  • 08 Transition — Section 2
  • 09-11 Contenu — Blanc
  • 12 Citation — Pause réflexion
  • 13-14 Données — Blanc
  • 15 Remerciements — Blanc

Analyse & Équilibre

  • Blanc/Épuré: 10 slides (67%)
  • Transition teal: 2 slides (13%)
  • Premium/Architecture: 3 slides (20%)
  • Rythme: Alterner tous les 4-5 slides
  • Respiration: Jamais 3+ consécutifs
  • Équilibre: 70-80% clairs minimum

08 Les Règles d'Or

À Retenir Absolument

À FAIRE

  • ✓ 70-80% de fonds clairs (#FFFFFF et #ECF3F8)
  • ✓ Alterner blanc/blanc épuré pour rythmer
  • ✓ Max 2 polices (Montserrat + Inter, Merriweather opt.)
  • ✓ Letter-spacing 0.02em sur titres Montserrat
  • ✓ Ratio contraste 4.5:1 min (WCAG AA)
  • ✓ 40 mots max par slide (hors données)
  • ✓ Une idée principale par slide
  • ✓ Marges 80-100px tous côtés
  • ✓ Images 1920px min haute définition

À ÉVITER

  • ✕ Jamais 20%+ slides fond coloré
  • ✕ Pas 3+ couleurs par slide
  • ✕ Pas de dégradés colorés (blanc→transparent ok)
  • ✕ Couleurs hors palette
  • ✕ Images génériques
  • ✕ Polices supplémentaires
  • ✕ Pas 3+ niveaux hiérarchiques
  • ✕ Pas de 3D sur graphiques
  • ✕ Jamais glasmorphism 20%+ slides