# Atlassian Designsystem
## Atlassian Designsystem-Interface-Vorschau
Sieh dir Issues an, filtere nach Verantwortlichen und ändere lokal einen Workflow-Status. Status und Auswahl bleiben unabhängig voneinander.
## Atlassian Designsystem-Designreferenz
Verwende im Code die exakten Namen der semantischen Tokens. Die offizielle Referenz stellt Farbpaletten-Aliase bereit, die je nach hellem oder dunklem Theme variieren. Daher führen diese Zeilen die Aliase auf, anstatt einen einheitlichen Hexadezimalwert zu erfinden. Numerische Abstands- und Radiuswerte stammen aus den dokumentierten Skalen. Die Hexadezimalfarben der Vorschau dienen nur der Veranschaulichung und sind kein Token-Export.
### Abstände auf Basis eines 8-Pixel-Grundwerts
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| space.0 | 0px / 0rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.025 | 2px / 0.125rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.050 | 4px / 0.25rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.075 | 6px / 0.375rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.100 | 8px / 0.5rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.150 | 12px / 0.75rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.200 | 16px / 1rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.250 | 20px / 1.25rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.300 | 24px / 1.5rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.400 | 32px / 2rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.500 | 40px / 2.5rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.600 | 48px / 3rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.800 | 64px / 4rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
| space.1000 | 80px / 5rem | Abstandstoken; das Suffix gibt den Anteil am Grundwert von 8px an. |
### Semantische Rollen für Text und Oberflächen
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| color.text | Neutral1000 / DarkNeutral1000 | Primärtext; Werte als Alias für helle / dunkle Farbpalette dargestellt. |
| color.text.subtle | Neutral800 / DarkNeutral800 | Sekundäre Beschriftungen. |
| color.text.subtlest | Neutral700 / DarkNeutral700 | Metadaten. |
| color.text.selected | Blue700 / Blue400 | Auswahl, nicht der Status des Geschäftsablaufs. |
| color.text.danger | Red800 / Red300 | Wichtiger Erklärungstext. |
| color.text.inverse | Neutral0 / DarkNeutral100 | Text auf unterstützten kräftigen Farbflächen. |
| elevation.surface | Neutral0 / DarkNeutral100 | Hauptoberfläche der Anwendung. |
| elevation.surface.sunken | Neutral100 / DarkNeutral0 | Gruppierung von Board-Spalten. |
| elevation.surface.raised | Neutral0 / DarkNeutral200 | Verschiebbare Karten für Arbeitselemente. |
| elevation.surface.overlay | Neutral0 / DarkNeutral250 | Popover- oder Overlay-Oberfläche, kombiniert mit einem Overlay-Schatten. |
### Die Typografie verwendet die Schrift-Kurzschreibweise CSS
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| font.heading.large | heading role | Seitenüberschrift. |
| font.heading.medium | heading role | Großer Komponenten- oder Detailtitel. |
| font.heading.small | heading role | Kleine Komponentenüberschrift. |
| font.body | body role | Standard für kurze Beschreibungen und Komponententext. |
| font.body.large | reading role | Ausführlichere Erläuterungen. |
| font.body.small | secondary role | Sparsam für Metadaten verwenden. |
| font.code | code role | Technische Bezeichner, nicht für gewöhnliche Diskussionen. |
| font.weight.regular / medium / bold | weight roles | Schriftstärke als gezielte Überschreibung der Schrift-Kurzschreibweise anwenden. |
### Form und Tiefe
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| radius.xsmall | 2px | Kleines Detail, etwa ein Kontrollkästchen oder Badge. |
| radius.small | 4px | Unterstützende Beschriftungen und kompakte Steuerelemente. |
| radius.medium | 6px | Interaktive Steuerelemente. |
| elevation.shadow.raised | theme-resolved multi-layer shadow | Mit elevation.surface.raised kombinieren. |
| elevation.shadow.overlay | theme-resolved multi-layer shadow | Mit einer Overlay-Oberfläche kombinieren; nicht als stärkerer Rahmen für jede Karte verwenden. |
### Im Board verwendete Komponentenparameter
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Button appearance | primary / default / subtle / danger / warning | Je nach Bedeutung der Aktion auswählen. |
| Button isSelected | boolean | Visuelle Auswahl; ändert nicht den Vorgangsstatus. |
| Button isLoading | boolean | Verhindert wiederholte Interaktionen, während der Fortschritt angezeigt wird. |
| Button spacing | default / compact | Compact ist für dichtere Einstellungen wie Tabellen dokumentiert. |
| Button shouldFitContainer | boolean | Ermöglicht der Aktion, die gesamte Breite ihres Containers einzunehmen. |
### Status- und Filterkombinationen
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Lozenge appearance="information" | In progress | Statusanzeige, kein anklickbares Steuerelement für Statusübergänge. |
| Lozenge appearance="danger" | Blocked | Den Zustand mit Text kenntlich machen. |
| Lozenge appearance="success" | Completed | Ein bestätigter lokaler Zustand in diesem Beispiel. |
| Toggle isChecked + onChange | controlled boolean | Im Beispiel wird es für einen Verantwortlichenfilter verwendet, nicht für einen Workflow-Übergang. |
## Atlassian Designsystem Vollständiger Leitfaden
Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.
Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.
## Atlassian Designsystem Öffentliche ADS-Pakete und die tatsächlichen Anforderungen an das Styling
### Der Import einer Komponente ist nicht die gesamte Integration
> Atlassian Design System Komponenten werden unter @atlaskit veröffentlicht, aber der umfassendere Atlaskit-Katalog enthält auch anwendungsspezifische Pakete. Dieses Beispiel verwendet drei dokumentierte Grundkomponenten: Button, Lozenge und Toggle, dazu Tokens und den Reset CSS. Das Datenmodell ist bewusst lokal gehalten. Keiner dieser Importe stellt Jira-Vorgangsberechtigungen, Sprintlogik oder ein Backend bereit.
Die aktuelle Einrichtungsreferenz schreibt die Compiled-Integration für Anwendungen vor, die Plattformpakete verwenden – auch wenn die Anwendung keine Compiled-Stile erstellt. Die bereitgestellte Parcel-Konfiguration ist daher Teil des Beispiels. Ein kopierter Button-Import ohne Bundler-Konfiguration kann zu unvollständigen oder falsch angeordneten Stilen führen. Das ist ein funktionales Integrationsproblem und keine bloße kosmetische Fußnote.
Unterstützende Spezifikation lesen
## Atlassian Designsystem Semantische Tokens statt Vermutungen zur Farbpalette verwenden
### Ein Token beschreibt einen Zweck
token("color.text") ist die primäre Vordergrundfarbe, während token("color.text.subtle") sekundäre Informationen darstellt. Für ausgewählten Text wird eine andere Rolle verwendet als für Gefahrentext. Das Board nutzt elevation.surface für seinen Hauptbereich und elevation.surface.sunken für einen Gruppierungsbereich. Diese Entscheidungen bleiben auch bei einem Themewechsel verständlich, weil ihre Namen den jeweiligen Zweck ausdrücken.
Der offizielle Katalog ordnet diesen Rollen Paletten-Aliasse für helle und dunkle Themes zu. Die Referenztabelle bewahrt diese Information, statt einen dauerhaft gültigen Hex-Wert zu versprechen. Das eingebettete Beispiel verwendet eine illustrative Palette und ist entsprechend gekennzeichnet. Die Farben machen das lokale Beispiel gut lesbar, sind aber keine alternative Quelle für ein produktives Atlaskit-Theme.
Unterstützende Spezifikation lesen
## Atlassian Designsystem Eine Basis von acht Pixeln mit bewusst gewählten Zwischenstufen
### Das Suffix als Prozentwert lesen
space.100 entspricht 8px; space.200 entspricht 16px; space.025 entspricht 2px. Die Skala umfasst Zwischenstufen, weil kleine Abstände und optische Ausrichtung mehr Genauigkeit erfordern als Schritte von jeweils acht Pixeln. Das Board verwendet space.300 für den Abstand um größere Inhaltsbereiche und space.150 zwischen einzelnen Elementen. Ein Token-Aufruf gibt einen themeabhängigen CSS Wert zurück und keine Zahl, auf der beliebige JavaScript Berechnungen ausgeführt werden sollten.
Für denselben Zusammenhang denselben Abstand verwenden. Der Abstand zwischen Vorgangsschlüssel und Titel sollte kleiner sein als der Abstand zwischen der Vorgangsliste und dem Inspektor. Es gibt negative Abstandstokens, aber das gewöhnliche Board-Layout benötigt sie nicht. Eine dichte Arbeitsfläche sollte durch Komposition mehr Platz erhalten, nicht dadurch, dass voneinander unabhängige Elemente übereinandergeschoben werden.
Unterstützende Spezifikation lesen
## Atlassian Designsystem Typografie-Tokens sind vollständige Schriftdeklarationen
### font.body nicht in font-size einsetzen
Der Katalog definiert ausdrücklich zusammengesetzte Schrift-Tokens für die Eigenschaft CSS font. Das Beispiel weist dem Seitentitel font.heading.large und dem Detailtitel font.heading.medium zu. Wird eines dieser Tokens als fontSize verwendet, geht der dafür vorgesehene Vertrag verloren. Die Rolle body eignet sich für kurze Vorgangszusammenfassungen. Für längere Beschreibungen kann font.body.large verwendet werden, wenn das umgebende Layout gute Lesbarkeit ermöglicht.
Die aktuellen Schriftarten der Anwendung sind Atlassian Sans und Atlassian Mono. Sans basiert auf Inter Variable, Mono auf JetBrains Mono. Diese Identität ist wichtig, wenn das System beschrieben wird, doch diese eigenständige Vorschau stellt die Schriftarten nicht bereit. Sie verwendet eine System-Fallback-Schriftart und weist darauf hin. Bei einer produktiven Einführung sollten die unterstützten Bereitstellungs- und Lizenzierungswege für Schriften verwendet werden, statt eine beliebige Schriftart umzubenennen.
Unterstützende Spezifikation lesen
## Atlassian Designsystem Form und Höhenstufen nutzen, um die Arbeitsfläche zu erklären
### Eine Karte ist erhöht, weil sie ein eigenständiges Objekt ist
Die Referenz unterscheidet zwischen einer abgesenkten Gruppierungsoberfläche, erhöhten Karten und Overlay-Oberflächen. Ein verschiebbares Arbeitselement gehört konzeptionell zur erhöhten Ebene, während eine Board-Spalte diese Elemente gruppiert. Ein Inspektor, der Teil der regulären Seite ist, benötigt nicht automatisch einen Overlay-Schatten. Oberflächen- und Schattenrollen sollten kombiniert werden, wenn eine Höhenstufe tatsächlich relevant ist.
Zu den aktuellen Formnamen gehören radius.xsmall mit 2px, radius.small mit 4px und radius.medium mit 6px. Dabei handelt es sich nicht um die ältere Schreibweise border.radius, an die sich Entwickler möglicherweise aus einem anderen System erinnern. In der Tabelle sind die exakten Namen aufgeführt. Native Steuerelemente sollten das bereitgestellte Styling verwenden. Benutzerdefinierte äußere Container können die passende Rolle übernehmen, ohne private generierte Klassen zu überschreiben.
Unterstützende Spezifikation lesen
## Atlassian Designsystem Die Auswahl eines Buttons ist etwas anderes als ein Vorgangsübergang
### Darstellung und Zustand bewusst auswählen
Der geprüfte Button-Import lautet @atlaskit/button/default/button. appearance="primary" hebt eine Hauptaktion hervor; isSelected kennzeichnet in diesem kompakten nativen Beispiel den aktuellen Vorgang. Ein Klick darauf ändert nur den Vorgang, der gerade angezeigt wird. Ein separates Steuerelement bearbeitet den Workflow-Status. Diese Trennung verhindert, dass die Auswahl einer Zeile unbemerkt die Arbeit startet oder abschließt.
API umfasst außerdem isLoading, isDisabled, spacing="compact" und shouldFitContainer. Loading steht für einen laufenden Vorgang, nicht für einen dauerhaft bestehenden Problemstatus. Für eine deaktivierte Aktion sollte ein nachvollziehbarer Grund angegeben werden, da deaktivierte Steuerelemente bei der Tastaturnavigation übersprungen werden können. Das eigenständige Board hält seine Prüfsteuerelemente daher verfügbar und ermöglicht es, den aktuellen lokalen Status direkt einzusehen.
Unterstützende Spezifikation lesen
## Atlassian Designsystem Lozenge und Toggle vermitteln unterschiedliche Arten von Status
### Status ist kein Interaktionsmodus
Zu den Darstellungen von Lozenge gehören Information, Gefahr und Erfolg. Im Beispiel stehen sie für „In Bearbeitung“, „Blockiert“ und „Erledigt“. Die Bedeutung vermitteln die Wörter; die Farbe dient nur als zusätzliche Kennzeichnung. Ein blockiertes Element bleibt blockiert, wenn es ausgewählt wird. Der Eigentümerfilter verwendet Toggle mit isChecked und onChange, denn dieser boolesche Wert beeinflusst, was auf dem Board angezeigt wird, und ändert nicht den Status eines Vorgangs.
Der lokale Statusselektor ist bewusst einfach gehalten und bildet kein echtes Berechtigungsmodell ab. Für einen Vorgangsübergang in der Produktion können eine Begründung, eine Rolle oder die Rückmeldung eines Dienstes erforderlich sein. Halte diese Autorisierungslogik von Lozenge getrennt und zeige das bestätigte Ergebnis erst an, nachdem der Dienst es festgelegt hat.
- Die Auswahl kennzeichnet den Vorgang, der gerade geprüft wird.
- Der Workflow-Status beschreibt den Vorgang selbst.
- Der Eigentümerfilter ändert die sichtbare Auswahl, nicht aber die Zuordnung.
Unterstützende Spezifikation lesen
## Atlassian Designsystem Theme initialisieren, bevor benutzerdefinierte Token-Oberflächen gerendert werden
### Das globale Theme wird asynchron geladen
setGlobalTheme aktualisiert die Theme-Attribute des Dokuments und lädt das ausgewählte Theme CSS. Der Einstiegspunkt wartet diesen Vorgang ab, bevor er das Board rendert. Er wählt helle und dunkle Themes explizit aus und aktiviert zunächst den hellen Modus. Ein echter Einstellungsschalter kann colorMode über dasselbe API aktualisieren, statt zufällige Inline-Farben zu ersetzen.
Die aktuellen Optionen für benutzerdefinierte Marken sind als Alpha gekennzeichnet und verwenden ein UNSAFE API. Dieser Leitfaden übernimmt diesen instabilen Ansatz nicht bloß, um das Beispiel umzufärben. Halte dich zuerst an den stabilen semantischen Theme-Vertrag und prüfe experimentelle Anpassungen anschließend als separate Abhängigkeitsentscheidung.
Unterstützende Spezifikation lesen
## Atlassian Designsystem Eine echte Interaktion zum Anzeigen eines Vorgangs überprüfen
### Die bereitgestellten Dateien gemeinsam verwenden
Das native Beispiel benötigt den JSX-Einstiegspunkt, den Import von CSS reset und beide Parcel-Konfigurationsdateien. Es umfasst die Vorgangssammlung, die Auswahl, den Eigentümerfilter, die Statuszuordnung und eine dynamische Ergebnismeldung. Die eigenständige Vorschau erweitert die Komposition um Spalten und einen Inspektor, bleibt aber ausdrücklich eine als HTML gekennzeichnete Interpretation. Keine der beiden Varianten beansprucht eine Verbindung zu Jira.
Wenn ein Filter den ausgewählten Vorgang ausblendet, behält das native Beispiel bewusst dessen Details bei. So kann die Person den Vorgang weiterhin prüfen, statt unbemerkt zu einem anderen Element weitergeleitet zu werden. Ein Design für den Produktivbetrieb kann eine andere Regelung vorsehen, sollte sie aber verständlich erläutern und den sinnvollen Fokus beibehalten. Überprüfe das Verhalten sowohl bei schmaler Ansicht als auch bei sichtbaren Spalten.
1. WEB-18 prüfen und anschließend einen anderen Vorgang auswählen, ohne seinen Workflow-Status zu ändern.
2. Den Eigentümerfilter aktivieren und prüfen, welche Vorgänge sichtbar bleiben.
3. Den lokalen Status des ausgewählten Vorgangs ändern und überprüfen, ob Statustext und Spalte übereinstimmen.
4. Zur ungefilterten Board-Ansicht zurückkehren und bestätigen, dass Vorgangsidentität und aktualisierter Status gleich geblieben sind.
Unterstützende Spezifikation lesen
## Atlassian Designsystem Beispiele für Designsystem-Komponenten
### Vollständige, eigenständige interaktive Demo
Das vollständige Dokument als index.html speichern und in einem Browser öffnen. Interpretation mit HTML/CSS, geprüften Abstands- und Formwerten, einer beispielhaften Farbpalette und einer Systemschrift als Fallback; keine Jira- oder native Atlaskit-Laufzeitumgebung.
```
Issue board — Atlassian interpretation▲Product deliveryLOCAL DEMO
Projects / Website / Board
Website release
```
Code-Referenz
- Vorgangsübergänge wirken sich nur auf das Beispiel-Board aus. Dieser HTML-Einstiegspunkt verwendet nicht die Compiled-Build-Konfiguration, die für die separate Atlaskit-Implementierung erforderlich ist.
### Vollständiger Einstieg für die native Implementierung
Die vollständige Implementierung aus dem Setup, hier zusammen mit den gezielten Erläuterungen zu API zusammengestellt. Beachte die in den Setup-Anweisungen dokumentierten Voraussetzungen für Pakete und Builds.
```
// 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();
```
Code-Referenz
- Vollständige Board-Logik für React sowie die erforderlichen Konfigurationsfragmente weiter unten. Parcel mit Compiled-Integration verwenden; nur CSS reset zu importieren, reicht für aktuelle Pakete nicht aus. Für dieses lokale Prototyping wird keine native Paketkompilierung beansprucht.
### Parcel muss die ausgelieferten Compiled-Styles verarbeiten
.parcelrc im Projektstammverzeichnis anlegen. Parcel nach der Installation der unter „Setup“ aufgeführten Abhängigkeiten mit seinem HTML-Einstiegspunkt starten.
```
{
"extends": ["@parcel/config-default", "@compiled/parcel-config"]
}
```
Code-Referenz
- Damit wird die dokumentierte Parcel-Integration verwendet, statt den experimentellen Vite-Ansatz stillschweigend als empfohlene Einrichtung darzustellen.
### Compiled-Konfiguration für die Token-Transformation
.compiledcssrc neben .parcelrc anlegen. Diese Datei gehört zur Einrichtung der Anwendung, die das Paket verwendet, und ist kein Skript zur Veröffentlichung des Pakets.
```
{
"transformerBabelPlugins": [["@atlaskit/tokens/babel-plugin"]],
"extract": true,
"inlineCss": true,
"sortShorthand": true
}
```
Code-Referenz
- Das optionale Plugin strip-runtime ist für Pakete gedacht, die extrahierte CSS verteilen; für diese Anwendung ist es nicht erforderlich.
### Eine Status-Pille beschreibt einen Zustand; ein Steuerelement ändert ihn
Anzeige und Übergangssteuerung erfüllen in den Vorgangsdetails unterschiedliche Aufgaben.
```
Blocked
```
Code-Referenz
- openIssueDetail ist der Anwendungs-Handler; die vollständige Einrichtung veranschaulicht den Auswahlstatus.
- Lass die Statusbezeichnung nicht wie ein Menü aussehen, es sei denn, sie bietet tatsächlich eine Interaktion zum Ändern des Status.
## Atlassian Designsystem Einrichtung des KI-Agenten
### Ausgangspunkt für die Implementierung
Vollständige Board-Logik für React sowie die erforderlichen Konfigurationsfragmente weiter unten. Parcel mit Compiled-Integration verwenden; nur CSS reset zu importieren, reicht für aktuelle Pakete nicht aus. Für dieses lokale Prototyping wird keine native Paketkompilierung beansprucht.
```
// 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();
```
### Ein Prompt für dein Projekt
```
Das bereitgestellte React-Beispiel für 18 Atlassian-Vorgänge mit @atlaskit-Tokens, CSS reset und der dokumentierten Compiled-Integration für Parcel erstellen. Semantische Token-Aufrufe, Schriftrollen per Kurzschreibweise und die geprüften Button-/Lozenge-/Toggle-Imports verwenden. Auswahl, Eigentümerfilter und Workflow-Status unabhängig voneinander halten. Den Kontext des ausgewählten Vorgangs beibehalten, lokale Änderungen ankündigen und weder eine Jira-Verbindung noch echte Berechtigungen behaupten.
```
## Atlassian Designsystem Quellen und Geltungsbereich
Studie zu den öffentlichen Paketen Atlassian Design System React von OpenDesign, geprüft anhand der verlinkten Dokumentation im Oktober 2026. Das eingebettete Board ist eine Interpretation von HTML/CSS mit beispielhaften Farbpalettenwerten und fiktiven Vorgängen, keine Jira- oder native Atlaskit-Laufzeitumgebung. Der öffentliche Zugriff auf Pakete bedeutet weder uneingeschränkte Rechte an der Atlassian-Marke noch Anspruch auf denselben Support wie intern.
- Tokens Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.
- Theme Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.
- Einrichtung Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.
- Abstände Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.
- Typografie Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.
- Schrift Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.
- Button Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.
- Lozenge Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.
- Toggle Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.
## Atlassian Designsystem Weiterführende Ressourcen
### AWS Cloudscape
Ein Konfigurationsleitfaden für Cloudscape mit echten Tokens zur visuellen Aktualisierung, dichteabhängigen Abständen, APIs für kontrollierte Formulare und einem funktionsfähigen zweistufigen Ressourcen-Assistenten.
### Backbase Designsystem
Erstellen Sie mit den Angular-Modulen von Backbase, einem semantischen Theme-Export und klar definierten Prüfstatus einen gebrandeten Prüfablauf für Bankgeschäfte. Vergleichen Sie Web-APIs mit separat dokumentierten nativen Abmessungen.
### Dell Designsystem
Erstellen Sie mit DDS v3 eine gezielte Gerätesuche: mit semantischen Farben, einer responsiven Schriftgrößenskala, Token-Abständen und einer InputGroup-Komposition, deren Filterverhalten von der Anwendung gesteuert wird.
- [Implementierungsreferenz](https://atlassian.design/components/button/examples)
- [Quelle](https://atlassian.design/foundations/spacing/)
- [Quelle](https://atlassian.design/components/tokens/all-tokens)
- [Quelle](https://atlassian.design/foundations/typography/applying-typography)
- [Quelle](https://atlassian.design/components/button/examples)
- [Quelle](https://atlassian.design/components/lozenge/examples)
- [Unterstützende Spezifikation lesen](https://atlassian.design/get-started/develop/atlassians)
- [Unterstützende Spezifikation lesen](https://atlassian.design/components/tokens/all-tokens)
- [Unterstützende Spezifikation lesen](https://atlassian.design/foundations/spacing/)
- [Unterstützende Spezifikation lesen](https://atlassian.design/foundations/typography/product-typefaces-and-scale)
- [Unterstützende Spezifikation lesen](https://atlassian.design/components/button/examples)
- [Unterstützende Spezifikation lesen](https://atlassian.design/components/lozenge/examples)
- [Unterstützende Spezifikation lesen](https://atlassian.design/components/tokens/code)
- [Unterstützende Spezifikation lesen](https://atlassian.design/components/toggle/examples)
- [Code-Referenz](https://atlassian.design/components/button/examples)
- [Code-Referenz](https://atlassian.design/get-started/develop/atlassians)
- [Code-Referenz](https://atlassian.design/components/lozenge/examples)
- [Tokens Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.](https://atlassian.design/components/tokens/all-tokens)
- [Theme Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.](https://atlassian.design/components/tokens/code)
- [Einrichtung Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.](https://atlassian.design/get-started/develop/atlassians)
- [Abstände Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.](https://atlassian.design/foundations/spacing/)
- [Typografie Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.](https://atlassian.design/foundations/typography/applying-typography)
- [Schrift Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.](https://atlassian.design/foundations/typography/product-typefaces-and-scale)
- [Button Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.](https://atlassian.design/components/button/examples)
- [Lozenge Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.](https://atlassian.design/components/lozenge/examples)
- [Toggle Offizielle Quelle für die in diesem Leitfaden behandelte konkrete API-, Skalen- oder Integrationsanforderung.](https://atlassian.design/components/toggle/examples)