# Sistema de diseño Atlassian
## Vista previa de la interfaz de sistema de diseño Atlassian
Consulta incidencias, filtra por responsable y cambia un estado local del flujo de trabajo. El estado y la selección son independientes.
## Referencia de diseño de sistema de diseño Atlassian
Usa en el código los nombres exactos de los tokens semánticos. La referencia oficial expone alias de la paleta de colores que varían entre los temas claro y oscuro, por lo que estas filas conservan los alias en lugar de inventar un valor hexadecimal estable. Los valores numéricos de espaciado y radio proceden de las escalas documentadas. Los colores hexadecimales de la vista previa son ilustrativos, no una exportación de tokens.
### Espaciado basado en una unidad de ocho píxeles
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| space.0 | 0px / 0rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.025 | 2px / 0.125rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.050 | 4px / 0.25rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.075 | 6px / 0.375rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.100 | 8px / 0.5rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.150 | 12px / 0.75rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.200 | 16px / 1rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.250 | 20px / 1.25rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.300 | 24px / 1.5rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.400 | 32px / 2rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.500 | 40px / 2.5rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.600 | 48px / 3rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.800 | 64px / 4rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
| space.1000 | 80px / 5rem | Token de espaciado; el sufijo indica un porcentaje de la unidad base de 8px. |
### Funciones semánticas de texto y superficie
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| color.text | Neutral1000 / DarkNeutral1000 | Texto principal; valores mostrados como alias de la paleta para los temas claro y oscuro. |
| color.text.subtle | Neutral800 / DarkNeutral800 | Etiquetas secundarias. |
| color.text.subtlest | Neutral700 / DarkNeutral700 | Metadatos. |
| color.text.selected | Blue700 / Blue400 | Selección, no estado del flujo de trabajo. |
| color.text.danger | Red800 / Red300 | Texto explicativo de importancia crítica. |
| color.text.inverse | Neutral0 / DarkNeutral100 | Texto sobre rellenos intensos compatibles. |
| elevation.surface | Neutral0 / DarkNeutral100 | Superficie principal de la aplicación. |
| elevation.surface.sunken | Neutral100 / DarkNeutral0 | Agrupación de columnas del tablero. |
| elevation.surface.raised | Neutral0 / DarkNeutral200 | Tarjetas de elementos de trabajo movibles. |
| elevation.surface.overlay | Neutral0 / DarkNeutral250 | Superficie de popover o superposición, combinada con una sombra de superposición. |
### La tipografía usa la abreviatura de fuente de CSS
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| font.heading.large | heading role | Título de página. |
| font.heading.medium | heading role | Título de componente o detalle grande. |
| font.heading.small | heading role | Título de componente pequeño. |
| font.body | body role | Descripciones breves y texto de componentes predeterminados. |
| font.body.large | reading role | Explicaciones más extensas. |
| font.body.small | secondary role | Uso limitado para metadatos. |
| font.code | code role | Identificadores técnicos; no se usan en conversaciones habituales. |
| font.weight.regular / medium / bold | weight roles | Aplica el grosor como una anulación deliberada de la abreviatura de fuente. |
### Forma y profundidad
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| radius.xsmall | 2px | Detalles pequeños, como una casilla o una insignia. |
| radius.small | 4px | Etiquetas complementarias y controles compactos. |
| radius.medium | 6px | Controles interactivos. |
| elevation.shadow.raised | theme-resolved multi-layer shadow | Combínalo con elevation.surface.raised. |
| elevation.shadow.overlay | theme-resolved multi-layer shadow | Combínalo con una superficie superpuesta; no uses un borde más marcado en todas las tarjetas. |
### Parámetros de los componentes utilizados en el tablero
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Button appearance | primary / default / subtle / danger / warning | Elige según el significado de la acción. |
| Button isSelected | boolean | Selección visual; no cambia el estado de la incidencia. |
| Button isLoading | boolean | Impide interacciones repetidas mientras muestra el progreso. |
| Button spacing | default / compact | La opción compact está documentada para configuraciones más densas, como las tablas. |
| Button shouldFitContainer | boolean | Permite que la acción ocupe todo el ancho de su contenedor. |
### Composición de estados y filtros
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Lozenge appearance="information" | In progress | Indicador de estado, no un control interactivo para cambiarlo. |
| Lozenge appearance="danger" | Blocked | Usa texto para identificar la condición. |
| Lozenge appearance="success" | Completed | Un estado local confirmado en este ejemplo. |
| Toggle isChecked + onChange | controlled boolean | En el ejemplo se usa para filtrar por responsable, no para cambiar el estado del flujo de trabajo. |
## Sistema de diseño Atlassian Guía completa
Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.
Orientación completa, un punto de partida para la implementación y enlaces al código fuente.
## Sistema de diseño Atlassian Paquetes públicos de ADS y los requisitos reales de estilo
### Importar un componente no basta para completar la integración
> Atlassian Design System Los componentes se publican bajo @atlaskit, pero el catálogo general de Atlaskit también incluye paquetes específicos para aplicaciones. Este ejemplo elige tres primitivas documentadas: Button, Lozenge y Toggle, además de tokens y CSS reset. Su modelo de datos es deliberadamente local. Ninguna de esas importaciones proporciona permisos de incidencias de Jira, lógica de sprints ni un backend.
La referencia actual de configuración exige integrar Compiled en las aplicaciones que consumen paquetes de la plataforma, aunque no generen estilos con Compiled. Por eso, la configuración de Parcel incluida forma parte del ejemplo. Copiar una importación de Button sin configurar el empaquetador puede dar lugar a estilos incompletos o con un orden incorrecto; se trata de un problema funcional de integración, no de una nota estética menor.
Consulta la especificación complementaria
## Sistema de diseño Atlassian Usa tokens semánticos en vez de hacer conjeturas sobre la paleta
### Cada token define una función
token("color.text") es el color de primer plano principal, mientras que token("color.text.subtle") se usa para información secundaria. El texto seleccionado tiene una función distinta de la del texto de peligro. El tablero usa elevation.surface en su área principal y elevation.surface.sunken en una sección agrupada. Estas opciones siguen siendo comprensibles cuando cambia el tema, porque sus nombres expresan su propósito.
El catálogo oficial proporciona equivalencias de paleta para temas claros y oscuros para estas funciones. La tabla de referencia conserva esa información en lugar de prometer un único valor hexadecimal permanente. El ejemplo integrado usa una paleta ilustrativa y así lo indica. Sus colores hacen legible el ejemplo local, pero no sustituyen la fuente de verdad para un tema de Atlaskit en producción.
Consulta la especificación complementaria
## Sistema de diseño Atlassian Una base de ocho píxeles con incrementos fraccionarios deliberados
### Interpreta el sufijo como un porcentaje
space.100 equivale a 8px; space.200, a 16px; space.025, a 2px. La escala incluye incrementos fraccionarios porque los espacios pequeños y la alineación óptica requieren más precisión que las unidades enteras de ocho píxeles. El tablero usa space.300 alrededor del contenido principal y space.150 entre elementos locales. Una llamada al token devuelve un valor CSS adaptado al tema, no un número sobre el que realizar JavaScript operaciones aritméticas arbitrarias.
Usa el mismo espacio para la misma relación. La distancia entre la clave de una incidencia y su título debería ser menor que la separación entre la lista de incidencias y el inspector. Existen tokens de espaciado negativo, pero el diseño habitual del tablero no los necesita. Una superficie de trabajo densa debería ganar espacio mediante la composición, no superponiendo elementos que no guardan relación.
Consulta la especificación complementaria
## Sistema de diseño Atlassian Los tokens tipográficos son declaraciones de fuente completas
### No asignes font.body a font-size
El catálogo define explícitamente tokens tipográficos compuestos para la propiedad CSS font. En el ejemplo, se asigna font.heading.large al título de la página y font.heading.medium al título del detalle. Usar uno de estos tokens como fontSize descartaría el contrato previsto. La función de texto del cuerpo es adecuada para resúmenes breves de incidencias, mientras que las descripciones extensas pueden usar font.body.large si el diseño que las rodea facilita la lectura.
Las tipografías actuales de la aplicación son Atlassian Sans y Atlassian Mono. Sans está basada en Inter Variable; Mono, en JetBrains Mono. Esa identidad importa al describir el sistema, pero esta vista previa independiente no redistribuye esas fuentes. Usa una fuente alternativa del sistema y lo indica. Para adoptar el sistema en producción, hay que usar la vía compatible de distribución de fuentes y licencias, en lugar de cambiar el nombre de una tipografía cualquiera.
Consulta la especificación complementaria
## Sistema de diseño Atlassian Usa la forma y la elevación para explicar la superficie de trabajo
### Una tarjeta está elevada porque es un objeto
La referencia distingue entre superficies agrupadas hundidas, tarjetas elevadas y superficies superpuestas. Conceptualmente, un elemento de trabajo movible pertenece a la capa elevada, mientras que una columna del tablero agrupa esos elementos. Un inspector integrado en la página habitual no necesita automáticamente una sombra de superposición. Combina las funciones de superficie y sombra cuando la elevación sea relevante.
Los nombres de forma actuales incluyen radius.xsmall, de 2px; radius.small, de 4px; y radius.medium, de 6px. No son la denominación antigua border.radius que quizá recuerdes de otro sistema. La tabla conserva los nombres exactos. Los controles nativos deberían usar los estilos proporcionados; los contenedores externos personalizados pueden adoptar la función correspondiente sin sobrescribir clases generadas privadas.
Consulta la especificación complementaria
## Sistema de diseño Atlassian Seleccionar un botón no es lo mismo que cambiar el estado de una incidencia
### Elige deliberadamente una apariencia y un estado
La importación de Button verificada es @atlaskit/button/default/button. appearance="primary" destaca una acción principal; isSelected marca la incidencia actual en este ejemplo compacto con controles nativos. Al hacer clic, solo cambia la incidencia inspeccionada. Un control independiente edita el estado del flujo de trabajo. Esta separación evita que seleccionar una fila inicie o complete el trabajo de forma silenciosa.
API También incluye isLoading, isDisabled, spacing="compact" y shouldFitContainer. El estado de carga representa una operación en curso, no un estado permanente de la incidencia. Una acción deshabilitada necesita una explicación comprensible, ya que los controles deshabilitados pueden omitirse durante la navegación con teclado. Por eso, el tablero independiente mantiene disponibles los controles de inspección y permite revisar directamente el estado local actual.
Consulta la especificación complementaria
## Sistema de diseño Atlassian La pastilla y el interruptor comunican tipos distintos de estado
### El estado no es un modo de interacción
Las apariencias de Lozenge incluyen información, peligro y éxito, que el ejemplo asigna a En curso, Bloqueada y Hecha. El significado lo transmiten las palabras; el color es redundante. Una incidencia bloqueada sigue bloqueada cuando se selecciona. El filtro de responsable usa Toggle con isChecked y onChange, porque ese valor booleano modifica las incidencias que muestra el tablero, no el estado de ninguna incidencia.
El selector de estado local es deliberadamente sencillo y no implica un modelo real de permisos. Una transición de incidencia en producción puede requerir un motivo, un rol o una respuesta del servicio. Mantén esa lógica de autorización fuera de Lozenge y muestra el resultado confirmado solo después de que el servicio lo haya establecido.
- La selección identifica la incidencia que se está consultando.
- El estado del flujo de trabajo describe la propia incidencia.
- El filtro de responsable cambia el conjunto visible sin modificar quién es responsable.
Consulta la especificación complementaria
## Sistema de diseño Atlassian Inicializa el tema antes de mostrar superficies con tokens personalizados
### La carga del tema global es asíncrona
setGlobalTheme actualiza los atributos del tema del documento y carga el tema seleccionado CSS. La entrada espera a que termine esa operación antes de mostrar el tablero. Selecciona explícitamente los temas claro y oscuro, con el modo claro activo inicialmente. Un control de preferencias real puede actualizar colorMode mediante el mismo API, en lugar de sustituir los colores por otros aleatorios en línea.
Las opciones actuales de marca personalizada están marcadas como alfa y usan un API UNSAFE. Esta guía no adopta esa vía inestable solo para cambiar los colores del ejemplo. Primero, conserva el contrato estable del tema semántico; después, evalúa la personalización experimental como una decisión de dependencia independiente.
Consulta la especificación complementaria
## Sistema de diseño Atlassian Valida una interacción real de consulta de incidencias
### Usa conjuntamente los archivos proporcionados
El ejemplo nativo necesita la entrada JSX, la importación del restablecimiento CSS y ambos archivos de configuración de Parcel. Incluye la colección de incidencias, la selección, el filtro de responsable, la asignación de estados y un mensaje de resultado dinámico. La vista previa independiente amplía la composición con columnas y un panel de inspección, pero sigue siendo una interpretación HTML claramente identificada. Ninguno de los dos ejemplos afirma conectarse a Jira.
Cuando un filtro excluye la incidencia seleccionada, el ejemplo nativo conserva deliberadamente sus detalles. Así, quien consulta el tablero puede seguir examinando el objeto en lugar de que se le cambie silenciosamente a otra incidencia. Un diseño de producción puede optar por otra política, pero debería explicarla y mantener un foco significativo. Verifica el comportamiento tanto en una ventana estrecha como con todas las columnas visibles.
1. Inspecciona WEB-18 y luego selecciona otra incidencia sin cambiar su estado del flujo de trabajo.
2. Activa el filtro de responsable y comprueba qué incidencias siguen visibles.
3. Cambia el estado local de la incidencia seleccionada y comprueba que el texto de estado y la columna coincidan.
4. Vuelve al tablero sin filtros y confirma que se conservan la identidad de la misma incidencia y el estado actualizado.
Consulta la especificación complementaria
## Sistema de diseño Atlassian Ejemplos de componentes del sistema de diseño
### Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación HTML/CSS con valores de espaciado y forma verificados, una paleta de colores ilustrativa y fuentes del sistema como alternativa; no es un entorno de ejecución de Jira ni de Atlaskit nativo.
```
Issue board — Atlassian interpretation▲Product deliveryLOCAL DEMO
Projects / Website / Board
Website release
```
Referencia de código
- Las transiciones de incidencias solo afectan al tablero de ejemplo. Esta entrada HTML no utiliza la configuración de compilación Compiled necesaria para la implementación independiente de Atlaskit.
### Entrada de implementación nativa completa
La implementación completa de la configuración, reunida aquí junto con las explicaciones específicas de API. Sigue los requisitos documentados de paquetes y compilación en la sección de configuración.
```
// 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();
```
Referencia de código
- Lógica completa del tablero React más los fragmentos de configuración requeridos que aparecen a continuación. Usa Parcel con la integración de Compiled; importar solo el restablecimiento CSS no basta para los paquetes actuales. No se afirma que este prototipo local compile los paquetes nativos.
### Parcel debe procesar los estilos Compiled distribuidos
Crea .parcelrc en la raíz del proyecto. Inicia Parcel con su entrada HTML después de instalar las dependencias indicadas en la configuración.
```
{
"extends": ["@parcel/config-default", "@compiled/parcel-config"]
}
```
Referencia de código
- Esto selecciona la integración de Parcel documentada, en lugar de presentar en silencio la vía experimental de Vite como configuración recomendada.
### Configuración de Compiled para la transformación de tokens
Crea .compiledcssrc junto a .parcelrc. Esto forma parte de la configuración de la aplicación consumidora, no de un script para publicar paquetes.
```
{
"transformerBabelPlugins": [["@atlaskit/tokens/babel-plugin"]],
"extract": true,
"inlineCss": true,
"sortShorthand": true
}
```
Referencia de código
- El complemento opcional strip-runtime es para paquetes que distribuyen CSS extraído; esta aplicación consumidora no lo necesita.
### Una pastilla describe el estado; un control lo cambia
La visualización y el control de transición tienen responsabilidades distintas en los detalles de la incidencia.
```
Blocked
```
Referencia de código
- openIssueDetail es el controlador de la aplicación; la configuración completa muestra el estado de selección.
- No hagas que la etiqueta de estado parezca un menú, a menos que realmente permita cambiar el estado.
## Sistema de diseño Atlassian Configuración del agente de IA
### Punto de partida para la implementación
Lógica completa del tablero React más los fragmentos de configuración requeridos que aparecen a continuación. Usa Parcel con la integración de Compiled; importar solo el restablecimiento CSS no basta para los paquetes actuales. No se afirma que este prototipo local compile los paquetes nativos.
```
// 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();
```
### Una instrucción para tu proyecto
```
Crea el ejemplo proporcionado de 18 incidencias de Atlassian React con @atlaskit tokens, el restablecimiento CSS y la integración documentada de Compiled con Parcel. Usa llamadas a tokens semánticos, roles abreviados de tipografía e importaciones verificadas de Button/Lozenge/Toggle. Mantén independientes la selección, el filtro de responsable y el estado del flujo de trabajo. Conserva el contexto de la incidencia seleccionada, anuncia los cambios locales y no afirmes que hay conexión con Jira ni permisos reales.
```
## Sistema de diseño Atlassian Fuentes y alcance
OpenDesign estudio de los paquetes públicos Atlassian Design System React, contrastado con la documentación enlazada en octubre de 2026. El tablero integrado es una interpretación HTML/CSS con valores de paleta ilustrativos e incidencias ficticias; no es Jira ni un entorno de ejecución de Atlaskit nativo. El acceso a paquetes públicos no implica derechos ilimitados sobre la marca de Atlassian ni el mismo nivel de asistencia disponible internamente.
- tokens Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.
- tema Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.
- configuración Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.
- espaciado Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.
- tipografía Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.
- fuente Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.
- botón Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.
- pastilla Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.
- interruptor Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.
## Sistema de diseño Atlassian Recursos relacionados
### AWS Cloudscape
Una guía de configuración de Cloudscape con tokens reales de actualización visual, espaciado que se adapta a la densidad, API controladas para formularios y un asistente funcional de dos pasos para crear recursos.
### Backbase sistema de diseño
Crea un flujo de revisión bancaria con identidad de marca usando los módulos Angular de Backbase, la exportación de temas semánticos y estados de revisión explícitos. Compara las API web con las dimensiones nativas documentadas por separado.
### Dell sistema de diseño
Crea una búsqueda de dispositivos con ámbito definido mediante DDS v3: colores semánticos, escala tipográfica adaptable, espaciado basado en tokens y una composición InputGroup cuyo filtrado corresponde a la aplicación.
- [Referencia de implementación](https://atlassian.design/components/button/examples)
- [Fuente](https://atlassian.design/foundations/spacing/)
- [Fuente](https://atlassian.design/components/tokens/all-tokens)
- [Fuente](https://atlassian.design/foundations/typography/applying-typography)
- [Fuente](https://atlassian.design/components/button/examples)
- [Fuente](https://atlassian.design/components/lozenge/examples)
- [Consulta la especificación complementaria](https://atlassian.design/get-started/develop/atlassians)
- [Consulta la especificación complementaria](https://atlassian.design/components/tokens/all-tokens)
- [Consulta la especificación complementaria](https://atlassian.design/foundations/spacing/)
- [Consulta la especificación complementaria](https://atlassian.design/foundations/typography/product-typefaces-and-scale)
- [Consulta la especificación complementaria](https://atlassian.design/components/button/examples)
- [Consulta la especificación complementaria](https://atlassian.design/components/lozenge/examples)
- [Consulta la especificación complementaria](https://atlassian.design/components/tokens/code)
- [Consulta la especificación complementaria](https://atlassian.design/components/toggle/examples)
- [Referencia de código](https://atlassian.design/components/button/examples)
- [Referencia de código](https://atlassian.design/get-started/develop/atlassians)
- [Referencia de código](https://atlassian.design/components/lozenge/examples)
- [tokens Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.](https://atlassian.design/components/tokens/all-tokens)
- [tema Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.](https://atlassian.design/components/tokens/code)
- [configuración Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.](https://atlassian.design/get-started/develop/atlassians)
- [espaciado Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.](https://atlassian.design/foundations/spacing/)
- [tipografía Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.](https://atlassian.design/foundations/typography/applying-typography)
- [fuente Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.](https://atlassian.design/foundations/typography/product-typefaces-and-scale)
- [botón Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.](https://atlassian.design/components/button/examples)
- [pastilla Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.](https://atlassian.design/components/lozenge/examples)
- [interruptor Fuente oficial del requisito concreto de API, escala o integración que se trata en esta guía.](https://atlassian.design/components/toggle/examples)