01 · Principes

Quatre règles non négociables qui orientent toutes les décisions de design d'Univers.

01

Éditorial avant tableau de bord

On raconte Olaqin avant de mesurer Olaqin. Place à la photo, à la typographie, aux gens. La donnée vient ensuite, contextualisée.

02

Humain & sobre

Les illustrations brand et les visages des collaborateurs portent l'identité. Pas d'icônes inventées, pas d'IA slop, pas de gradient gratuit.

03

Tokens, pas valeurs

Aucune couleur, aucun radius, aucune taille en dur dans les composants : tout passe par une variable CSS. Le dark mode et la prochaine refonte se font sans toucher au markup.

04

Accessible par défaut

Contrastes WCAG AA, statuts toujours doublés d'un texte et d'une icône, tailles minimum 14 px (44 px sur mobile pour les zones tactiles).

02 · Couleurs charte

Palette brute extraite de la charte officielle Olaqin. Les variables --olq-* sont les valeurs sources, jamais référencées directement dans les composants — utiliser les tokens sémantiques de la section suivante.

Primaire — Violet

Violet

--olq-violet#c2b0ff

Violet Dark

--olq-violet-dark#7c6bc4

Violet Darker

--olq-violet-darker#5a4a9e

Lila

--olq-lila#b9aafb

Accents — pastels complémentaires

Bleu

--olq-bleu#9abeff

Vert

--olq-vert#96d9c4

Jaune

--olq-jaune#ffd6ab

Corail

--olq-corail#ffc4a3

Rose

--olq-rose#fbb1ae

Neutres — surfaces & textes

Noir charbon

--olq-noir#1a1a1a

Beige

--olq-beige#f2ebe8

Beige Warm

--olq-beige-warm#f7f0ec

Beige Deep

--olq-beige-deep#e8ddd8

Blanc pur

#ffffffsurface

03 · Tokens sémantiques

Couche d'abstraction au-dessus des couleurs brutes. Toujours référencée dans le code — ces tokens basculent automatiquement en dark mode via [data-theme="dark"].

--bgbackground page

--bg-altbeige section

--surfacecartes

--surface-2hover, lignes alt

--textcorps

--text-mutedsous-titre

--text-softmeta, date

--accentviolet principal

--accent-dkCTA primaire

--successpositif

--warningattention

--dangererreur, suppression

--infoinformation

--border-2bordure forte

04 · Typographie

Montserrat porte la voix éditoriale (titres, marques, eyebrows). Inter porte la lecture (corps, UI). JetBrains Mono porte les valeurs techniques (code, identifiants, montants). Aucune autre famille n'est autorisée.

Display Tout Olaqin, au même endroit. Montserrat · 900 · clamp(48-108px)

H1

La charte vivante

Montserrat · 800 · 36-64px

H2

Chaque équipe, son univers

Montserrat · 800 · 28-44px

H3

Notes de frais à valider

Montserrat · 700 · 22-30px

Eyebrow Charte vivante · v2 Montserrat · 700 · 11px · uppercase

Lead

Vos collègues, vos outils, l'actualité de l'entreprise. Un seul portail pour simplifier votre quotidien.

Inter · 400 · 17px · 1.65

Body

Univers regroupe vos 9 hubs métier, votre annuaire des 96 collaborateurs et tous les outils du quotidien.

Inter · 400 · 14px · 1.5

Small / meta

Par Josué Smadja · il y a 2 heures · 4 min de lecture

Inter · 500 · 12.5px

Mono --olq-violet: #c2b0ff; JetBrains Mono · 500 · 13px

05 · Espacement

Échelle multipliée par 4 px. Toujours utiliser --sp-N plutôt qu'une valeur en dur. Le gap des grilles, les paddings, les margins entre sections — tout passe ici.

--sp-1

4 px · micro

--sp-2

8 px · gap chips

--sp-3

12 px · gap form

--sp-4

16 px · padding carte sm

--sp-5

20 px

--sp-6

24 px · padding carte

--sp-8

32 px

--sp-10

40 px

--sp-12

48 px · section sm

--sp-16

64 px · section

--sp-20

80 px · hero

--sp-24

96 px · hero XL

06 · Radius & ombres

Coins arrondis et profondeur. Privilégier les rayons de l'échelle. Pour les boutons et tags : toujours --r-pill.

Radius

--r-xs · 6px

--r-sm · 8px

--r-md · 12px

--r-lg · 16px

--r-xl · 20px

--r-2xl · 24px

--r-pill · 999px

Ombres

sh-xscontour ténu

