WEVAL · Charte Graphique

01 · Palette officielle

Couleurs validées sur index.html LIVE + logo principal + propale Marbio · 100% brand-aligned

Backgrounds & textes

Cream Background

--we-bg · #faf7f5Body principal · home ×74 occurrences

Paper White

--we-bg2 · #FFFFFFCards · panels · containers

Near-Black

--we-fg · #1B1B1BText principal · home ×50

Mid Gray

--we-fg2 · #555Text secondaire

Soft Gray

--we-fg3 · #999Labels · captions

Warm Beige

--we-bd · #E8E2D9Borders · dividers

Accent primaire & brand

WEVAL Indigo

--we-a · #3730A3Primary actions · highlights

Deep Indigo

--we-a-deep · #312e81Main logo color · dark variants

Bright Indigo

--we-a-light · #6366F1Hover · active states

Marbio premium accents (propales)

Navy Deep

--we-navy · #1a1a2eSection dividers Marbio · premium feel

WEVAL Gold

--we-gold · #D4A53B"PARTIE I" Marbio · premium highlights

Teal Deep

--we-teal-deep · #f5f0ebDecorative · success states

Teal Bright

--we-teal-bright · #00a896Marbio rituals badges

02 · Typographie

DM Sans (web/UI) + Cormorant Garamond (branding/propale) + JetBrains Mono (code)

UI · Web · Body · Headings

DM Sans · 9–40

Variable font cohérente pour toute l'interface. 300-700 weight, optical size 9-40. Default body 14px. Headings -.02em letter-spacing.

var(--we-font)

Branding · Propales premium · Initials

WEVAL Consulting

Serif élégant pour branding (logo serif, section dividers Marbio style, initials décoratives). Cormorant Garamond avec italics premium.

var(--we-font-serif)

Code · KPIs · Tabular numbers

+213% · 1.5M MAD

Monospace pour KPIs numériques (alignement tabular), code, références techniques. JetBrains Mono lisible.

var(--we-font-mono)

Échelle typographique

H1 · 40px

H2 · 28px

H3 · 20px

Body · 14px

Caption · 11px

03 · Composants brand

Nouveautés D-OPUS94 · alignés Marbio premium

Brand mark serif (Marbio style)

WEVAL Consulting

Class: we-brand-mark

WEVAL Consulting

Class: we-brand-mark dark

Initial décorative (Marbio "I")

Introduction

Class: we-initial (teal default)

Notre méthode

Class: we-initial gold

Eyebrow tag (Marbio "PARTIE I")

Partie I · Présentation

Titre de section éditoriale

Class: we-eyebrow

Cards premium

Premium Gold Card

Carte avec accent gold top stripe. Pour highlights premium.

we-card-gold

Navy Outlined Card

Carte avec accent navy left border. Pour sections sobres.

we-card-navy

Boutons & badges premium

Primary Indigo ⭐ Premium Gold Outline Ghost Standard ⭐ Premium Success

04 · Logos officiels

2 marques distinctes : WEVAL (cabinet conseil) + WEVIA (plateforme IA souveraine)

WEVAL · Marque corporate (cabinet conseil)

Source : homepage React bundle index-BcECjySJ.js import logo2-DsaLZ4-U.png. Deep indigo · marque géométrique ▽ + "Weval" wordmark + ®.

logo2-DsaLZ4-U.png
⭐ HOMEPAGE

Logo_weval2.png
Variant identique

logo-weval-transparent.png
Transparent bg

logo-weval-png.png
Format large

WEVIA · Marque IA souveraine (plateforme produit)

Source : diagnostic-tool.html <img src="/assets/logo-wevia-official.svg">. Cerveau + synapses · gradients violet (#7c3aed / #7c3aed) + cyan (#0891b2 / #4b5563) + nœud central emerald.

logo-wevia-official.svg
⭐ DIAGNOSTIC-TOOL

logo-wevialife.svg
Product variant

logo-wevia-enterprise.svg
Product variant

logo-wevia-whitelabel.svg
Whitelabel partners

Bannière hero officielle (fond sombre)

wevalHeader.png · navy + waves abstraites · hero pages

⚠️ Distinction WEVAL vs WEVIA

WEVAL · Cabinet conseil

Entité légale : SAS WEVAL Consulting
Logo : géométrique ▽ + "Weval"
Couleur : indigo deep #f5f0eb
Style : corporate, professionnel, Big4-style
Usage : homepage, propales, présentations, contrats

WEVIA · Plateforme IA

Produit : plateforme IA souveraine de WEVAL
Logo : cerveau + synapses + nœuds
Couleurs : violet #7c3aed + cyan #4b5563
Style : tech innovation, AI-native, futuriste
Usage : diagnostic-tool, dashboards, agents, WEVIA Master/Life/Enterprise

Règles d'usage

✅ À faire

Choisir WEVAL pour : corporate, branding, contrats, propales
Choisir WEVIA pour : produits IA, dashboards, agents, démos tech
Espace blanc minimum autour : hauteur de la marque
Taille minimum : 32×32px (mark) · 80×60px (lockup)

❌ Ne pas faire

Confondre WEVAL (cabinet) et WEVIA (produit)
Utiliser couleur WEVIA sur le logo WEVAL ou inverse
Déformer (stretching horizontal/vertical)
Changer les proportions internes
Ajouter effets ombre/glow non-officiels

04b · Suite produits officielle

Logos officiels par produit · source /assets-propale/ · usage propales clients

logo_consulting.svg
SVG · 790 bytes · cabinet conseil

logo_wevia_official.svg
SVG · 3.9 KB · plateforme IA principale

logo_wevia_enterprise.svg
SVG · 409 bytes · variant Enterprise

logo_wevia_whitelabel.svg
SVG · 889 bytes · whitelabel partners

Screens produits (mockups officiels)

12+ captures écran disponibles dans /assets-propale/screen_*.png · à utiliser dans capabilities-showcase + propales pour visuels authentiques.

screen_arsenal_ceo.png

screen_arsenal_brain.png

screen_demo_agents.png

screen_diagnostic_tool.png

screen_architecture.png

screen_maturity_diagnostic.png

screen_arsenal_perf.png

screen_enterprise.png

Premium · Marbio style

Sections dark premium

Pour les section dividers de propales et présentations premium · navy #1a1a2e avec accents gold.

WEVAL Consulting

Cabinet de conseil & ingénierie IA souveraine.

Card sur fond dark

Background transparent · border soft white.

Badge sur dark

Badge auto-adapted.

⭐ Bouton gold

Premium CTA on dark.

05 · Usage practical

Pour utiliser la charte dans une nouvelle page :

Inclure /assets/weval-editorial.css dans le <head>
Charger les fonts : DM Sans + Cormorant Garamond + JetBrains Mono via Google Fonts
Utiliser --we-a indigo pour les actions standards
Réserver --we-gold pour les highlights premium (rare = précieux)
Utiliser .we-section-dark pour sections premium (style Marbio)
Utiliser .we-brand-mark serif pour "WEVAL Consulting" branding

💡 Règle d'or : la palette éditoriale (cream + indigo + black) reste DÉFAUT. Les accents Marbio (navy + gold + serif) sont RÉSERVÉS aux propales premium et section dividers.

Charte graphique