# Système de design Monday Vibe
## Aperçu de l’interface du système de design Monday Vibe
Modifiez l’état des lignes et terminez les éléments sélectionnés ; les totaux du récapitulatif sont mis à jour localement.
## Référence de conception du système de design Monday Vibe
Sources publiques de Vibe 4 et intégration de @vibe/core. Les valeurs ci-dessous correspondent aux définitions vérifiées du thème clair et des styles ; les couleurs des libellés du tableau sont distinctes des rôles sémantiques de réussite et d’erreur. L’exemple natif utilise de véritables commandes Vibe Button dans un tableau HTML géré par l’application.
### Variables d’espacement actuelles
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --space-2 | 2px | À utiliser pour l’espacement de l’application ; le nom numérique du jeton correspond à l’orthographe actuelle de la source. |
| --space-4 | 4px | À utiliser pour l’espacement de l’application ; le nom numérique du jeton correspond à l’orthographe actuelle de la source. |
| --space-8 | 8px | À utiliser pour l’espacement de l’application ; le nom numérique du jeton correspond à l’orthographe actuelle de la source. |
| --space-12 | 12px | À utiliser pour l’espacement de l’application ; le nom numérique du jeton correspond à l’orthographe actuelle de la source. |
| --space-16 | 16px | À utiliser pour l’espacement de l’application ; le nom numérique du jeton correspond à l’orthographe actuelle de la source. |
| --space-20 | 20px | À utiliser pour l’espacement de l’application ; le nom numérique du jeton correspond à l’orthographe actuelle de la source. |
| --space-24 | 24px | À utiliser pour l’espacement de l’application ; le nom numérique du jeton correspond à l’orthographe actuelle de la source. |
| --space-32 | 32px | À utiliser pour l’espacement de l’application ; le nom numérique du jeton correspond à l’orthographe actuelle de la source. |
| --space-40 | 40px | À utiliser pour l’espacement de l’application ; le nom numérique du jeton correspond à l’orthographe actuelle de la source. |
| --space-48 | 48px | À utiliser pour l’espacement de l’application ; le nom numérique du jeton correspond à l’orthographe actuelle de la source. |
| --space-64 | 64px | À utiliser pour l’espacement de l’application ; le nom numérique du jeton correspond à l’orthographe actuelle de la source. |
| --space-80 | 80px | À utiliser pour l’espacement de l’application ; le nom numérique du jeton correspond à l’orthographe actuelle de la source. |
### Couleurs d’action et de surface
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --primary-color | #0073ea | Actions principales. |
| --primary-hover-color | #0060b9 | Action principale au survol. |
| --primary-selected-color | #cce5ff | Arrière-plan du contenu sélectionné. |
| --primary-text-color | #323338 | Texte lisible par défaut. |
| --secondary-text-color | #676879 | Libellés secondaires. |
| --primary-background-color | #ffffff | Surface principale. |
| --allgrey-background-color | #f6f7fb | Arrière-plan de l’application. |
| --ui-border-color | #c3c6d4 | Contour du contrôle. |
| --positive-color | #00854d | Action positive sémantique. |
| --negative-color | #d83a52 | Action négative sémantique. |
### Palette des étiquettes du tableau
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --color-done-green | #00c875 | Étiquette catégorielle Done, différente de la couleur positive sémantique. |
| --color-working_orange | #fdab3d | Étiquette catégorielle Working ; le nom exact dans la source contient un trait de soulignement. |
| --color-stuck-red | #df2f4a | Étiquette catégorielle Stuck. |
| --color-dark_purple | #784bd1 | Exemple d’identité de groupe. |
### Raccourcis typographiques
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --font-family | Figtree, Roboto, Noto script fallbacks, sans-serif | Famille de polices pour le corps du texte ; les fichiers de polices sont installés séparément. |
| --title-font-family | Poppins, Roboto, Noto script fallbacks, sans-serif | Famille de polices pour les titres. |
| --font-h1-medium | 600 32px/40px; title family | Titre du tableau. |
| --font-h2-medium | 600 24px/30px; title family | En-tête de groupe. |
| --font-h3-medium | 600 18px/24px; title family | Sous-section compacte. |
| --font-text1-normal | 400 16px/22px; body family | Contenu courant. |
| --font-text2-normal | 400 14px/20px; body family | Contenu dense d’une ligne. |
| --font-text3-normal | 400 12px/16px; body family | Information complémentaire. |
### Arrondis
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --border-radius-4 | 4px | Contrôles de petite taille. |
| --border-radius-8 | 8px | Conteneurs de taille moyenne. |
| --border-radius-12 | 12px | Valeur numérique d’arrondi disponible. |
| --border-radius-16 | 16px | Conteneurs de grande taille. |
| --border-radius-small | var(--border-radius-4) | Alias nommé pour la petite taille. |
| --border-radius-medium | var(--border-radius-8) | Alias nommé pour la taille moyenne. |
| --border-radius-big | var(--border-radius-16) | Alias nommé pour la grande taille. |
### Bouton API
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| kind | Default: primary | Hiérarchie visuelle, y compris les actions tertiaires utilisées dans cet exemple. |
| size | Default: medium | Utilisez la petite taille pour les actions compactes sur une ligne. |
| type | Default: button | Définissez explicitement submit pour envoyer le formulaire. |
| disabled | boolean | Désactive l’action groupée lorsqu’aucune ligne n’est sélectionnée. |
| loading | boolean | Affiche un indicateur de chargement pendant une véritable opération en attente. |
| active | boolean | État actif visuel ; exposez également aria-pressed pour un bouton bascule. |
| onClick | React mouse-event callback | Mettez à jour l’état de l’application ici. |
| aria-pressed | ARIA pressed state | Si vous utilisez des boutons bascules, indiquez la sélection de la ligne. |
## Système de design Monday Vibe : guide complet du système de design
Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.
Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.
## Système de design Monday Vibe : développer avec les points d’entrée Vibe actuels
### Les composants principaux et le jeton CSS sont importés séparément
> Vibe 4 expose des composants React nommés via @vibe/core et les variables CSS via @vibe/core/tokens. Importez les deux dans toute nouvelle application cliente. Un composant peut injecter ses propres styles tout en s’appuyant sur les variables fournies par le fichier de jetons. L’exemple de tableau utilise une structure de tableau HTML native et de véritables contrôles Vibe Button, avec des données de lignes et une sélection gérées par l’application.
Consultez la spécification associée
### Évitez de mélanger différentes générations de packages
L’ancien package monday-ui-react-core appartient à Vibe 2. Vibe 3 est maintenu pour les correctifs critiques, mais ne reçoit pas de nouvelles fonctionnalités. Ce guide utilise l’interface actuelle de Vibe 4 et ses variables d’espacement numérotées. Cette intégration n’est pas un client du SDK monday.com et ne se connecte à aucun compte, espace de travail ou élément API.
Consultez la spécification associée
## Système de design Monday Vibe : les couleurs d’action et les étiquettes du tableau ont des rôles distincts
### Utilisez les rôles sémantiques pour les contrôles
Les actions principales utilisent le rôle primary et la couleur correspondante au survol. La sélection utilise l’arrière-plan selected, tandis que la lecture courante utilise les rôles de texte primary et secondary. Utilisez les valeurs du thème comme un ensemble cohérent au lieu de modifier isolément l’arrière-plan du corps de page. Cette étude locale reste fidèle au thème clair vérifié.
Consultez la spécification associée
### Une cellule Done n’est pas un bouton de réussite
La source comprend des couleurs catégorielles pour le tableau, en plus des couleurs sémantiques de retour d’information. Le vert Done est #00c875, tandis que la couleur positive sémantique est #00854d. Les cellules d’état de nos lignes utilisent les couleurs du tableau avec un texte contrasté et lisible ; elles conservent les libellés Working, Stuck et Done et ne s’appuient jamais uniquement sur la couleur pour indiquer l’état.
Consultez la spécification associée
## Système de design Monday Vibe : utilisez le raccourci typographique complet
### Les titres et les lignes de travail ont chacun leur style
La source attribue Poppins aux titres et Figtree au corps du texte, avec des polices de remplacement adaptées au système d’écriture. Le raccourci actuel h1-medium correspond à 600 32px/40px, tandis que text2-normal correspond à 400 14px/20px. Appliquez le raccourci avec la propriété CSS font afin de conserver ensemble la graisse, la taille, la hauteur de ligne et la famille. La source contient aussi des alias de titres plus anciens ; ne les remplacez pas discrètement par une échelle différente.
Consultez la spécification associée
### Chargez les fichiers de polices de manière explicite
Vibe n’importe pas les fichiers des polices recommandées. Ajoutez à l’application le lien vers la feuille de style Figtree/Poppins documenté dans HTML ou hébergez vous-même des fichiers dont la licence le permet. L’exemple hors ligne utilise explicitement les polices de remplacement du système ; son rendu est donc une interprétation et non une reproduction exacte de la typographie de monday.com.
Consultez la spécification associée
## Système de design Monday Vibe : un tableau compact sans contrôles comprimés
### Les espacements numérotés définissent le rythme
Utilisez --space-8 entre les actions adjacentes de la barre d’outils, --space-16 pour le remplissage du panneau et --space-24 entre les zones du tableau. Ce sont les noms exacts de la source actuelle. Leur utilisation ici relève de choix propres à cette application. L’échelle comprend aussi un incrément de deux pixels pour les ajustements fins, ainsi que des valeurs allant jusqu’à quatre-vingts pixels pour la composition.
Consultez la spécification associée
### Les arrondis délimitent les conteneurs
Les alias small correspondent à quatre pixels, medium à huit et big à seize. Appliquez un arrondi medium au conteneur du tableau, tout en laissant les cellules carrées et alignées. Arrondir chaque cellule colorée comme un badge rend les relations entre les colonnes denses plus difficiles à parcourir.
Consultez la spécification associée
## Système de design Monday Vibe : un tableau modifiable avec une barre d’actions groupées
### Définissez clairement la structure des données
Chaque élément de travail possède un id stable, un titre, un responsable et un état. Les en-têtes natifs des colonnes décrivent ces valeurs. Une case à cocher de ligne ajoute l’id à un Set ; la modification de l’état remplace l’objet correspondant au lieu de modifier le tableau en place. L’action Terminer la sélection lit ce même Set et ne met à jour que les lignes sélectionnées. Le récapitulatif des tâches terminées est dérivé des lignes.
- Le bouton principal d’action groupée est désactivé lorsque le Set de sélection est vide.
- L’action tertiaire de chaque ligne fait défiler les états locaux à titre de démonstration.
- L’action de réinitialisation restaure les lignes initiales et efface la sélection.
Consultez la spécification associée
## Système de design Monday Vibe : exposez l’état avec le véritable composant Button API
### Les états disabled, loading et pressed sont différents
L’exemple natif utilise disabled pour une action groupée indisponible. Il n’affiche ni chargement ni réussite, car aucune opération distante n’est effectuée. Si vous connectez un véritable système de persistance, liez loading au cycle de vie de la requête et n’indiquez la réussite qu’après confirmation. La source de Button expose également active pour l’apparence et aria-pressed pour la sémantique d’un bouton bascule ; l’un ne remplace pas l’autre.
Consultez la spécification associée
### Ne présentez pas les modifications locales comme une action effectuée par un service
Le message dynamique indique le nombre d’éléments locaux modifiés. Il ne prétend pas qu’un tableau monday.com a été mis à jour. Après rechargement, les données d’exemple initiales réapparaissent. Une intégration de production nécessiterait des autorisations explicites sur l’espace de travail, une gestion des erreurs et une synchronisation en dehors de la couche du système de design.
Consultez la spécification associée
## Système de design Monday Vibe : préservez le sens des lignes quelle que soit la largeur
### Réorganisez l’exemple avec soin
Sur un écran étroit, le tableau hors ligne présente chaque ligne sous forme de carte d’élément avec libellés. Les noms de colonnes sont répétés sous forme de libellés visibles afin que la personne responsable et le statut restent compréhensibles. Il s’agit d’un choix de mise en page de l’application, et non de l’affirmation que Vibe transforme automatiquement tous les tableaux. Le modèle natif conserve un tableau sémantique dans une zone à défilement horizontal avec libellé, une solution de rechange adaptée aux données plus denses.
Consultez la spécification associée
### Le dimensionnement global en border-box est un prérequis
Appliquez box-sizing: border-box aux éléments et aux pseudo-éléments avant d’utiliser la bibliothèque. Sinon, une cellule de largeur fixe à laquelle s’ajoute du remplissage peut dépasser la taille prévue, en particulier lorsqu’un bouton est imbriqué dans une colonne dense. Gardez le conteneur externe flexible et autorisez les actions de la barre d’outils à passer à la ligne.
Consultez la spécification associée
## Monday Vibe Le système de design doit nommer séparément la sélection et le statut
### Attribuez un libellé à chaque commande de ligne
La case de sélection inclut le titre de l’élément de travail dans son nom accessible. Chaque action de changement de statut inclut le nom de l’élément ainsi que son statut actuel. Un message d’état courtois indique le résultat de l’action groupée. Les personnes qui utilisent le clavier peuvent sélectionner des lignes, activer la commande groupée et réinitialiser le tableau à l’aide des commandes natives ; la page n’invente pas de comportement de navigation par les flèches propre aux feuilles de calcul.
1. Sélectionnez « Transmission du design » et vérifiez que l’action groupée devient disponible.
2. Terminez la sélection et vérifiez que le texte du statut correspond au décompte calculé.
3. Réinitialisez et vérifiez que les données et les cases de sélection retrouvent leur état initial.
Consultez la spécification associée
## Monday Vibe Une entrée client complète pour le système de design
### Installer, importer, monter
La configuration ci-dessous constitue une entrée main.jsx pour un projet client React contenant un élément racine. Installez react, react-dom et @vibe/core@4, chargez une fois le jeton CSS et appliquez la feuille de style globale indiquée. Le package actuel utilise des exports ES modules. L’extraction des styles côté serveur est documentée comme expérimentale ; ce modèle utilise délibérément le rendu côté client.
Consultez la spécification associée
## Exemples de composants du système de design Monday Vibe
### Exemple interactif autonome complet
Enregistrez le document complet sous index.html et ouvrez-le dans un navigateur. Interprétation indépendante de HTML/CSS, fondée sur les dimensions vérifiées de la palette, de l’espacement et de la typographie du thème clair de Vibe ; police de remplacement du système.
```
Weekly delivery — Vibe study
Weekly delivery
A shared view of the work moving this week.
1 / 3 completed
WorkingStuckDone
0 selected
▼ This week
ItemOwnerStatus
Select items or click a status to change it locally.
```
Référence du code
- La barre d’outils groupée modifie le statut des tâches d’exemple. Les couleurs des libellés décrivent le flux de travail de ce tableau et ne remplacent pas les jetons d’action sémantiques de Vibe.
### Entrée complète de l’implémentation native
L’implémentation complète présentée dans la configuration, réunie ici avec les explications ciblées sur API. Suivez les prérequis documentés concernant les packages et la compilation dans la section de configuration.
```
// npm install react react-dom @vibe/core@4
// main.jsx in a client React project with
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { Button } from '@vibe/core';
import '@vibe/core/tokens';
import './board.css';
const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'},
{id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'},
{id:3,title:'Release notes',owner:'Sam',status:'Done'}];
const states=['Working','Stuck','Done'];
function Board(){
const [items,setItems]=useState(initial),[selected,setSelected]=useState(new Set()),[message,setMessage]=useState('');
const toggle=id=>setSelected(old=>{const next=new Set(old);next.has(id)?next.delete(id):next.add(id);return next});
const complete=()=>{setItems(old=>old.map(item=>selected.has(item.id)?{...item,status:'Done'}:item));setMessage(selected.size+' local items completed');setSelected(new Set())};
return
Weekly delivery
{items.filter(x=>x.status==='Done').length} of {items.length} items completed
Select
Item
Owner
Status
{items.map(item=>
toggle(item.id)}/>
{item.title}
{item.owner}
)}
{message}
}
createRoot(document.getElementById('root')).render();
```
Référence du code
- Entrée complète du tableau local ; ajoutez board.css à partir de l’exemple de composant. Les polices ne sont pas intégrées automatiquement. Package natif API vérifié à partir de la source officielle ; cet environnement n’a pas compilé l’exemple de package.
### Feuille de style du tableau fondée sur des jetons
Utilisez l’export des jetons pour la mise en page et la typographie. La région parente permet d’utiliser le tableau sémantique sur les écrans étroits.
```
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--allgrey-background-color);color:var(--primary-text-color);font:var(--font-text2-normal)}
.board{max-width:960px;margin:auto;padding:var(--space-24)}
h1{font:var(--font-h1-medium)}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-bottom:var(--space-16)}
.table-scroll{overflow:auto;border:1px solid var(--layout-border-color);border-radius:var(--border-radius-medium)}
table{width:100%;min-width:560px;border-collapse:collapse;background:var(--primary-background-color)}
th,td{text-align:left;padding:var(--space-12);border-bottom:1px solid var(--layout-border-color)}
```
Référence du code
- Il s’agit d’une application CSS utilisant les véritables variables Vibe.
- L’aperçu intégré utilise une interprétation de HTML indépendante et adaptative.
### Chargement des polices dans l’application HTML
Chargez explicitement les deux familles recommandées ; l’import des jetons CSS ne les télécharge pas.
```
```
Référence du code
- Une configuration de polices sous licence et hébergées localement peut remplacer cette feuille de style externe.
## Configuration de l’agent pour le système de design Monday Vibe
### Point de départ de l’implémentation
Entrée complète du tableau local ; ajoutez board.css à partir de l’exemple de composant. Les polices ne sont pas intégrées automatiquement. Package natif API vérifié à partir de la source officielle ; cet environnement n’a pas compilé l’exemple de package.
```
// npm install react react-dom @vibe/core@4
// main.jsx in a client React project with
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { Button } from '@vibe/core';
import '@vibe/core/tokens';
import './board.css';
const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'},
{id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'},
{id:3,title:'Release notes',owner:'Sam',status:'Done'}];
const states=['Working','Stuck','Done'];
function Board(){
const [items,setItems]=useState(initial),[selected,setSelected]=useState(new Set()),[message,setMessage]=useState('');
const toggle=id=>setSelected(old=>{const next=new Set(old);next.has(id)?next.delete(id):next.add(id);return next});
const complete=()=>{setItems(old=>old.map(item=>selected.has(item.id)?{...item,status:'Done'}:item));setMessage(selected.size+' local items completed');setSelected(new Set())};
return
Weekly delivery
{items.filter(x=>x.status==='Done').length} of {items.length} items completed
Select
Item
Owner
Status
{items.map(item=>
toggle(item.id)}/>
{item.title}
{item.owner}
)}
{message}
}
createRoot(document.getElementById('root')).render();
```
### Un prompt pour votre projet
```
Créez le tableau de livraison Vibe 4 fourni. Importez @vibe/core/tokens, utilisez les variables d’espacement numérotées actuelles et les déclarations abrégées complètes de police, et distinguez les couleurs de feedback sémantique de celles des libellés du tableau. Implémentez la sélection locale des lignes, la modification des statuts et un décompte calculé des éléments terminés. Utilisez disabled sur le bouton groupé ; ne simulez pas d’enregistrement à distance.
```
## Sources et périmètre du système de design Monday Vibe
Démonstration indépendante de référence Vibe 4 et de tableau local. Aucun compte monday.com, aucune donnée d’espace de travail ni connexion au SDK. Le modèle natif utilise de véritables commandes Button de Vibe et un balisage de tableau géré par l’application.
- Présentation de Vibe 4 Package actuel, entrée des jetons et limites des versions antérieures.
- Intégration principale Imports racine, dimensionnement global en border-box et chargement séparé des polices.
- Source du thème clair Couleurs sémantiques, couleurs des libellés du tableau et ombres.
- Source de l’espacement Variables d’espacement numérotées actuelles.
- Source de la typographie Familles Figtree/Poppins et styles abrégés.
- Source des rayons Jetons de coins numériques et nommés.
- Source des boutons Sémantique des actions contrôlées, désactivées, en cours de chargement et activées.
- Exports du package Entrée ES module et export des jetons CSS.
## Ressources associées au système de design Monday Vibe
### Morningstar système de design
Créez une interface de recherche où les nombres sont alignés, les couleurs des actifs gardent leur signification et la typographie reste lisible. Découvrez les constantes MDS, l’adoption de Vue 3, la transition Morningstar Intrinsic et un carnet d’allocation fictif avec tri.
### Mozilla Protocol
Un guide éditorial Protocol avec les véritables familles de polices et échelles d’espacement et de conteneurs, une page de lecture illustrée et adaptative, ainsi qu’un exemple complet de formulaire natif CSS.
### Nord système de design
Examinez les tokens du thème Therapy de Nord et les contrats des Web Components au moyen d’un brouillon de demande de salle : rôles de couleur réels, dimensions adaptatives des champs, validation explicite et résultats préparés localement.
- [Référence de mise en œuvre](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss)
- [Source](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss)
- [Source](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss)
- [Source](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss)
- [Source](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss)
- [Source](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx)
- [Consultez la spécification associée](https://github.com/mondaycom/vibe)
- [Consultez la spécification associée](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss)
- [Consultez la spécification associée](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss)
- [Consultez la spécification associée](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md)
- [Consultez la spécification associée](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss)
- [Consultez la spécification associée](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss)
- [Consultez la spécification associée](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx)
- [Consultez la spécification associée](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json)
- [Référence du code](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss)
- [Référence du code](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss)
- [Référence du code](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md)
- [Présentation de Vibe 4 Package actuel, entrée des jetons et limites des versions antérieures.](https://github.com/mondaycom/vibe)
- [Intégration principale Imports racine, dimensionnement global en border-box et chargement séparé des polices.](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md)
- [Source du thème clair Couleurs sémantiques, couleurs des libellés du tableau et ombres.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss)
- [Source de l’espacement Variables d’espacement numérotées actuelles.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss)
- [Source de la typographie Familles Figtree/Poppins et styles abrégés.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss)
- [Source des rayons Jetons de coins numériques et nommés.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss)
- [Source des boutons Sémantique des actions contrôlées, désactivées, en cours de chargement et activées.](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx)
- [Exports du package Entrée ES module et export des jetons CSS.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json)