# Système de design Atlassian
## Aperçu de l’interface système de design Atlassian
Consultez les problèmes, filtrez par responsable et modifiez localement l’état du workflow. Le statut et la sélection restent indépendants.
## Système de design Atlassian Référence de conception
Utilisez les noms exacts des jetons sémantiques dans le code. La référence officielle présente des alias de palette de couleurs qui varient selon le thème clair ou sombre. Ces lignes conservent donc les alias au lieu d’inventer une valeur hexadécimale stable. Les valeurs numériques d’espacement et de rayon proviennent des échelles documentées. Les couleurs hexadécimales de l’aperçu sont illustratives et ne constituent pas un export de jetons.
### Espacements basés sur une unité de huit pixels
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| space.0 | 0px / 0rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.025 | 2px / 0.125rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.050 | 4px / 0.25rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.075 | 6px / 0.375rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.100 | 8px / 0.5rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.150 | 12px / 0.75rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.200 | 16px / 1rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.250 | 20px / 1.25rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.300 | 24px / 1.5rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.400 | 32px / 2rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.500 | 40px / 2.5rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.600 | 48px / 3rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.800 | 64px / 4rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
| space.1000 | 80px / 5rem | Jeton d’espacement ; le suffixe correspond à un pourcentage de l’unité de base de 8px. |
### Rôles sémantiques du texte et des surfaces
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| color.text | Neutral1000 / DarkNeutral1000 | Texte principal ; valeurs indiquées sous forme d’alias de palette clair / sombre. |
| color.text.subtle | Neutral800 / DarkNeutral800 | Libellés secondaires. |
| color.text.subtlest | Neutral700 / DarkNeutral700 | Métadonnées. |
| color.text.selected | Blue700 / Blue400 | Sélection, et non état du processus métier. |
| color.text.danger | Red800 / Red300 | Texte explicatif critique. |
| color.text.inverse | Neutral0 / DarkNeutral100 | Texte sur des aplats soutenus pris en charge. |
| elevation.surface | Neutral0 / DarkNeutral100 | Surface principale de l’application. |
| elevation.surface.sunken | Neutral100 / DarkNeutral0 | Regroupement des colonnes du tableau. |
| elevation.surface.raised | Neutral0 / DarkNeutral200 | Cartes d’éléments de travail déplaçables. |
| elevation.surface.overlay | Neutral0 / DarkNeutral250 | Surface de fenêtre contextuelle ou de superposition, associée à l’ombre de superposition. |
### La typographie utilise le raccourci de police CSS
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| font.heading.large | heading role | Titre de page. |
| font.heading.medium | heading role | Titre de composant ou de détail de grande taille. |
| font.heading.small | heading role | Petit titre de composant. |
| font.body | body role | Descriptions courtes et texte de composant par défaut. |
| font.body.large | reading role | Explications plus détaillées. |
| font.body.small | secondary role | À utiliser avec parcimonie pour les métadonnées. |
| font.code | code role | Identifiants techniques ; pas pour les échanges courants. |
| font.weight.regular / medium / bold | weight roles | Appliquez la graisse comme remplacement délibéré du raccourci de police. |
### Forme et profondeur
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| radius.xsmall | 2px | Petit détail, comme une case à cocher ou un badge. |
| radius.small | 4px | Libellés d’accompagnement et commandes compactes. |
| radius.medium | 6px | Commandes interactives. |
| elevation.shadow.raised | theme-resolved multi-layer shadow | À associer à elevation.surface.raised. |
| elevation.shadow.overlay | theme-resolved multi-layer shadow | À associer à une surface de superposition ; ne l’utilisez pas comme bordure plus marquée pour chaque carte. |
### Paramètres des composants utilisés dans le tableau
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| Button appearance | primary / default / subtle / danger / warning | Choisissez en fonction du sens de l’action. |
| Button isSelected | boolean | Sélection visuelle ; ne modifie pas l’état du ticket. |
| Button isLoading | boolean | Bloque les interactions répétées tout en affichant la progression. |
| Button spacing | default / compact | La variante compacte est documentée pour les paramètres denses, comme les tableaux. |
| Button shouldFitContainer | boolean | Permet à l’action d’occuper toute la largeur de son conteneur. |
### Composition des statuts et des filtres
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| Lozenge appearance="information" | In progress | Indicateur de statut, et non commande de transition cliquable. |
| Lozenge appearance="danger" | Blocked | Utilisez du texte pour identifier la condition. |
| Lozenge appearance="success" | Completed | État local confirmé dans cet exemple. |
| Toggle isChecked + onChange | controlled boolean | L’exemple l’utilise pour un filtre de responsable, et non pour une transition de processus. |
## Système de design Atlassian Guide complet
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 Atlassian Packages ADS publics et exigences réelles de style
### L’importation d’un composant ne suffit pas à l’intégration
> Les composants Atlassian Design System sont publiés sous @atlaskit, mais le catalogue Atlaskit comprend également des packages propres à certaines applications. Cet exemple choisit trois éléments primitifs documentés : Button, Lozenge et Toggle, ainsi que des jetons et la réinitialisation CSS. Son modèle de données est volontairement local. Aucune de ces importations ne fournit les autorisations sur les tickets Jira, la logique des sprints ou un serveur principal.
La référence de configuration actuelle exige une intégration Compiled pour les applications qui utilisent des packages de la plateforme, même si elles ne produisent pas de styles Compiled. La configuration Parcel fournie fait donc partie de l’exemple. Copier une importation de Button sans configurer le bundler peut entraîner des styles incomplets ou chargés dans un ordre incorrect. Il s’agit d’un problème d’intégration fonctionnel, et non d’un détail esthétique.
Consultez la spécification associée
## Système de design Atlassian Utilisez des jetons sémantiques plutôt que des couleurs de palette choisies au hasard
### Un jeton exprime une fonction
token("color.text") correspond à la couleur de premier plan principale, tandis que token("color.text.subtle") sert aux informations secondaires. Le texte de sélection utilise un rôle distinct de celui du texte d’alerte. Le tableau utilise elevation.surface pour sa zone principale et elevation.surface.sunken pour une zone de regroupement. Ces choix restent compréhensibles lorsque le thème change, car leur nom exprime leur fonction.
Le catalogue officiel indique les alias de palette clair et sombre associés à ces rôles. Le tableau de référence conserve cette information au lieu de garantir une valeur hexadécimale permanente. L’exemple intégré utilise une palette illustrative, clairement indiquée comme telle. Ses couleurs assurent la lisibilité de l’exemple local, mais ne remplacent pas la référence faisant autorité pour un thème Atlaskit de production.
Consultez la spécification associée
## Système de design Atlassian Une unité de base de huit pixels, avec des subdivisions choisies avec soin
### Interprétez le suffixe comme un pourcentage
space.100 vaut 8px ; space.200 vaut 16px ; space.025 vaut 2px. L’échelle comprend des subdivisions, car les petits intervalles et l’alignement optique nécessitent davantage de précision que des multiples entiers de huit pixels. Le tableau utilise space.300 autour du contenu principal et space.150 entre les éléments locaux. Un appel de jeton renvoie une valeur CSS adaptée au thème, et non un nombre sur lequel effectuer des opérations JavaScript arbitraires.
Utilisez le même espacement pour des relations identiques. La distance entre la clé d’un ticket et son titre doit être inférieure à celle qui sépare la liste des tickets de l’inspecteur. Il existe des jetons d’espacement négatifs, mais une disposition de tableau classique n’en a pas besoin. Pour aérer une surface de travail dense, composez la mise en page avec soin au lieu de superposer des éléments sans lien entre eux.
Consultez la spécification associée
## Système de design Atlassian Les jetons typographiques sont des déclarations de police complètes
### Ne renseignez pas font-size avec font.body
Le catalogue définit explicitement des jetons typographiques composites pour la propriété de police CSS. L’exemple attribue font.heading.large au titre de la page et font.heading.medium au titre du détail. Utiliser l’un de ces jetons comme fontSize ferait perdre la spécification prévue. Le rôle body convient aux résumés courts de tickets, tandis que les descriptions longues peuvent utiliser font.body.large si la mise en page environnante est adaptée à la lecture.
Les polices actuelles de l’application sont Atlassian Sans et Atlassian Mono. Sans est dérivée d’Inter Variable ; Mono, de JetBrains Mono. Cette identité compte lorsqu’on décrit le système, mais cet aperçu autonome ne redistribue pas ces polices. Il utilise une police système de remplacement et le précise. Pour une adoption en production, utilisez la méthode de distribution des polices prise en charge et respectez les licences, plutôt que de renommer une police quelconque.
Consultez la spécification associée
## Système de design Atlassian Utilisez la forme et l’élévation pour structurer la surface de travail
### Une carte est surélevée parce qu’il s’agit d’un objet
La référence distingue une surface de regroupement en retrait, des cartes surélevées et des surfaces de superposition. Un élément de travail déplaçable s’inscrit dans la couche surélevée, tandis qu’une colonne du tableau sert à regrouper ces éléments. Un inspecteur intégré à la page ne nécessite pas automatiquement une ombre de superposition. Associez les rôles de surface et d’ombre lorsque l’élévation a réellement une utilité.
Les formes actuellement nommées incluent radius.xsmall à 2px, radius.small à 4px et radius.medium à 6px. Ce ne sont pas les anciennes valeurs nommées border.radius dont un développeur pourrait se souvenir d’un autre système. Le tableau conserve les noms exacts. Les contrôles natifs doivent utiliser le style qui leur est fourni ; les conteneurs externes personnalisés peuvent adopter le rôle approprié sans remplacer les classes générées privées.
Consultez la spécification associée
## Système de design Atlassian La sélection d’un bouton est différente d’une transition d’état d’un problème
### Choisissez délibérément une apparence et un état
L’importation vérifiée de Button est @atlaskit/button/default/button. appearance="primary" met en avant une action principale ; isSelected indique le problème actuellement sélectionné dans cet exemple natif compact. Un clic ne modifie que le problème affiché. Un contrôle distinct permet de modifier l’état du workflow. Cette séparation évite que la sélection d’une ligne lance ou termine silencieusement une tâche.
API inclut également isLoading, isDisabled, spacing="compact" et shouldFitContainer. Le chargement indique qu’une opération est en cours, et non un état permanent du problème. Une action désactivée doit s’accompagner d’une explication compréhensible, car les contrôles désactivés peuvent être ignorés lors de la navigation au clavier. Le tableau autonome garde donc ses contrôles d’inspection disponibles et permet à l’utilisateur de consulter directement l’état local actuel.
Consultez la spécification associée
## Système de design Atlassian Lozenge et Toggle communiquent des types d’état différents
### Un état n’est pas un mode d’interaction
Les apparences de Lozenge comprennent information, danger et success, auxquelles l’exemple associe En cours, Bloqué et Terminé. Ce sont les mots qui portent le sens ; la couleur n’est qu’un indice supplémentaire. Un élément bloqué le reste lorsqu’il est sélectionné. Le filtre de responsable utilise Toggle avec isChecked et onChange, car cette valeur booléenne modifie le contenu affiché dans le tableau sans changer le responsable d’un problème.
Le sélecteur d’état local est volontairement simple et ne prétend pas représenter un véritable modèle d’autorisations. Une transition de problème en production peut nécessiter un motif, un rôle ou une réponse du service. Gardez cette logique d’autorisation en dehors de Lozenge et n’affichez le résultat confirmé qu’une fois établi par le service.
- La sélection indique le problème actuellement examiné.
- L’état du workflow décrit l’élément de travail lui-même.
- Le filtre de responsable modifie l’ensemble visible sans changer le responsable.
Consultez la spécification associée
## Système de design Atlassian Initialisez le thème avant d’afficher les surfaces personnalisées utilisant des jetons
### Le chargement du thème global est asynchrone
setGlobalTheme met à jour les attributs du thème du document et charge le thème sélectionné CSS. Le point d’entrée attend la fin de cette opération avant d’afficher le tableau. Il sélectionne explicitement les thèmes clair et sombre, avec le mode clair actif par défaut. Un véritable contrôle de préférence peut mettre à jour colorMode via le même API au lieu de remplacer les couleurs par des valeurs aléatoires en ligne.
Les options actuelles de marque personnalisée sont signalées comme alpha et utilisent un API UNSAFE. Ce guide n’adopte pas cette approche instable dans le seul but de recolorer l’exemple. Commencez par respecter le contrat de thème sémantique stable, puis évaluez la personnalisation expérimentale comme une décision distincte concernant les dépendances.
Consultez la spécification associée
## Système de design Atlassian Validez une interaction réelle de consultation d’un problème
### Utilisez les fichiers fournis ensemble
L’exemple natif nécessite le point d’entrée JSX, l’importation de réinitialisation CSS et les deux fichiers de configuration Parcel. Il inclut la collection de problèmes, la sélection, le filtre de responsable, la correspondance des états et un message de résultat dynamique. L’aperçu autonome développe la composition en colonnes et en panneau d’inspection, mais reste une interprétation explicitement désignée comme HTML. Aucun des deux exemples ne prétend se connecter à Jira.
Lorsqu’un filtre exclut le problème sélectionné, l’exemple natif conserve volontairement ses détails. Le lecteur peut toujours examiner l’élément au lieu d’être déplacé silencieusement vers un autre. Une conception de production peut choisir une autre règle, mais elle doit l’expliquer et préserver un focus pertinent. Vérifiez le comportement sur un écran étroit ainsi qu’avec toutes les colonnes visibles.
1. Examinez WEB-18, puis sélectionnez un autre problème sans modifier son état de workflow.
2. Activez le filtre de responsable et vérifiez quels problèmes restent visibles.
3. Modifiez l’état local du problème sélectionné et vérifiez la concordance de son libellé d’état et de sa colonne.
4. Revenez au tableau sans filtre et vérifiez que l’identité du problème est inchangée et que son état a bien été mis à jour.
Consultez la spécification associée
## Système de design Atlassian Exemples de composants de système de design
### Exemple interactif autonome complet
Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation de HTML/CSS utilisant des valeurs d’espacement et de forme vérifiées, une palette de couleurs illustrative et une police système de secours ; il ne s’agit ni de Jira ni d’un environnement d’exécution Atlaskit natif.
```
Issue board — Atlassian interpretation▲Product deliveryLOCAL DEMO
Projects / Website / Board
Website release
```
Référence du code
- Les transitions de problème ne modifient que le tableau d’exemple. Ce point d’entrée HTML ne met pas en œuvre la configuration de compilation Compiled requise par l’implémentation Atlaskit distincte.
### 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.
```
// Existing React 18 project; use the Parcel configuration examples below.
// npm install @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/lozenge @atlaskit/toggle
// npm install --save-dev parcel @compiled/parcel-config
// src/main.jsx; HTML entry contains and a module script pointing here.
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import '@atlaskit/css-reset';
import {token, setGlobalTheme} from '@atlaskit/tokens';
import Button from '@atlaskit/button/default/button';
import Lozenge from '@atlaskit/lozenge/lozenge';
import Toggle from '@atlaskit/toggle';
const initial = [
{id:'WEB-18',title:'Clarify first-project copy',owner:'Maya',status:'To do'},
{id:'WEB-21',title:'Review keyboard path',owner:'Alex',status:'In progress'},
{id:'WEB-24',title:'Resolve missing illustrations',owner:'Maya',status:'Blocked'}
];
const appearance = {'To do':'default','In progress':'information','Blocked':'danger','Done':'success'};
function Board() {
const [issues,setIssues]=React.useState(initial);
const [selected,setSelected]=React.useState('WEB-18');
const [mine,setMine]=React.useState(false);
const [notice,setNotice]=React.useState('');
const issue=issues.find(i=>i.id===selected);
return
This local demonstration has no Jira connection or permission rules.
{notice}
;
}
async function start(){
await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'});
createRoot(document.getElementById('root')).render();
}
start();
```
Référence du code
- La logique complète du tableau React ainsi que les fragments de configuration requis ci-dessous. Utilisez Parcel avec l’intégration Compiled ; importer uniquement la réinitialisation CSS ne suffit pas pour les packages actuels. Aucune compilation native du package n’est revendiquée dans ce prototype local.
### Parcel doit traiter les styles Compiled distribués
Créez .parcelrc à la racine du projet. Lancez Parcel avec son point d’entrée HTML après avoir installé les dépendances répertoriées dans les instructions de configuration.
```
{
"extends": ["@parcel/config-default", "@compiled/parcel-config"]
}
```
Référence du code
- Cette configuration utilise l’intégration Parcel documentée, au lieu de présenter implicitement la voie expérimentale Vite comme la configuration recommandée.
### Configuration Compiled pour la transformation des jetons
Créez .compiledcssrc à côté de .parcelrc. Ce fichier fait partie de la configuration de l’application consommatrice, et non d’un script de publication de package.
```
{
"transformerBabelPlugins": [["@atlaskit/tokens/babel-plugin"]],
"extract": true,
"inlineCss": true,
"sortShorthand": true
}
```
Référence du code
- Le plug-in facultatif strip-runtime est destiné aux packages qui distribuent des CSS extraits ; il n’est pas nécessaire à cette application consommatrice.
### Une pastille décrit un état ; un contrôle permet de le changer
Dans le détail du problème, l’affichage et le contrôle de transition ont des rôles distincts.
```
Blocked
```
Référence du code
- openIssueDetail est le gestionnaire de l’application ; la configuration complète illustre l’état de sélection.
- Ne faites pas ressembler le libellé d’état à un menu, sauf s’il permet réellement de changer d’état.
## Système de design Atlassian Configuration de l’agent IA
### Point de départ de l’implémentation
La logique complète du tableau React ainsi que les fragments de configuration requis ci-dessous. Utilisez Parcel avec l’intégration Compiled ; importer uniquement la réinitialisation CSS ne suffit pas pour les packages actuels. Aucune compilation native du package n’est revendiquée dans ce prototype local.
```
// Existing React 18 project; use the Parcel configuration examples below.
// npm install @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/lozenge @atlaskit/toggle
// npm install --save-dev parcel @compiled/parcel-config
// src/main.jsx; HTML entry contains and a module script pointing here.
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import '@atlaskit/css-reset';
import {token, setGlobalTheme} from '@atlaskit/tokens';
import Button from '@atlaskit/button/default/button';
import Lozenge from '@atlaskit/lozenge/lozenge';
import Toggle from '@atlaskit/toggle';
const initial = [
{id:'WEB-18',title:'Clarify first-project copy',owner:'Maya',status:'To do'},
{id:'WEB-21',title:'Review keyboard path',owner:'Alex',status:'In progress'},
{id:'WEB-24',title:'Resolve missing illustrations',owner:'Maya',status:'Blocked'}
];
const appearance = {'To do':'default','In progress':'information','Blocked':'danger','Done':'success'};
function Board() {
const [issues,setIssues]=React.useState(initial);
const [selected,setSelected]=React.useState('WEB-18');
const [mine,setMine]=React.useState(false);
const [notice,setNotice]=React.useState('');
const issue=issues.find(i=>i.id===selected);
return
This local demonstration has no Jira connection or permission rules.
{notice}
;
}
async function start(){
await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'});
createRoot(document.getElementById('root')).render();
}
start();
```
### Un prompt pour votre projet
```
Reproduisez l’exemple d’incident Atlassian React 18 fourni avec les jetons @atlaskit, CSS reset et l’intégration Compiled Parcel documentée. Utilisez les appels aux jetons sémantiques, les rôles de raccourci de police et les imports Button/Lozenge/Toggle vérifiés. Gardez la sélection, le filtrage par responsable et l’état du workflow indépendants. Conservez le contexte de l’incident sélectionné, annoncez les modifications locales et ne prétendez pas qu’il existe une connexion à Jira ou de véritables autorisations.
```
## Système de design Atlassian Sources et périmètre
OpenDesign étude des packages publics Atlassian Design System React, vérifiée à l’aide de la documentation liée en octobre 2026. Le tableau intégré est une interprétation HTML/CSS, avec des valeurs de palette indicatives et des incidents fictifs ; il ne s’agit ni de Jira ni d’un environnement Atlaskit natif. L’accès aux packages publics ne confère pas de droits illimités sur la marque Atlassian ni le même niveau de support que celui proposé en interne.
- jetons Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.
- thème Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.
- configuration Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.
- espacement Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.
- typographie Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.
- police Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.
- bouton Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.
- pastille Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.
- interrupteur Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.
## Système de design Atlassian Ressources associées
### AWS Cloudscape
Un guide de configuration Cloudscape avec de véritables jetons de mise à jour visuelle, un espacement adapté à la densité, des API de formulaire contrôlées et un assistant fonctionnel en deux étapes pour la création de ressources.
### Backbase système de design
Créez un parcours de validation bancaire aux couleurs de la marque avec les modules Angular de Backbase, l’export du thème sémantique et des états de révision explicites. Comparez les API Web aux dimensions natives documentées séparément.
### Dell système de design
Créez une recherche d’appareils avec filtres contextuels à l’aide de DDS v3 : couleurs sémantiques, échelle typographique adaptative, espacement par jetons et composition InputGroup dont le filtrage relève de l’application.
- [Référence de mise en œuvre](https://atlassian.design/components/button/examples)
- [Source](https://atlassian.design/foundations/spacing/)
- [Source](https://atlassian.design/components/tokens/all-tokens)
- [Source](https://atlassian.design/foundations/typography/applying-typography)
- [Source](https://atlassian.design/components/button/examples)
- [Source](https://atlassian.design/components/lozenge/examples)
- [Consultez la spécification associée](https://atlassian.design/get-started/develop/atlassians)
- [Consultez la spécification associée](https://atlassian.design/components/tokens/all-tokens)
- [Consultez la spécification associée](https://atlassian.design/foundations/spacing/)
- [Consultez la spécification associée](https://atlassian.design/foundations/typography/product-typefaces-and-scale)
- [Consultez la spécification associée](https://atlassian.design/components/button/examples)
- [Consultez la spécification associée](https://atlassian.design/components/lozenge/examples)
- [Consultez la spécification associée](https://atlassian.design/components/tokens/code)
- [Consultez la spécification associée](https://atlassian.design/components/toggle/examples)
- [Référence du code](https://atlassian.design/components/button/examples)
- [Référence du code](https://atlassian.design/get-started/develop/atlassians)
- [Référence du code](https://atlassian.design/components/lozenge/examples)
- [jetons Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.](https://atlassian.design/components/tokens/all-tokens)
- [thème Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.](https://atlassian.design/components/tokens/code)
- [configuration Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.](https://atlassian.design/get-started/develop/atlassians)
- [espacement Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.](https://atlassian.design/foundations/spacing/)
- [typographie Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.](https://atlassian.design/foundations/typography/applying-typography)
- [police Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.](https://atlassian.design/foundations/typography/product-typefaces-and-scale)
- [bouton Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.](https://atlassian.design/components/button/examples)
- [pastille Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.](https://atlassian.design/components/lozenge/examples)
- [interrupteur Source officielle pour l’exigence concrète API, l’échelle ou l’intégration abordée dans ce guide.](https://atlassian.design/components/toggle/examples)