Charte Graphique

Charte Graphique Myriade

Notre design system, couleurs, typographie et patterns UI — tout ce dont vous avez besoin pour créer des expériences Myriade cohérentes.

Identité

Logo

Deux cercles entrelacés — blanc et or — symbolisant l'union de la donnée et de l'intelligence. Disponible en deux variantes.

Myriade

icon.svg — Navy bg (var(--navy-bg)) + white/gold circles
Titre : Outfit 700 (gras)

Myriade

icon-white.svg — Fond transparent, cercles blanc/or
Titre : Outfit 700 (gras)

Couleurs du logo

Background: var(--navy-bg)

Circle 1: #FFFFFF (stroke)

Circle 2: #FAAF03 (stroke)

Couleurs

Palette de couleurs

Surfaces olive chaudes associées à une gamme marine foncée en 4 niveaux. Or pour les CTA, cyan pour l'info/secondaire. Couleurs sémantiques pour les états de succès, d'erreur et d'avertissement.

Surfaces

#FFFFFF

Blanc

Arrière-plan de la page principale

--surface-white

#f7f7f4

Page Chaleureuse

Sections alternées

--surface-base

#F2F1ED

Carte Chaleureuse

Arrière-plans de cartes, pied de page

--surface-soft

#04082C

Marine

Sections sombres, pied de page, barre de navigation

--navy-bg

#020620

Marine Profond

Dégradés sombres immersifs, profondeur du hero

--navy-deep

Gamme de Fonds Sombres

#020620

Le Plus Profond

Arrière-plan de page / pied de page sur fond sombre

--surface-dark-1

#04082C

Base

Arrière-plans de cartes sur fond sombre

--surface-dark-2

#162040

Surélevé

États de survol, cartes actives

--surface-dark-3

Accents & Sémantique

#FAAF03

CTA principal, accents de titres

#F7C948

Or Clair

Libellés de texte court, badges (contraste AAA)

#38BDF8

Cyan

Accent secondaire, info, visualisation de données

#69DB7C

Succès

Données fiables, coches, positif

#FF6B6B

Erreur

Alertes, échecs, critique

#FAAF03

Avertissement

États de mise en garde

#6C8EEF

Cool (IA)

Marqueurs de signal IA (legacy)

Texte sur fond clair

Primaire

--fg

100%

Secondaire

--fg-sec

60%

Tertiaire

--fg-ter

40%

Bordure

--fg-border

10%

Texte sur Fond Sombre

Primaire

--dark-h1

100%

Sous-titre

--dark-subtitle

90%

Corps

--dark-body

55%

Atténué (WCAG AA)

--dark-muted

—

Dim / décoratif

--dark-dim

35%

Typographie

Plus Jakarta Sans + Manrope

Plus Jakarta Sans pour les titres (h1, h2, h3). Manrope pour le corps du texte, les boutons et les labels. Graisse 500–600 pour les titres, 400 pour le corps, 600 pour les boutons et les labels. Jamais en gras (700) pour le texte d'affichage.

The quick brown fox

jumps over the lazy dog

Titre de section — 18px / 500

Texte de corps à 16 px, graisse 400, letter-spacing de 0,005 em et interligne 1,5. Manrope pour le corps offre une expérience de lecture épurée, géométrique et accessible.

LABEL — 11PX / 600 / 0.08EM

mono — JetBrains Mono, 11px, graisse 400

Élément	Police	Taille	Graisse	Espacement	Hauteur de Ligne
H1	Plus Jakarta Sans	clamp(38px, 5vw, 60px)	500	-0.04em	1.08
H2	Plus Jakarta Sans	clamp(28px, 3.5vw, 40px)	500	-0.03em	1.12
H3	Plus Jakarta Sans	18px	500	—	—
Corps	Manrope	16–17px	400	0.005em	1.5
Label	Manrope	11px	600	0.08em	uppercase
Mono	JetBrains Mono	11–12px	400	0.06em	—

Interactions

Boutons

Primary en dégradé doré avec reflet intérieur. Ghost pour le secondaire. Toujours en forme de pill (rayon 9999px).

.btn-primary — Dégradé doré, texte sombre

.btn-secondary — Transparent, bordure

Même btn-primary — fonctionne sur tous les fonds

.section-dark .btn-secondary

Composants

Cartes & Ombres

Quatre niveaux de cartes aux rôles distincts. Système d'ombres aux teintes chaudes sur fond clair, ombres profondes sur fond sombre.

Carte Standard

Carte par défaut pour le contenu. Fond chaud, bordure subtile, ombre légère. Se soulève au survol.

