# Sistema di design Atlassian
## Anteprima dell'interfaccia sistema di design Atlassian
Esamina le issue, filtra per responsabile e modifica uno stato locale del flusso di lavoro. Lo stato e la selezione restano indipendenti.
## Riferimento di design sistema di design Atlassian
Nel codice usa esattamente i nomi dei token semantici. Il riferimento ufficiale espone alias della palette cromatica diversi a seconda del tema chiaro o scuro; queste righe riportano quindi gli alias invece di inventare un valore esadecimale stabile. I valori numerici di spaziatura e raggio provengono dalle scale documentate. I colori esadecimali dell'anteprima sono illustrativi, non un'esportazione dei token.
### Spaziatura basata su un'unità di otto pixel
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| space.0 | 0px / 0rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.025 | 2px / 0.125rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.050 | 4px / 0.25rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.075 | 6px / 0.375rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.100 | 8px / 0.5rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.150 | 12px / 0.75rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.200 | 16px / 1rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.250 | 20px / 1.25rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.300 | 24px / 1.5rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.400 | 32px / 2rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.500 | 40px / 2.5rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.600 | 48px / 3rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.800 | 64px / 4rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
| space.1000 | 80px / 5rem | Token di spaziatura; il suffisso indica una percentuale dell'unità di base di 8px. |
### Ruoli semantici per testo e superfici
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| color.text | Neutral1000 / DarkNeutral1000 | Testo primario; i valori sono mostrati come alias della palette chiara / scura. |
| color.text.subtle | Neutral800 / DarkNeutral800 | Etichette secondarie. |
| color.text.subtlest | Neutral700 / DarkNeutral700 | Metadati. |
| color.text.selected | Blue700 / Blue400 | Selezione, non stato del flusso di lavoro aziendale. |
| color.text.danger | Red800 / Red300 | Testo esplicativo critico. |
| color.text.inverse | Neutral0 / DarkNeutral100 | Testo su fondi intensi supportati. |
| elevation.surface | Neutral0 / DarkNeutral100 | Superficie principale dell'applicazione. |
| elevation.surface.sunken | Neutral100 / DarkNeutral0 | Raggruppamento delle colonne della bacheca. |
| elevation.surface.raised | Neutral0 / DarkNeutral200 | Schede mobili degli elementi di lavoro. |
| elevation.surface.overlay | Neutral0 / DarkNeutral250 | Superficie di popover o overlay, abbinata all'ombra per overlay. |
### La tipografia usa la sintassi abbreviata dei font CSS
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| font.heading.large | heading role | Titolo della pagina. |
| font.heading.medium | heading role | Titolo di un componente o di un dettaglio di grandi dimensioni. |
| font.heading.small | heading role | Titolo di componente piccolo. |
| font.body | body role | Descrizioni brevi predefinite e testo dei componenti. |
| font.body.large | reading role | Spiegazioni più estese. |
| font.body.small | secondary role | Uso limitato per i metadati. |
| font.code | code role | Identificatori tecnici, non testo per discussioni ordinarie. |
| font.weight.regular / medium / bold | weight roles | Applica il peso come override intenzionale della sintassi abbreviata dei font. |
### Forma e profondità
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| radius.xsmall | 2px | Dettagli piccoli, come checkbox o badge. |
| radius.small | 4px | Etichette di supporto e controlli compatti. |
| radius.medium | 6px | Controlli interattivi. |
| elevation.shadow.raised | theme-resolved multi-layer shadow | Da abbinare a elevation.surface.raised. |
| elevation.shadow.overlay | theme-resolved multi-layer shadow | Da abbinare alla superficie degli overlay; non usare un bordo più marcato per ogni scheda. |
### Parametri dei componenti usati nella bacheca
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Button appearance | primary / default / subtle / danger / warning | Scegli in base al significato dell'azione. |
| Button isSelected | boolean | Selezione visiva; non modifica lo stato dell'issue. |
| Button isLoading | boolean | Blocca le interazioni ripetute mentre viene mostrato l'avanzamento. |
| Button spacing | default / compact | Compact è documentato per impostazioni più dense, come le tabelle. |
| Button shouldFitContainer | boolean | Consente all'azione di occupare tutta la larghezza del contenitore. |
### Composizione di stato e filtro
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Lozenge appearance="information" | In progress | Indicatore di stato, non controllo cliccabile per la transizione. |
| Lozenge appearance="danger" | Blocked | Usa il testo per identificare la condizione. |
| Lozenge appearance="success" | Completed | Uno stato locale confermato in questo esempio. |
| Toggle isChecked + onChange | controlled boolean | L'esempio lo usa per un filtro per responsabile, non per una transizione del flusso di lavoro. |
## Guida completa sistema di design Atlassian
Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.
Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.
## Pacchetti ADS pubblici di sistema di design Atlassian e requisiti effettivi di stile
### Importare un componente non basta per completare l'integrazione
> I componenti Atlassian Design System sono pubblicati sotto @atlaskit, ma il catalogo Atlaskit più ampio include anche pacchetti specifici per le app. Questo esempio sceglie tre primitive documentate: Button, Lozenge e Toggle, oltre ai token e al reset di CSS. Il modello di dati è intenzionalmente locale. Queste importazioni non forniscono permessi per le issue di Jira, logica degli sprint né un backend.
La guida di configurazione corrente richiede l'integrazione con Compiled per le applicazioni che usano pacchetti della piattaforma, anche se l'applicazione non crea stili Compiled. Per questo la configurazione Parcel fornita fa parte dell'esempio. Copiare un'importazione di Button senza configurare il bundler può produrre stili incompleti o nell'ordine errato: è un problema di integrazione funzionale, non una nota cosmetica trascurabile.
Leggi la specifica di supporto
## Sistema di design Atlassian Usa token semantici invece di ipotizzare i colori della palette
### Un token descrive una funzione
token("color.text") indica il testo in primo piano primario, mentre token("color.text.subtle") è destinato alle informazioni secondarie. Il testo selezionato usa un ruolo distinto dal testo di pericolo. La bacheca usa elevation.surface per l'area principale ed elevation.surface.sunken per un'area di raggruppamento. Queste scelte restano comprensibili quando cambia il tema, perché i loro nomi ne esprimono la funzione.
Il catalogo ufficiale fornisce alias della palette chiara e scura per questi ruoli. La tabella di riferimento conserva queste informazioni invece di garantire un unico valore esadecimale permanente. L'esempio incorporato usa una palette illustrativa, indicata come tale. I suoi colori rendono leggibile l'esempio locale, ma non sono una fonte di riferimento alternativa per un tema Atlaskit di produzione.
Leggi la specifica di supporto
## Sistema di design Atlassian Un'unità di base di otto pixel con incrementi frazionari intenzionali
### Interpreta il suffisso come una percentuale
space.100 corrisponde a 8px; space.200 a 16px; space.025 a 2px. La scala prevede incrementi frazionari perché le distanze ridotte e l'allineamento ottico richiedono più precisione delle unità intere di otto pixel. La bacheca usa space.300 intorno ai contenuti principali e space.150 tra gli elementi correlati. Una chiamata a un token restituisce un valore CSS dipendente dal tema, non un numero su cui eseguire operazioni aritmetiche JavaScript arbitrarie.
Usa la stessa spaziatura per relazioni dello stesso tipo. La distanza tra la chiave di un ticket e il titolo dovrebbe essere minore di quella che separa l’elenco dei ticket dall’ispettore. Esistono token di spaziatura negativa, ma il layout standard della board non ne ha bisogno. Una superficie di lavoro densa dovrebbe guadagnare spazio tramite la composizione, non sovrapponendo elementi non correlati.
Leggi la specifica di supporto
## Sistema di design Atlassian I token tipografici sono dichiarazioni complete dei font
### Non usare font.body in font-size
Il catalogo definisce esplicitamente token compositi per la proprietà font CSS. L’esempio assegna font.heading.large al titolo della pagina e font.heading.medium al titolo dei dettagli. Usare uno di questi token come fontSize ne comprometterebbe il contratto previsto. Il ruolo body è adatto ai riepiloghi brevi dei ticket, mentre per le descrizioni lunghe si può usare font.body.large, se il layout circostante favorisce la lettura.
I caratteri tipografici attualmente usati dall’applicazione sono Atlassian Sans e Atlassian Mono. Sans deriva da Inter Variable; Mono deriva da JetBrains Mono. Questa identità è importante quando si descrive il sistema, ma questa anteprima autonoma non ridistribuisce quei font. Usa un fallback di sistema e lo dichiara. In un’implementazione di produzione, usa il metodo supportato per distribuire i font e la relativa licenza, anziché rinominare un carattere tipografico qualsiasi.
Leggi la specifica di supporto
## Sistema di design Atlassian Usa forma ed elevazione per spiegare la superficie di lavoro
### Una scheda è rialzata perché è un oggetto
La documentazione distingue una superficie di raggruppamento incassata, le schede rialzate e le superfici sovrapposte. Concettualmente, un elemento di lavoro spostabile appartiene al livello rialzato, mentre una colonna della board raggruppa quegli elementi. Un ispettore che fa parte della pagina standard non ha automaticamente bisogno dell’ombra di una superficie sovrapposta. Abbina i ruoli di superficie e ombra quando l’elevazione è davvero rilevante.
I nomi delle forme attualmente disponibili includono radius.xsmall a 2px, radius.small a 4px e radius.medium a 6px. Non sono la vecchia denominazione border.radius che uno sviluppatore potrebbe ricordare da un altro sistema. La tabella mantiene i nomi esatti. I controlli nativi dovrebbero usare lo stile fornito; i contenitori esterni personalizzati possono adottare il ruolo pertinente senza sovrascrivere le classi generate private.
Leggi la specifica di supporto
## Sistema di design Atlassian La selezione di un pulsante è diversa da una transizione del ticket
### Scegli con cura aspetto e stato
L’import verificato di Button è @atlaskit/button/default/button. appearance="primary" mette in risalto un’azione principale; isSelected indica il ticket attualmente selezionato in questo esempio nativo compatto. Facendo clic, cambia solo il ticket esaminato. Un controllo separato modifica lo stato del flusso di lavoro. Questa separazione evita che la selezione di una riga avvii o completi il lavoro senza che l’utente lo sappia.
API include anche isLoading, isDisabled, spacing="compact" e shouldFitContainer. Il caricamento indica un’operazione in corso, non uno stato permanente del ticket. Un’azione disabilitata dovrebbe avere una motivazione comprensibile, poiché i controlli disabilitati potrebbero essere ignorati nella navigazione da tastiera. Per questo la board autonoma mantiene disponibili i controlli di ispezione e permette all’utente di verificare direttamente lo stato locale corrente.
Leggi la specifica di supporto
## Sistema di design Atlassian Lozenge e Toggle comunicano tipi di stato diversi
### Lo stato non è una modalità di interazione
Gli aspetti di Lozenge includono information, danger e success, che l’esempio associa rispettivamente a In progress, Blocked e Done. Il significato è espresso dalle parole; il colore è ridondante. Un elemento bloccato resta tale anche quando viene selezionato. Il filtro per assegnatario usa Toggle con isChecked e onChange, perché quel valore booleano modifica gli elementi mostrati dalla board, non lo stato di un ticket.
Il selettore dello stato locale è volutamente semplice e non implica l’esistenza di un vero modello di autorizzazioni. In produzione, la transizione di un ticket potrebbe richiedere una motivazione, un ruolo o una risposta del servizio. Mantieni la logica di autorizzazione al di fuori di Lozenge e mostra il risultato confermato solo dopo che il servizio lo ha stabilito.
- La selezione identifica il ticket attualmente esaminato.
- Lo stato del flusso di lavoro descrive l’elemento di lavoro stesso.
- Il filtro per assegnatario modifica l’insieme degli elementi visibili senza cambiare l’assegnatario.
Leggi la specifica di supporto
## Sistema di design Atlassian Inizializza il tema prima di visualizzare superfici con token personalizzati
### Il caricamento del tema globale è asincrono
setGlobalTheme aggiorna gli attributi del tema del documento e carica il tema selezionato CSS. L’entry attende il completamento dell’operazione prima di visualizzare la board. Seleziona esplicitamente i temi chiaro e scuro, con la modalità chiara attiva inizialmente. Un vero controllo delle preferenze può aggiornare colorMode usando lo stesso API, anziché sostituire i colori in linea con valori casuali.
Le attuali opzioni per il brand personalizzato sono contrassegnate come alpha e usano un API UNSAFE. Questa guida non adotta questo percorso instabile solo per ricolorare l’esempio. Mantieni prima il contratto stabile del tema semantico, poi valuta la personalizzazione sperimentale come scelta di dipendenza separata.
Leggi la specifica di supporto
## Sistema di design Atlassian Verifica un’interazione reale di consultazione dei ticket
### Usa insieme i file forniti
L’esempio nativo richiede l’entry JSX, l’import di reset CSS e i due file di configurazione di Parcel. Include la raccolta di ticket, la selezione, il filtro per assegnatario, la mappatura degli stati e un messaggio aggiornato in tempo reale con il risultato. L’anteprima autonoma amplia la composizione con colonne e un ispettore, ma resta un’interpretazione HTML esplicitamente etichettata. Nessuno dei due esempi dichiara di connettersi a Jira.
Quando un filtro esclude il ticket selezionato, l’esempio nativo ne mantiene volutamente i dettagli. L’utente può continuare a esaminare l’elemento, senza essere spostato silenziosamente su un altro. Un progetto di produzione può adottare un’altra politica, ma dovrebbe spiegarla e mantenere un focus significativo. Verifica il comportamento sia su uno schermo stretto sia con tutte le colonne visibili.
1. Esamina WEB-18, poi seleziona un altro ticket senza modificarne lo stato del flusso di lavoro.
2. Attiva il filtro per assegnatario e controlla quali ticket restano visibili.
3. Modifica lo stato locale del ticket selezionato e verifica che il testo dello stato e la colonna corrispondano.
4. Torna alla board senza filtri e verifica che l’identità del ticket sia la stessa e che lo stato sia aggiornato.
Leggi la specifica di supporto
## Sistema di design Atlassian Esempi di componenti del sistema di design
### Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione HTML/CSS basata su valori verificati di spaziatura e forma, con una palette di colori esemplificativa e un fallback ai font di sistema; non è un runtime di Jira né di Atlaskit nativo.
```
Issue board — Atlassian interpretation▲Product deliveryLOCAL DEMO
Projects / Website / Board
Website release
```
Riferimento del codice
- Le transizioni dei ticket influiscono solo sulla board di esempio. Questa entry HTML non verifica la configurazione di compilazione Compiled richiesta dall’implementazione Atlaskit separata.
### Implementazione nativa completa
L’implementazione completa descritta nella configurazione, raccolta qui insieme alle spiegazioni specifiche di API. Segui i prerequisiti documentati per pacchetti e build nella configurazione.
```
// 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();
```
Riferimento del codice
- La logica completa della board React più i frammenti di configurazione richiesti riportati di seguito. Usa Parcel con l’integrazione Compiled: per i pacchetti attuali non basta importare solo CSS reset. Questo prototipo locale non dichiara di aver compilato i pacchetti nativi.
### Parcel deve elaborare gli stili Compiled distribuiti
Crea .parcelrc nella directory radice del progetto. Avvia Parcel usando la sua entry HTML dopo aver installato le dipendenze elencate nella configurazione.
```
{
"extends": ["@parcel/config-default", "@compiled/parcel-config"]
}
```
Riferimento del codice
- In questo modo si sceglie l’integrazione Parcel documentata, anziché presentare implicitamente il percorso sperimentale Vite come configurazione consigliata.
### Configurazione Compiled per la trasformazione dei token
Crea .compiledcssrc accanto a .parcelrc. Fa parte della configurazione dell’applicazione che usa il pacchetto, non di uno script per la pubblicazione del pacchetto.
```
{
"transformerBabelPlugins": [["@atlaskit/tokens/babel-plugin"]],
"extract": true,
"inlineCss": true,
"sortShorthand": true
}
```
Riferimento del codice
- Il plugin strip-runtime opzionale serve ai pacchetti che distribuiscono CSS estratti; questa applicazione che usa il pacchetto non ne ha bisogno.
### Un Lozenge descrive lo stato; un controllo lo modifica
La visualizzazione e il controllo di transizione hanno funzioni separate nei dettagli del ticket.
```
Blocked
```
Riferimento del codice
- openIssueDetail è il gestore dell’applicazione; la configurazione completa mostra lo stato della selezione.
- Non fare sembrare l’etichetta di stato un menu, a meno che non offra davvero un’interazione per cambiare stato.
## Sistema di design Atlassian Configurazione dell’agent
### Punto di partenza per l’implementazione
La logica completa della board React più i frammenti di configurazione richiesti riportati di seguito. Usa Parcel con l’integrazione Compiled: per i pacchetti attuali non basta importare solo CSS reset. Questo prototipo locale non dichiara di aver compilato i pacchetti nativi.
```
// 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 per il tuo progetto
```
Crea l’esempio Atlassian di 18 ticket fornito con React usando i token @atlaskit, il reset CSS e l’integrazione Parcel Compiled documentata. Usa le chiamate ai token semantici, i ruoli abbreviati dei font e gli import Button/Lozenge/Toggle verificati. Mantieni indipendenti la selezione, il filtro per assegnatario e lo stato del flusso di lavoro. Conserva il contesto del ticket selezionato, comunica le modifiche locali e non dichiarare una connessione a Jira o autorizzazioni reali.
```
## Sistema di design Atlassian Fonti e ambito
Analisi di OpenDesign dei pacchetti pubblici Atlassian Design System React, verificata rispetto alla documentazione collegata nell’ottobre 2026. La board incorporata è un’interpretazione HTML/CSS con valori di palette esemplificativi e ticket fittizi, non un runtime di Jira né di Atlaskit nativo. L’accesso ai pacchetti pubblici non implica diritti illimitati sul brand Atlassian né lo stesso livello di assistenza disponibile internamente.
- token Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.
- tema Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.
- configurazione Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.
- spaziatura Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.
- tipografia Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.
- font Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.
- pulsante Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.
- badge Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.
- interruttore Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.
## Sistema di design Atlassian Risorse correlate
### AWS Cloudscape
Una guida alla configurazione di Cloudscape con token reali per l’aggiornamento visivo, spaziatura adattata alla densità, API controllate per i moduli e una procedura guidata funzionante in due passaggi per le risorse.
### Backbase sistema di design
Crea un flusso di revisione bancaria personalizzato con i moduli Angular di Backbase, l’esportazione semantica del tema e stati di revisione espliciti. Confronta le API web con le dimensioni native documentate separatamente.
### Dell sistema di design
Crea una ricerca circoscritta dei dispositivi con DDS v3: colori semantici, scala tipografica responsive, spaziatura basata sui token e una composizione InputGroup il cui filtraggio è gestito dall’applicazione.
- [Riferimento per l’implementazione](https://atlassian.design/components/button/examples)
- [Fonte](https://atlassian.design/foundations/spacing/)
- [Fonte](https://atlassian.design/components/tokens/all-tokens)
- [Fonte](https://atlassian.design/foundations/typography/applying-typography)
- [Fonte](https://atlassian.design/components/button/examples)
- [Fonte](https://atlassian.design/components/lozenge/examples)
- [Leggi la specifica di supporto](https://atlassian.design/get-started/develop/atlassians)
- [Leggi la specifica di supporto](https://atlassian.design/components/tokens/all-tokens)
- [Leggi la specifica di supporto](https://atlassian.design/foundations/spacing/)
- [Leggi la specifica di supporto](https://atlassian.design/foundations/typography/product-typefaces-and-scale)
- [Leggi la specifica di supporto](https://atlassian.design/components/button/examples)
- [Leggi la specifica di supporto](https://atlassian.design/components/lozenge/examples)
- [Leggi la specifica di supporto](https://atlassian.design/components/tokens/code)
- [Leggi la specifica di supporto](https://atlassian.design/components/toggle/examples)
- [Riferimento del codice](https://atlassian.design/components/button/examples)
- [Riferimento del codice](https://atlassian.design/get-started/develop/atlassians)
- [Riferimento del codice](https://atlassian.design/components/lozenge/examples)
- [token Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.](https://atlassian.design/components/tokens/all-tokens)
- [tema Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.](https://atlassian.design/components/tokens/code)
- [configurazione Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.](https://atlassian.design/get-started/develop/atlassians)
- [spaziatura Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.](https://atlassian.design/foundations/spacing/)
- [tipografia Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.](https://atlassian.design/foundations/typography/applying-typography)
- [font Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.](https://atlassian.design/foundations/typography/product-typefaces-and-scale)
- [pulsante Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.](https://atlassian.design/components/button/examples)
- [badge Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.](https://atlassian.design/components/lozenge/examples)
- [interruttore Fonte ufficiale per il requisito specifico relativo a API, alla scala o all’integrazione discusso in questa guida.](https://atlassian.design/components/toggle/examples)