Palette Studio

Peu d'entrées, beaucoup de dérivation, une porte de validation — un sélecteur de couleur ne sait pas dire non, celui-ci le sait.

Projet cible

La palette est enregistrée pour ce projet — les apps qui le consomment la reçoivent.

Couleurs (10 entrées → 31 tokens)

MarqueEn-têtes, boutons principaux

AccentAction mise en avant, anneau de focus

LienLiens et informations

Fond de page

SurfaceFond des cartes

EncreTexte le plus sombre

Succès

Alerte

Erreur

Info

Typographie

Police

Taille de base 14 px

Échelle des titres

Les 7 niveaux (H1 → légende) sont dérivés de ces 3 réglages.

Contrastes (WCAG 2.1)

✓ Palette conforme — les 16 couples exigés passent

Premier plan	Fond	Ratio	WCAG
--text	--surface	17.85:1	AAA
--text	--bg	17.06:1	AAA
--text-muted	--surface	4.82:1	AA
--text-on-brand	--brand	14.89:1	AAA
--text-on-accent	--accent	6.65:1	AA
--link	--surface	5.17:1	AA
--field-border	--surface	3.01:1	AAA
--focus-ring	--surface	3.06:1	AAA
--success-text	--success-bg	4.63:1	AA
--warning-text	--warning-bg	4.62:1	AA
--error-text	--error-bg	4.66:1	AA
--info-text	--info-bg	4.65:1	AA
--success	--surface	3.3:1	AAA
--warning	--surface	3.06:1	AAA
--error	--surface	4.83:1	AAA
--info	--surface	5.17:1	AAA

:root{--bg:#F8FAFC;--surface:#FFFFFF;--surface-alt:#fafafb;--surface-inverse:#06284A;--text:#0F172A;--text-muted:#6d727e;--text-on-brand:#ffffff;--text-on-accent:#0f172a;--brand:#06284A;--brand-hover:#244260;--brand-active:#052341;--accent:#C9952C;--accent-hover:#cea041;--accent-active:#b18327;--link:#2563EB;--line:#ebecee;--line-strong:#dadcdf;--field-border:#92959a;--focus-ring:#bc8b29;--hover:#fafafb;--active:#f5f6f6;--disabled:#ebecee;--disabled-text:#898b90;--success:#16A34A;--success-bg:#e8f6ed;--success-text:#117e39;--warning:#cc8409;--warning-bg:#fef3e2;--warning-text:#996307;--error:#DC2626;--error-bg:#fceeee;--error-text:#d12424;--info:#2563EB;--info-bg:#eef3fd;--info-text:#2563EB;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:24px;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-6:48px;--space-8:64px;--shadow-sm:0 1px 2px rgba(15,23,42,.06);--shadow-md:0 2px 8px rgba(15,23,42,.08);--shadow-lg:0 12px 32px rgba(15,23,42,.12);--motion-fast:120ms;--motion-base:180ms;--motion-ease:cubic-bezier(.2,.7,.3,1);--font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;--font-h1-size:32px;--font-h1-weight:700;--font-h1-height:1.2;--font-h2-size:26px;--font-h2-weight:600;--font-h2-height:1.3;--font-h3-size:21px;--font-h3-weight:600;--font-h3-height:1.4;--font-bodyLg-size:17px;--font-bodyLg-weight:400;--font-bodyLg-height:1.6;--font-body-size:14px;--font-body-weight:400;--font-body-height:1.6;--font-small-size:12px;--font-small-weight:400;--font-small-height:1.5;--font-caption-size:11px;--font-caption-weight:400;--font-caption-height:1.4}

Importer une palette

Reprenez une palette existante : collez son CSS (ou son JSON de tokens), ou téléversez le fichier.

⬆ Téléverser un fichier

Intégration — les apps consomment cette palette

Une seule source : ce que vous composez ici s'applique partout. Deux modes, au choix de l'app.

<link rel="stylesheet" href="https://palette.amia.fr/theme.css?p=hadhinat">

Lien vivant — la palette change ici, l'app suit au prochain chargement.

import { loadTokens } from '../../mosta-palette/src/index.js';
const { css } = await loadTokens('https://palette.amia.fr/api/tokens?p=hadhinat');
// puis : <style>${css}</style> dans la coquille (zéro requête navigateur)

Rendu serveur — l'app récupère les tokens au démarrage et les inline : aucune dépendance réseau côté visiteur.

Consommateurs déclarés : hadhinat · atc · salsabil

Aperçu en direct — largeurs réelles (1280 px / 390 px), les media queries s'appliquent vraiment.

💻 Bureau — 1280 px

📱 Mobile — 390 px

Système de design

Aperçu des composants, tokens et variantes

◆HADHINAT

1. Palette de couleurs

Couleurs de marque

Marque#06284A

Accent#C9952C

Lien#2563EB

Encre#0F172A

Neutres (dérivés)

Surface#FFFFFF

Fond#F8FAFC

Alt#fafafb

Filet#ebecee

Contour#92959a

Atténué#6d727e

États

Succès#16A34A

Alerte#cc8409

Erreur#DC2626

Info#2563EB

2. Typographie

Titre principal H1

Titre secondaire H2

Titre section H3

Texte courant large

Texte courant standard

Texte secondaire / aide

Légende / caption

3. Boutons

Primaires

Lien tertiaire

États

4. Champs de saisie

Standard

Sélection

Multi-ligne

Focus (anneau ≥ 3:1)

ErreurMessage d’erreur affiché

Désactivé

5. Cartes

▣

Carte standard

Une carte avec une ombre légère et un contenu d’exemple.

▲

Carte accentuée

Une couleur d’accent et un contenu mis en avant.

◈

Carte informative

Une bordure colorée et un contenu.

6. Alertes

Succès ! Votre action a été effectuée avec succès. ✕

Attention ! Veuillez vérifier les informations saisies. ✕

Erreur ! Une erreur est survenue. Veuillez réessayer. ✕

Information Voici une information importante. ✕

7. Navigation

Onglet actif Onglet inactif Onglet inactif

8. Tableaux

Nom	Email	Rôle	Statut
Jean Dupont	jean@exemple.com	Admin	Actif
Marie Martin	marie@exemple.com	Éditeur	En attente
Pierre Durand	pierre@exemple.com	Utilisateur	Inactif

9. Badges & étiquettes

ActifEn attenteInactifBrouillonArchivé

Étiquettes

NouveauImportantUrgentInfoTerminé

10. Iconographie

🏠👤⚙️🔍🔔✉️📅📊📁🗑️✏️➕

11. Composants divers

Option sélectionnée

Option non sélectionnée

Option sélectionnée

Option non sélectionnée

Interrupteur actif

Interrupteur inactif

‹123…›

12. Espacement & rayons

Espacements (grille de 8 px)

8px

16px

24px

32px

48px

64px

Rayons de bordure

4px

8px

12px

16px

24px