Charte Graphique — Meridian 127

1. Palette de couleurs

Couleurs principales

PRIMARY

Orange Meridian 127

HEX #FF6B35
RGB 255, 107, 53

PRIMARY DARK

Orange foncé

HEX #E55A2B
RGB 229, 90, 43

SECONDARY

Vert Meridian 127

HEX #00D4AA
RGB 0, 212, 170

Couleurs d'accent

ACCENT WARM

Jaune doré

HEX #FFB800
RGB 255, 184, 0

ACCENT COOL

Bleu ciel

HEX #00BFFF
RGB 0, 191, 255

Couleurs de fond

BG PRIMARY

Noir profond

HEX #0A0A0B
RGB 10, 10, 11

BG SECONDARY

Gris très foncé

HEX #121214
RGB 18, 18, 20

BG TERTIARY

Gris anthracite

HEX #1A1A1D
RGB 26, 26, 29

Couleurs de texte

TEXT PRIMARY

Blanc pur

HEX #FFFFFF

TEXT SECONDARY

Gris clair

HEX #A0A0A5
RGB 160, 160, 165

Glass & ombres

GLASS BG

Verre

rgba(255, 255, 255, 0.03)

GLASS BORDER

Bordure verre

rgba(255, 255, 255, 0.08)

2. Typographie

Police titre — Syne

Google Fonts · Syne · Titres, logo, boutons, navigation

Regular 400 Meridian 127 Aa

SemiBold 600 Meridian 127 Aa

Bold 700 Meridian 127 Aa

ExtraBold 800 Meridian 127 Aa

Police corps — Inter

Google Fonts · Inter · Corps, descriptions, labels

Light 300 Meridian 127 Aa

Regular 400 Meridian 127 Aa

Medium 500 Meridian 127 Aa

SemiBold 600 Meridian 127 Aa

Échelle typographique

3.5rem Hero Title

2.2rem Section Title

1.8rem Card Title

1.2rem Sous-titre / Lead text

1.1rem Corps de texte principal

1rem Texte standard

0.85rem Légende / Note

Largeur de colonne maximale pour le corps de texte : 75 caractères (max-width: 75ch)

3. Dégradés

linear-gradient(135deg, #FF6B35, #FFB800)

Gradient Primary — Boutons primaires, CTA, badges SEO

linear-gradient(135deg, #00D4AA, #00BFFF)

Gradient Secondary — Boutons secondaires, badges GEO, accents

linear-gradient(135deg, #FF6B35, #FFB800, #00D4AA)

Gradient Text — Textes dynamiques, titres animés

linear-gradient(135deg, #00D4AA, #00BFFF)

Gradient Alt — Textes dynamiques alternatifs

Brand colors loop — Glow navigation

Gradient Nav Glow — Animation multicolore des boutons de navigation (background-size: 400%)

4. Boutons

Variantes

Bouton primaire Bouton secondaire Bouton outline

Spécifications

Border-radius	`12px`
Padding	`0.75rem 2rem`
Font	Syne, SemiBold 600
Transition	`0.3s cubic-bezier(0.4, 0, 0.2, 1)`
Hover	`translateY(-2px)` + ombre portée

Détail par variante

Primaire	Background: `linear-gradient(135deg, #FF6B35, #FFB800)` · Texte: `#FFFFFF`
Secondaire	Background: `linear-gradient(135deg, #00D4AA, #00BFFF)` · Texte: `#FFFFFF`
Outline	Background: `transparent` · Bordure: `rgba(255,255,255,0.15)` · Hover: `rgba(255,255,255,0.1)`

5. Glassmorphism

Glass Card

Les cartes de contenu utilisent l'effet glassmorphism pour un design moderne et profond.

Background	`rgba(255, 255, 255, 0.03)`
Border	`1px solid rgba(255, 255, 255, 0.08)`
Backdrop-filter	`blur(10px)`
Border-radius	`20px` (variable `--border-radius`)
Box-shadow	`0 8px 32px rgba(0, 0, 0, 0.4)`
Hover	`translateY(-2px)` + border `rgba(255,255,255,0.15)`

6. Espacements

--spacing-xs · 0.5rem (8px)

--spacing-sm · 1rem (16px)

--spacing-md · 2rem (32px)

--spacing-lg · 4rem (64px)

--spacing-xl · 6rem (96px)

Container max-width : 1200px · Padding horizontal : var(--spacing-md)

7. Effets & animations

Fond de page	Deux radial-gradients subtils (orange + vert) sur fond `#0A0A0B`, `background-attachment: fixed`
Cursor Glow	Halo 600×600px suivant la souris · `radial-gradient(circle, rgba(255,107,53,0.15), transparent 70%)` · opacity `0.4` · z-index `10`
Nav Glow	Animation `glowing` multicolore sur hover · gradient `45deg` loop avec brand colors · `filter: blur(5px)` · `20s linear infinite`
Texte rotatif	5 mots en rotation · dégradé bi-chromie (Primary→Warm ou Secondary→Cool) · transition `0.6s cubic-bezier(0.4, 0, 0.2, 1)` · intervalle `3s`
Shimmer	Animation `background-size` sur textes gradient · `3s ease-in-out infinite`
Popup Hero	Apparition après 3s · `opacity 0→1` + `translateY(40px→0)` · `0.8s ease-out` · fermeture avec croix

8. Iconographie

Librairie	Lucide Icons — lucide.dev
Style	Swiss Design · Linéaire · Minimaliste · Géométrique
Taille standard	`24×24px` (navigation, listes) · `48×48px` (features, illustrations)
Stroke-width	`1.5` (features) · `2` (par défaut)
Couleur	Héritée du parent · `var(--primary-color)` pour accents · `var(--secondary-color)` pour validations
CDN	`https://unpkg.com/lucide@latest`

Utilisation : <i data-lucide="icon-name"></i> puis lucide.createIcons()

9. Identité de marque

Nom	Meridian 127
Tagline	Experts en visibilité digitale nouvelle génération
Positionnement	Agence spécialisée SEO + GEO (Generative Engine Optimization)
Cible	PME et entreprises locales (hôtels, artisans, commerces) en Suisse
Ton de voix	Professionnel, accessible, sans jargon technique inutile
Domaine	meridian.ch
Webmaster	Marc Facchinetti

10. Breakpoints responsive

Desktop large	`> 1200px` — Layout complet, grille 3 colonnes
Desktop	`> 1024px` — Navigation complète, 2 colonnes
Tablet	`> 768px` — Menu hamburger, grille adaptée
Mobile	`> 480px` — 1 colonne, tailles réduites
Small mobile	`≤ 480px` — Padding réduit, texte compact

11. Règles d'usage

✓ À faire

Utiliser Syne pour les titres, Inter pour le corps
Fond sombre #0A0A0B avec texte blanc
Glassmorphism pour les cartes de contenu
Dégradés pour les CTA et éléments d'accent
Icônes Lucide exclusivement
Border-radius 12-20px pour cohérence visuelle
max-width: 75ch pour le corps de texte
Chiffres en font-variant-numeric: tabular-nums

✗ À éviter

Fond blanc ou clair pour les pages
Couleurs vives en aplat (toujours en dégradé)
Emojis (remplacer par Lucide Icons)
Coins carrés (toujours arrondis)
Texte trop long sans max-width
Ombres portées fortes (glassmorphism subtil)
Polices supplémentaires non approuvées
Jargon technique sans explication