QuadraSuite
Design Tokens v2 — Preview de référence · Zéro valeur hard-codée
Tokens couleurs
–
Tokens techniques
–
Composants démo
8
Thème actif
dark
1 — Couleurs
Primitives (neutral, émeraude, ambre), sémantiques (bg, text, accent…), aliases de compatibilité. Chaque
swatch utilise background: var(--token).
Neutral Warm Scale
Émeraude Scale (accent primaire)
Ambre Scale (accent secondaire)
Sémantiques — Fonds & Texte
Sémantiques — Accents & États
Catégories produits
Aliases de compatibilité
Palette extraite · Top 5 utilisation
Selon l'audit d'usage mars 2026 (246 fichiers source). Une palette de 5 couleurs représente
80 % de l'utilisation totale. À elle seule, elle pourrait servir de base pour un design
simplifié ou un prototype, complétée par des états sémantiques (hover, disabled, etc.).
Palette Quadratik · Règle 60 — 30 — 10
La structure fondamentale de la marque. 60 % neutres (fond, texte, bordure), 30 % ambre secondaire (valeur), 10 % émeraude primaire (action). Cette proportion crée un équilibre visuel naturel et une hiérarchie claire.
Brand Kit — Identité visuelle
Les 5 couleurs qui définissent Quadratik. Indépendantes du thème dark/light, elles forment l'essence visuelle de la marque : deux teintes d'émeraude (action primaire), ambre (valeur secondaire), et les extrêmes de contraste (noir chaud, blanc pur). Cette palette est portable sur tous les supports.
2 — Typographie
QUADRATIK
Interface lisible, warm et fonctionnelle. La suite logicielle utilise cette famille pour tous les contextes applicatifs.
const accent = getComputedStyle(el).getPropertyValue('--accent');
3 — Espacement (base 4px)
Les barres représentent width: calc(var(--space-*) × 5).
4 — Border Radius
5 — Ombres
6 — Durées & Easing
7 — Z-index, Opacité, Blur, Tailles icônes
Z-Index scale
Opacité
Blur
Tailles d'icônes
8 — Logos
9 — Composants
Galerie des patterns UI couvrant toute la suite logicielle. Zéro couleur hard-codée.
Boutons
États sémantiques
Catégories produits
Formulaires
Tabs + Toast
Contenu de l'onglet actif…
Synchronisation réussie
Tokens mis à jour sur tous les projets connectés.
Tableau de données
| Token | Rôle | Valeur résolue |
|---|---|---|
| --accent | Action primaire | – |
| --secondary | Action secondaire | – |
| --bg-surface | Fond carte | – |
| --text-primary | Texte principal | – |
| --success | Succès | – |
| --error | Erreur | – |
Modal
Confirmer la publication
Cette action synchronise les tokens sur tous les environnements. Continuer ?
Skeleton & Opacité
10 — Couleur secondaire — Ambre
--secondary · #b08450
L'ambre est l'accent secondaire et chaud de la marque. Il ne remplace pas l'émeraude — il la complète. Saturation similaire (~45 %), teinte chaude adjacente (Δ ~35°) : ensemble ils forment un tandem « gemme + miel », distinctif du hifi-artisanal premium. L'émeraude capture l'action, l'ambre capture la valeur.
Règle des proportions 60 — 30 — 10
Tout design coloré équilibré suit cette règle de proportion. Une couleur domine (60 %), une seconde soutient (30 %) et une troisième accentue (10 %). Toute déviation crée un conflit visuel perçu comme « trop chargé » ou « sans hiérarchie ».
Fond page, cartes, fenêtres, zones de contenu. Ce sont les couleurs que l'œil « ne voit pas » — elles créent l'espace et le confort de lecture.
Zones d'accentuation chaude, éléments de support et décoration. Visible mais non dominant — guide l'œil vers la valeur sans écraser l'émeraude.
Actions, CTA, interactions primaires. Rare = puissant. N'utiliser que sur les éléments qui méritent d'attirer l'attention.
Exemple de répartition sur une interface
Usages validés de l'ambre
Border + texte ambre, fond transparent. CTA alternatif non dominant.
Fond ambre pâle + texte ambre. Nouveauté, promo, édition limitée.
Texte ambre uppercase avant un titre — hiérarchie visuelle premium.
Montant, note, KPI en ambre. La valeur capte l'œil sans écraser le CTA émeraude.
Étoiles d'évaluation produit. L'ambre évoque l'or et la récompense.
Ligne latérale ambre — identifie un contenu éditorial ou une sélection.
Texte lien au survol en ambre (nav secondaire). Distinct des liens primaires émeraude.
Dans le code, toujours le token sémantique — jamais la valeur brute.
color: var(--secondary);
border-color: var(--secondary);
background: var(--secondary-subtle);
11 — Identité de marque
Le logo, les deux polices de caractères et leur articulation visuelle. La marque Quadratik repose sur la tension entre deux typographies : alcubierre pour la puissance du titre, Nunito Sans pour la chaleur du discours.
Quadratik
Acoustique & Artisanat
--font-family-brand
Uniquement sur gros corps (24px+).
--font-family-body
Variable 200–900 · Google Fonts.
Quadratik
Acoustique & Artisanat