.card

Carte Signal

Fonds sombres en couches avec ombres lumineuses. Pour les cartes de sortie hero, contenu de section sombre.

.card-dark

Carte Discrète

Carte minimale pour contenu secondaire. Sans ombre, bordure subtile. Légère élévation au survol.

.card-simple

Échelle d'Ombres

Low

Carte par défaut

0 1px 3px rgba(38,37,30,0.04), 0 1px 2px rgba(38,37,30,0.03)

Mid

Survol de carte / élevée

0 4px 16px rgba(38,37,30,0.06), 0 1px 4px rgba(38,37,30,0.04)

Élevé

Conteneurs hero

0 8px 40px rgba(38,37,30,0.08), 0 2px 8px rgba(38,37,30,0.04)

Dark Glow

Cartes sur fond sombre

0 4px 24px rgba(0,0,0,0.3), 0 0 48px rgba(245,166,35,0.06)

Forme

Système de rayon

Quatre tokens de rayon. Les cartes utilisent 12–16px. Les boutons et pills utilisent 9999px pour un arrondi complet.

Petit

12px

--radius-sm

Cartes standard, champs de saisie

Moyen

12px

--radius-md

Rayon de carte par défaut

Grand

16px

--radius-lg

Cartes élevées, modales

Pill

9999px

--radius-pill

Boutons, tags, pills

Texture

Superposition de bruit granuleux

Les fonds sombres utilisent une texture de bruit générée sur canvas pour apporter de la profondeur. Pixels en niveaux de gris 256x256, alpha 40, rendus en superposition répétée à 70 % d'opacité avec mix-blend-mode: overlay.

Noise overlay active

Implémentation

import { NoiseOverlay } from "@/components/noise-overlay";

<section style={{ background: "linear-gradient(180deg, var(--navy-bg), var(--navy-deep))" }}>
  <NoiseOverlay opacity={0.7} />   {/* recommended for hero */}
  <NoiseOverlay />                 {/* defaults to 0.35 */}
  ...
</section>

Mise en page

Système d'espacement

Espacement serré des cartes (10px) pour la densité. Padding généreux des sections pour le rythme.

Usage	Valeur
Espacement de section	96px
Espacement hero	128px en haut, 64px en bas
Largeur maximale du contenu	1200px
Espacement horizontal	20px
Espacement des cartes	10px
Espacement de grille (2 colonnes)	64px
Rembourrage de carte	20–24px
Marge inférieure du label	14–16px

Mouvement

Timing des animations

Deux niveaux d'animation — micro pour les survols, composant pour les transformations. Un translateY de 2px subtil pour les entrées.

Micro

140ms ease-out

Boutons, bordures, changements de couleur au survol

Composant

220ms cubic-bezier(0.16, 1, 0.3, 1)

Transformations de cartes, changements d'onglets, entrées déclenchées au scroll

Structure

Fonds de section

L'alternance de sections chaudes et bleu marine crée un rythme visuel sur toute la page.

HeroRadial gradient across dark scale + noise#04082C

Carrousel de confiance#f7f7f4

Problème#f7f7f4

Bénéfices#f7f7f4

Témoignages#FFFFFF

Différenciateurs#F2F1ED

CTA final#f7f7f4

Pied de page#F2F1ED

Principes

Règles de design

Surface hierarchy

Light: Warm > Warm Card > White. Dark: 4-step scale — dark-1 (deepest) → dark-4 (surface). Never use pure gray.

Dual font system

Plus Jakarta Sans for headings (h1/h2/h3). Manrope for body, buttons, labels. Weight 500–600 for headings, 400 for body, 600 for buttons/labels.

Motion discipline

Two tiers only — micro (140ms) and component (220ms). Subtle 2px translateY.

Card system

4 types with distinct purposes. Dark cards use --surface-dark-2 bg with --border-dark borders and glow shadows.

Buttons

Gold gradient primary. Ghost for secondary. Always pill-shaped (9999px).

Accent separation

Gold for CTAs and headlines. Cyan (#38BDF8) for info/secondary. Green (#69DB7C) for success. Never mix roles.

Small text contrast

Use --gold-light (#F7C948, 7.6:1 AAA) for labels/badges. Use --dark-muted (#8A90A4, 4.6:1 AA) for captions on dark.

Borders

Light: rgba(38,37,30,0.10). Dark: solid --border-dark (#1E2D55) — no more transparent white borders.

Dark textures

Dark sections use grainy noise overlay + radial gradients across the dark scale for depth.