Design System Editorial

Source de vérité unique des composants WEVAL. Adopté de demo-agents.html, validé par USER, compatible Lyti D807 contrast guard. Une référence, partout.

Comment l'utiliser Voir le CSS source

Tokens

Variables CSS · changez 1 fois, propage partout

Couleurs

--we-bg

#faf7f5 · page background

--we-bg2

#ffffff · paper card

--we-fg

#faf7f5 · primary text

--we-fg2

#555 · secondary

--we-fg3

#999 · tertiary

--we-a

#3730A3 · indigo primary

--we-al

#6366F1 · indigo light

--we-g

#f5f0eb · success

--we-r

#B91C1C · danger

--we-o

#B45309 · warning

--we-bd

#E8E2D9 · warm border

Couleurs secteurs

--we-sec-pharma

💊 #7c3aed

--we-sec-banking

🏦 #1e40af

--we-sec-public

🏛️ #dc2626

--we-sec-industry

🏭 #475569

--we-sec-retail

🛍️ #be185d

--we-sec-edu

🎓 #0ea5e9

--we-sec-energy

⚡ #b45309

--we-sec-health

⚕️ #0891b2

--we-sec-logistics

🚚 #0284c7

--we-sec-startups

🚀 indigo

Typography

DM Sans · weight 300/400/500/600 · letter-spacing negatif

H1 · Editorial display

H2 · Section title

H3 · Subsection title

Sub paragraph · weight 300 · color fg2 #555. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body text · 15px / line-height 1.7 / weight 400 · color fg #faf7f5. Strong elements weight 600.

Small label · uppercase · letter-spacing 0.5 · fg3 #999

Mono · JetBrains Mono · code · URL · IDs

Buttons

3 variants · hover translateY -1px

Cards

we-card · we-card-stripe · we-feat

Sector cards (with stripe top)

💊

Pharma & Sciences de la Vie

?sector=pharma

IA souveraine pour HCP, R&D et conformité réglementaire

🏦

Banque & Finance

?sector=banking

Bâle III · CNDP · risk management · AML/KYC ML

🏭

Industrie 4.0

?sector=industry

Maintenance prédictive · MES · OPC-UA · IATF

Feature cards (icon + title + desc)

⚡

Cascade 0€

13 providers IA gratuits cascade T0→T3

🇲🇦

Souverain EU/Maghreb

Hosting CNDP-ready + RGPD aligned

🚀

Propale 5 jours

J+0 contact → J+5 PPTX + PDF + deck animé

📞

CEO direct

USER ex-PwC contact direct sans funnel

Components

Badges · promise · footer

Badges

PRIMARY SUCCESS DANGER WARNING

🚀 Promise / Callout default (indigo)

Highlighted content with left accent stripe. Use for value propositions, key messages.

✅ Promise success (green)

Validation, completion, positive signal.

Usage

3 étapes pour adopter le design system sur une nouvelle page

1. Inclure dans le <head>

<!-- Google Fonts DM Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="/css/fonts-local.css" rel="stylesheet">

<!-- WEVAL Editorial Design System -->
<link rel="stylesheet" href="/assets/weval-editorial.css">

2. Adopter sur le <body>

<body class="we-reset we-body">
  <!-- contenu -->
</body>

3. Composer avec les classes

<nav class="we-nav">
  <a class="we-nav-l" href="/">WEVAL <b>· Page</b></a>
</nav>

<section class="we-hero">
  <h1 class="we-h1">Titre <strong>accent</strong></h1>
  <p class="we-sub we-hero-sub">Description...</p>
  <button class="we-btn we-btn-primary">Action</button>
</section>

<div class="we-grid">
  <div class="we-card we-card-stripe" data-sec="pharma">
    ...
  </div>
</div>

Pages déjà migrées

🎯

sectors-pitch.html

Catalogue 10 secteurs avec QR codes

🖨️

sectors-cards-print.html

Cartes secteur imprimables A4

⚡

demo-agents.html

Source pattern original

📦 Bénéfices

1 source de vérité · changement de couleur ou typo propagé instantanément sur toutes les pages adoptantes.
Cohabitation Lyti D807 · light theme natif, plus de gradient cassé.
13 KB CSS · cache navigateur après 1ère visite, pas de duplication par page.