UI (tout le produit) · 400 / 500 / 600
Outfit
Machine Operating On Demand — projets, agents, fichiers.
Design system · 2026
Charte graphique
Surfaces calmes, une seule accent (forest), rayons hybrides 12 / 8 px. Hiérarchie portée par la typo et les filets — pas par les ombres. Thème actuel : light.
Règles
- Bordure 1 px + fond surface — élévation par défaut
- Rayons : panneaux 12 px, contrôles 8 px, badges en pilule
- Forest seul accent chrome (CTA, actif, focus)
- Ombre uniquement sur overlays (menus, pip bureau)
- Halos blur-3xl / dégradés décoratifs
- Ombre sur cartes et header
- Newsreader dans les titres produit
- Sky / plum / clay comme fond décoratif
Couleurs
Chrome = tokens marqués. Sky / plum / clay restent pour le métier (personas, statuts). Cliquez une pastille pour copier le hex du thème courant.
| Token | Clair | Sombre | CSS |
|---|---|---|---|
| ink | #0f1214 | #e8ece9 | --ks-ink |
| forest | #1a2e28 | #7dba9f | --ks-forest |
| moss | #2f5d50 | #5fa88c | --ks-moss |
| leaf | #2ea078 | #48b48c | --ks-leaf |
| sand | #eceef0 | #161c1a | --ks-sand |
| mist | #f4f5f7 | #0a0c0b | --ks-mist |
| accent | #c45c26 | #e07a3d | --ks-accent |
| sky | #3d7ea6 | #5aa0c8 | --ks-sky |
| plum | #6b4c7a | #a57bb8 | --ks-plum |
| clay | #b56a4e | #d4896a | --ks-clay |
| surface | #ffffff | #121614 | --ks-surface |
| surface-2 | #f8f9fb | #1a201d | --ks-surface-2 |
Rayons & élévation
Panneau
12 px · --ks-card-radius
Contrôle
8 px · --ks-control-radius
Logos
Marque Mood : pictogramme feuille / M. Clair et sombre selon le fond.
Icône dark
Thème sombre, login
/brand/icon-dark.png
Icône light
Thème clair, header
/brand/icon-light.png
Icône forest
Variante verte
/brand/icon-forest.png
Icône noire
Monochrome
/brand/icon-black.png
PWA 192
Icône application
/brand/icon-192.png
PWA 512
Splash / store
/brand/icon-512.png
Mark on black
Fond plein
/brand/mark-on-black.png
Open Graph
Partage social
/brand/og-image.png
Autres marques
Magellan
Now Create
Magellan white
Sur fond sombre
ServiceNow
Intégration
Favicon
Onglet navigateur
Typographie
Outfit partout dans le produit. Newsreader réservé aux pages éditoriales.
Éditorial uniquement · 500 / 600 / 700
Newsreader
Réservé aux pages charte / à propos — jamais dans l’app.
Titre produit
Sous-titre Outfit 600
Corps de texte. Labels caps : Outfit 600, tracking large, couleur moss.
Label section
Composants
Primitives : .card, .btn-*, .ks-input, .ks-badge.
Boutons
Chip
Carte mutée
.card-muted — surface-2, même bordure, sans ombre.
Personas
Isaac, Architect, Mood — couleurs métier (sky / clay / forest), pas chrome.
Isaac
Dev fou
Codeur enragé, expert technique — il vit pour shipper.
Friday
Builder Fluent
Now SDK / Fluent — il shippe du source, pas du clic.
Architect
Architecte
Voit le système en couches, tranche les options d’archi.
Mood
Maman des agents
Chef d’orchestre maternelle de tous les sous-agents Mood.