sh-smélément posé

sh-mdcarte hover

sh-lgmodal

sh-xlpopover

sh-violetCTA primaire

07 · Boutons

Hiérarchie claire : primary (action principale, une seule par écran), secondary noir, ghost contour, soft tinted, danger destructif. Toujours en pill --r-pill.

Primary — action principale

.btn.btn-primary

Secondary — neutre fort

.btn.btn-secondary

Ghost — sortie discrète

.btn.btn-ghost

Soft — action liée à la marque

.btn.btn-soft

Danger — destructif

.btn.btn-danger

Light — sur fond sombre

.btn.btn-light

États

Icon-only

08 · Formulaires

Inputs cohérents, label visible (jamais en placeholder seul), focus ring violet 4px, hint et erreur en dessous, tous champs au minimum 44 px de haut sur mobile.

E-mailAdresse Olaqin officielle

Mot de passe

Pôle métier

Recherche

Description

ErreurFormat de l'IBAN invalide

Désactivé

J'accepte les conditions N+1 standard Validation auto Notifications

09 · Badges & statuts

Statut = couleur + texte (+ pastille). Jamais couleur seule, pour l'accessibilité. Le fond est toujours tinté à 18-22 % du ton brut.

Brouillon En cours Validé En attente Rejeté Confidentiel

Nouveau 96 collaborateurs 7 tickets +12 % -3,2 %

10 · Cartes

Quatre variantes : standard (bordure), elevated (ombre), tinted (beige) et dark (charbon). Le radius standard est --r-lg · 16 px ; pour les cartes hero, monter à --r-2xl.

Standard

Note de frais — Avril 2026

3 justificatifs · 142,50 €

Elevated · Hover

Bienvenue Antoine

Business Dev · depuis le 5 mai

Tinted

Salon HIT 2026

22 mai · Porte de Versailles

Dark

99,5 %

Uptime Univers · 30j

11 · Alertes

Pour communiquer un statut système (succès, info, warning, danger). Toujours munies d'une icône et d'un titre court.

ℹ

Information

Une maintenance réseau est prévue le 12 mai entre 22h et 23h. Univers restera accessible.

✓

Note de frais validée

Votre note de 142,50 € a été validée par Josué Smadja. Virement sous 5 jours ouvrés.

⚠

Justificatif manquant

Le taxi du 18 avril n'a pas de pièce jointe. Validation impossible tant qu'il manque.

●

Alerte Atlantis — Critique

CPU au-dessus de 90 % sur destiny-2 depuis 10 min. Action requise.

12 · Tableaux

Pour les données denses. En-têtes en uppercase 11 px, lignes alternées au hover beige.

Date	Bénéficiaire	Description	Montant	Statut
21/05/2026	Jean Dupont	Déplacement client Paris	142,50 €	En attente
18/05/2026	Mathilde COLONDON	Repas équipe Dev	48,00 €	Validé
15/05/2026	Anthony SARACINO	Forfait roaming Allemagne	29,90 €	Rejeté
12/05/2026	Laurent Cogneau	Taxi gare → siège	22,40 €	Validé

13 · Avatars

Initiales sur dégradé d'accents en fallback. Photo réelle quand disponible. Quatre tailles : sm 28 / base 36 / lg 52 / xl 80.

JS

FT

LC

AM

JS

FT

LC

AM

+12

Annuaire : 96 collaborateurs

14 · Iconographie

Pas de librairie tierce (Material, Feather, Heroicons). Univers utilise uniquement la collection brand Olaqin : illustrations « Kit objets », personnages e-santé, mains, formes organiques. Pour les micro-icônes UI (chevron, croix, recherche) : emoji ou SVG inline.

Kit objets brand

stethoscope

coeur

check

croix-medicale

bulle

dossier

cloud

smartphone

ordinateur

ligne-vie

Tuiles icônes UI

📁

🎫

✓

⏱

!

♥

⚡

🧾

📰

👥

🎂

Personnages e-santé

Formes organiques (décor seulement)

15 · Layout & grille

Container central 1340 px, padding fluide clamp(20px, 4vw, 48px), breakpoints mobile-first : 640 / 900 / 1280 / 1600.

Token	Valeur	Usage
--container	1340 px	Largeur max contenu
--container-narrow	880 px	Articles, formulaires longs
@media (min-width: 640px)	sm	Tablette portrait
@media (min-width: 900px)	md	Tablette paysage / laptop
@media (min-width: 1280px)	lg	Desktop
@media (min-width: 1600px)	xl	Grand écran