DémarrerGet started

Adopter Agentica, c'est consommer des décisions — pas des valeurs. Trois niveaux de tokens, 14 composants, six plateformes de sortie, le tout auditable WCAG 2.2. Voici comment l'intégrer en quelques minutes. Adopting Agentica means consuming decisions — not values. Three token levels, 14 components, six output platforms, all WCAG 2.2 auditable. Here is how to integrate it in minutes.

Pré-version (v0.x)Pre-release (v0.x) Aujourd'hui, Agentica se consomme directement depuis le dépôt (tokens compilés + Web Components). La publication sur npm est à venir — les commandes npm ci-dessous décrivent la trajectoire cible. Today, Agentica is consumed directly from the repository (compiled tokens + Web Components). Publishing to npm is coming — the npm commands below describe the target path.

Ce que vous obtenezWhat you get

Tokens à 3 niveaux3-level tokens

Primitif → sémantique → composant. Les valeurs sont séparées des intentions — lisibles par les humains et les agents.Primitive → semantic → component. Values are separated from intentions — readable by humans and agents.

14 composants14 components

Web Components framework-agnostic (Lit), ou classes CSS. Chaque composant est un contrat, pas une suggestion.Framework-agnostic Web Components (Lit), or CSS classes. Each component is a contract, not a suggestion.

6 plateformes6 platforms

CSS, JS, Tailwind, Angular, iOS, Android — une seule source de vérité, compilée partout.CSS, JS, Tailwind, Angular, iOS, Android — one source of truth, compiled everywhere.

Trois étapesThree steps

1. Récupérer les tokens1. Get the tokens

Clonez le dépôt. Les tokens sont déjà compilés pour chaque plateforme dans dist/tokens/. Clone the repository. Tokens are pre-compiled for every platform in dist/tokens/.

# Today — via the repository
git clone https://github.com/gnegreiros-ux/agentic-design-system.git

# Compiled tokens live in dist/tokens/:
#   css/  js/  tailwind/  angular/  ios/  android/

2. Importer et consommer les variables CSS2. Import and consume the CSS variables

Liez la feuille de tokens, puis référencez les variables sémantiques par leur intention. C'est l'approche que ce site lui-même utilise. Link the token sheet, then reference semantic variables by their intent. This is the approach this very site uses.

<!-- Importer les variables CSS générées -->
<link rel="stylesheet" href="dist/tokens/css/all.css">

<!-- Ajouter dark.css pour le support du mode sombre -->
<link rel="stylesheet" href="dist/tokens/css/dark.css">

/* Consume by INTENT — never hardcode values */
.cta {
  background: var(--agtc-semantic-color-action-primary);
  color:      var(--agtc-semantic-color-text-on-action);
  padding:    var(--agtc-semantic-space-control-padding-y)
              var(--agtc-semantic-space-control-padding-x);
  border-radius: var(--agtc-semantic-radius-control);
}

2b. Mode sombre (dark mode)2b. Dark mode

Chargez dark.css après all.css. Ce fichier contient les 38 tokens qui changent de valeur en mode sombre, sous le sélecteur [data-theme="dark"]. Ajoutez ensuite l'attribut sur <html> et pilotez-le avec un toggle JS. Load dark.css after all.css. This file contains the 38 tokens that change value in dark mode, under the [data-theme="dark"] selector. Then add the attribute on <html> and drive it with a JS toggle.

<!-- Mode sombre actif par défaut — toggle JS ou préférence système -->
<html data-theme="dark">

<!-- Mode clair actif par défaut -->
<html data-theme="light">

// Lire la préférence stockée ou la préférence système
const stored = localStorage.getItem('agtc-theme');
const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', stored ?? preferred);

// Basculer au clic
toggleBtn.addEventListener('click', () => {
  const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('agtc-theme', next);
});

Composants à fond toujours sombreAlways-dark background components Les composants glassmorphism ou overlay qui restent sombres quel que soit le thème de la page (ex: cartes hero, modales sombres) doivent utiliser text.on-dark — et jamais text.primary. text.primary est adaptatif (sombre en light, clair en dark) : sur un fond fixement sombre, le contraste peut tomber à 1.12:1. Glassmorphism or overlay components that stay dark regardless of page theme (e.g. hero cards, dark modals) must use text.on-dark — never text.primary. text.primary is adaptive (dark in light mode, light in dark mode): on a fixed dark background, contrast can drop to 1.12:1.

/* Composant à fond toujours sombre (glassmorphism, overlay) :
   utiliser text.on-dark, PAS text.primary */
.card-glass .title {
  color: var(--agtc-semantic-color-text-on-dark);          /* ✅ */
  /* color: var(--agtc-semantic-color-text-primary); */    /* ❌ contraste insuffisant */
}

3. Utiliser les Web Components3. Use the Web Components

Pour une intégration applicative, montez les Web Components agtc-* (Lit en dépendance pair). Ils portent les contrats comportementaux — par exemple, critical exige une confirmation. For app integration, mount the agtc-* Web Components (Lit as a peer dependency). They carry behavioural contracts — e.g. critical requires confirmation.

<!-- Component mode: Web Components (Lit) -->
<script type="module" src="components/agtc-button.js"></script>

<agtc-button variant="primary">Save</agtc-button>
<agtc-button variant="critical">Delete folder</agtc-button>

La règle d'orThe golden rule Jamais de valeur en dur. Toujours via un token sémantique. Cette indirection est ce qui rend vos décisions applicables par des agents IA — sans interprétation. Voir les trois niveaux → Never a hardcoded value. Always through a semantic token. This indirection is what makes your decisions applicable by AI agents — without interpretation. See the three levels →

Plateformes de sortieOutput platforms

Une source JSON, compilée par Style Dictionary vers six cibles. Importez celle de votre stack. One JSON source, compiled by Style Dictionary to six targets. Import the one for your stack.

PlateformePlatform	DossierFolder	FormatFormat
`css`	`dist/tokens/css/`	Variables CSS (custom properties)CSS custom properties
`js`	`dist/tokens/js/`	Exports ES6ES6 exports
`tailwind`	`dist/tokens/tailwind/`	Extension de configurationConfig extension
`angular`	`dist/tokens/angular/`	SCSS Material M3Material M3 SCSS
`ios`	`dist/tokens/ios/`	SwiftSwift
`android`	`dist/tokens/android/`	XML (couleurs + dimensions)XML (colors + dimensions)

Pour les agents IAFor AI agents

Agentica n'est pas qu'une bibliothèque visuelle : c'est un jeu de règles lisibles par machine. Un agent lit les contrats de composants, les règles de gouvernance et les ADRs pour appliquer vos décisions sans improviser — et escalade vers un humain quand c'est requis. Agentica is more than a visual library: it is a machine-readable rule set. An agent reads component contracts, governance rules and ADRs to apply your decisions without improvising — and escalates to a human when required.

Documentation agents →Agent documentation → Explorer les composantsExplore components Code sourceSource code