Aller au contenu
Hermès Skills
← Retour au catalogue
MX Hermès Core Hermès standard

web-design

Design System Reference & HTMX Component Library cloned from cieloverde.ca with multi-theme color variations support.

Quand l'utiliser (Trigger)

Déclenchement standard selon le contexte de l'écosystème Hermès.

Mode d'emploi (Usage) 

Mode d'emploi standard via l'agent Hermès.

Web Design Skill — Design System Cieloverde & HTMX

Ce skill fournit le Design System complet dérivé de cieloverde.ca, optimisé pour des applications web ultra-soignées avec HTMX.

Directives d’utilisation

  1. Obligation HTMX : Toutes les pages doivent utiliser HTMX (hx-get, hx-target, hx-swap, hx-post) pour l’interactivité dynamique sans rechargement de page. Tout le contenu initial doit être pré-rendu dans le HTML (zéro page blanche, SEO ready).
  2. Design Tokens & Variantes de couleur : Utiliser impérativement des variables CSS (:root) pour permettre des déclinaisons instantanées par simple changement de palette.
  3. Structure & Typographie :
    • Titres : Polices élégantes avec forts contrastes de taille (Serif / Display ou Sans-Serif haut de gamme Jessi Neue / Outfit / Inter).
    • Boutons : Arrondis (Pill style border-radius: 40px ou Minimalist Border 1px solid).
    • Cartes et Listes : Mises en page alternées (Odd-Even), séparateurs discrets 1px solid var(--color-border).
    • Modales / overlays : Dark forest green ou couleur primaire sombre avec accents néon/vibrants.

Fichiers de référence

Palettes de déclinaison prédéfinies

1. Palette Cieloverde Originelle (Forest & Gold)

:root {
  --color-primary: #1C382E;
  --color-primary-hover: #132720;
  --color-accent-gold: #EDC864;
  --color-accent-mint: #30FD69;
  --color-border-accent: #62C17B;
  --color-bg-main: #FFFFFF;
  --color-bg-alt: #F4F6F2;
  --color-bg-dark: #1C382E;
  --color-text-main: #343434;
  --color-text-muted: #727F9F;
  --color-text-light: #F4F6F2;
  --color-border: #343434;
  --color-border-light: rgba(52, 52, 52, 0.15);
}

2. Palette Dashboard Orchestration (Indigo & Electric Blue)

:root {
  --color-primary: #1E1B4B;
  --color-primary-hover: #110E38;
  --color-accent-gold: #6366F1;
  --color-accent-mint: #38BDF8;
  --color-border-accent: #818CF8;
  --color-bg-main: #FFFFFF;
  --color-bg-alt: #F8FAFC;
  --color-bg-dark: #0F172A;
  --color-text-main: #1E293B;
  --color-text-muted: #64748B;
  --color-text-light: #F8FAFC;
  --color-border: #334155;
  --color-border-light: rgba(51, 65, 85, 0.15);
}

3. Palette TutoIA / V3ille (Amber & Deep Cyan)

:root {
  --color-primary: #0F2C59;
  --color-primary-hover: #081B38;
  --color-accent-gold: #F86F03;
  --color-accent-mint: #00F0FF;
  --color-border-accent: #47B5FF;
  --color-bg-main: #FFFFFF;
  --color-bg-alt: #F4F7FA;
  --color-bg-dark: #0B192C;
  --color-text-main: #1F2937;
  --color-text-muted: #6B7280;
  --color-text-light: #F9FAFB;
  --color-border: #374151;
  --color-border-light: rgba(55, 65, 81, 0.15);
}