Design Tokens (Atome)¶

Design Tokens sind die kleinsten fest definierten Bausteine des doubleSlash PlantUML Style Guides - vergleichbar mit den Farben im doubleSlash Web Style Guide.

Auf dieser Seite finden Sie die Standard-Werte, die in allen Diagrammen gelten.

Autoren vs. Maintainer

Diagramm-Autoren sollen Tokens und Stereotypen referenzieren - keine eigenen Hex-Werte oder skinparam-Overrides. Theme-Maintainer ändern Werte zentral im Repo und passen diese Seite an. Verbindliche Do/Don't-Regeln: Autoren-Regeln · Implementierungsdetails: Theme-Entwicklung

Farb-Tokens¶

Die Farbpalette folgt dem doubleSlash Web Style Guide – Colors. Token-Namen entsprechen doubleslash/colors.puml ($DS_CYAN, $TEXT_BLACK, …).

Die meisten Farben sind modusabhängig (light / dark). Primary Cyan ist die einzige Markenfarbe und gilt in beiden Modi identisch.

Die Übersicht definiert den verbindlichen Soll-Standard für PlantUML-Diagramme. Tokens sind nach Elementkategorien gruppiert (Formen, Verbindungen, Text, Container, Diagramm-Metadaten, Semantik). Wird derselbe HEX-Wert für unterschiedliche Rollen genutzt, steht er in eigenen Zeilen.

Übersicht { #ubersicht }¶

Kategorie	Element / Rolle	Token	Verwendung (PlantUML)	Light	Dark
Markenfarbe	Primary Cyan	`$DS_CYAN`, `$INFO`	Markenidentität, Akzente, Info-Hervorhebung	`#00A5E1`	`#00A5E1`
Primär (Clickable)	Deep Ocean Blue / Bright Sky	`$DS_CLICKABLE` / `$DS_DARK_CLICKABLE`	Interaktive Elemente: Rahmen, Links, Buttons, Sequence-Lifeline, Group-Header	`#00759E`	`#77DDFF`
Formen – Rahmen	Primary / Markenblau	`$DS_BLUE`, `$PRIMARY`	Rahmen Class, State, Activity, Component; Start/End-State; Package-Rahmen	`#00759E`	`#77DDFF`
Formen – Füllung	Blau-Tint	`$DS_LIGHTBLUE`, `$SECONDARY`	Hintergrund Class, State, Activity, Use Case, Component, Participant, Collections	`#D7E9F4`	`#22303C`
Formen – Füllung	Interface	`$DS_CYAN`	Interface-Hintergrund und -Rahmen (BorderThickness 2)	`#00A5E1`	`#00A5E1`
Formen – Füllung	Extern / Fremdsystem	`$SUPERLIGHTGREY` ‡	`<<external>>`, `<<External>>`: Class, Agent, Database, Participant, Use Case	`#F8F8F8`	`#2D2D2D`
Formen – Füllung	Actor	`$DS_LIGHTGREY`	Use-Case-Actor-Hintergrund und -Rahmen	`#C6C6C6`	`#B6B6B6`
Formen – Füllung	Extern-Interface	`$DS_GREY`	`<<external>>` Interface-Hintergrund und -Rahmen	`#7A7A7A`	`#7A7A7A`
Verbindungen	Pfeile & Linien	`$DS_GREY`	`ArrowColor`, Sequence-Pfeile, Activity-Pfeile; Legenden-Rahmen; Group-/Box-Rahmen	`#7A7A7A`	`#7A7A7A`
Verbindungen	Rahmen dezent	`$DS_LIGHTGREY`	Swimlane-Rahmen; Sequence-Reference-Rahmen	`#C6C6C6`	`#B6B6B6`
Text – Standard	Default / Darkmode Text	`$TEXT_BLACK` / `$TEXT_DARK`, `$FGCOLOR`	Standard-Fließtext; Titel, Legende, Notes, Pfeilbeschriftung, Stereotyp-Labels	`#000000`	`#D7E9F4`
Text – auf Formen	Element-Labels	`$BLACK`	Class-Header, Participant, Activity, State, Component, Package, Rectangle	`#000000`	`#D7E9F4`
Text – Actor	Actor-Label	`$TERTIARY_TINT` / `$TEXT_DARK_SECONDARY`	Use-Case-Actor-Beschriftung	`#6D6D6D`	`#AFC1C7`
Text – Tertiary	Tertiary Tint / Secondary	`$TERTIARY_TINT` / `$TEXT_DARK_SECONDARY`	Bullets, Subheader-Nummerierung; Sequence Box-/Delay-/Group-Font	`#6D6D6D`	`#AFC1C7`
Text – Invers	White / Disabled	`$TEXT_WHITE` / `$DS_DARK_DISABLED`	Text auf dunklem oder farbigem Hintergrund; Dark-Mode deaktivierter Text	`#FFFFFF`	`#84999F`
Container	Systemgrenze	`$ALICEBLUE` ‡	Use-Case-System-`rectangle`, Package-Hintergrund	`#F0F8FF`	`#3A3A3A`
Container	Gruppe / Swimlane	`$SUPERLIGHTGREY` ‡	Sequence-Groups, Divider, Activity-Swimlane-Titel, Reference-Header	`#F8F8F8`	`#2D2D2D`
Container	Frame / Folder	`$DS_CYAN`, `$DS_ORANGE`	Rahmen- und Textfarbe für `frame` bzw. `folder` (Semantik-Hervorhebung)	`#00A5E1` / `#DB6A00`	`#00A5E1` / `#DB6A00`
Diagramm – Hintergrund	Export / Canvas	`$PUML_BGCOLOR`, `$DS_BASE_BACKGROUND` / `$DS_DARK_BACKGROUND`	Gerendeter Diagramm-Hintergrund; Sequence-Box/Group-Body; Surface Base	`#FFFFFF`	`#15202B`
Diagramm – Metadaten	Titel	`$FGCOLOR`	`skinparam title` · FontColor	`#000000`	`#D7E9F4`
Diagramm – Metadaten	Legende	`$FGCOLOR`, `$DS_GREY`	Legenden-Text; Rahmen `$DS_GREY`, Hintergrund transparent	`#000000` / `#7A7A7A`	`#D7E9F4` / `#7A7A7A`
Diagramm – Metadaten	Notes	`$FGCOLOR`	Note-Text (Hintergrund transparent)	`#000000`	`#D7E9F4`
Semantik – Erfolg	Valid / Valid Dark	`$DS_GREEN`, `$SUCCESS` / `$DS_DARK_GREEN`	Erfolg, positive Status, Bestätigungen	`#6B9714`	`#B9D478`
Semantik – Warnung	Orange	`$DS_ORANGE`, `$WARNING`	Warnmeldungen, Storage-Semantik, Akzent	`#DB6A00`	`#DB6A00`
Semantik – Fehler	Invalid / Invalid Dark	`$DS_RED`, `$DANGER` / `$DS_DARK_RED`	Fehler, negative Status, kritische Pfade	`#C63328`	`#E85F63`
‡ C4 – Context	Context-Ebene	`$CONTEXT_BG`	`<<context>>` Hintergrund	`#FFFFFF`	`#2A2A2A`
‡ C4 – Container	Container-Ebene	`$CONTAINER_BG`	`<<container>>` Hintergrund	`#EEF8FE`	`#353535`
‡ C4 – Component	Component-Ebene	`$COMPONENT_BG`	`<<component>>` Hintergrund (gleicher HEX wie Form-Füllung Light)	`#D7E9F4`	`#404040`
‡ C4 – Module	Module-Ebene	`$MODULE_BG`	`<<module>>` Hintergrund (gleicher HEX wie Text Tertiary Dark)	`#AFC1C7`	`#4A4A4A`
‡ C4 – Code	Code-Ebene	`$CODE_BG`	`<<code>>` Hintergrund (gleicher HEX wie Text Disabled Dark)	`#84999F`	`#555555`

‡ Nicht im doubleSlash Living Style Guide (Web-CI) – PlantUML-spezifische Erweiterung.

Typografie (Schriftart/-größe, kein Farb-Token): siehe Abschnitt Typografie – u. a. $FONTNAME (Helvetica), Body 12 pt, Titel 28 pt, Notes 11 pt, Class-Header 15 pt bold.

Farbdefinitionen¶

Detailierte Beschreibungen zu den Farben aus der Übersicht.

Primary Cyan

Token: $DS_CYAN, $INFO
HEX: #00A5E1
Verwendung: Markenidentität, Interface-Füllung, Frame-Rahmen, Info-Hervorhebung

Zentrale Markenfarbe der doubleSlash Corporate Identity – modusunabhängig.

Deep Ocean Blue

Token: $DS_CLICKABLE, $DS_BLUE, $PRIMARY
HEX: #00759E
Verwendung: Interaktive Elemente, Form-Rahmen, Links, Sequence-Lifeline

Kräftiges Ozeanblau für klickbare Elemente und Primary-Rahmen.

Bright Sky

Token: $DS_DARK_CLICKABLE, $DS_BLUE, $PRIMARY
HEX: #77DDFF
Verwendung: Interaktive Elemente, Form-Rahmen, Links, Sequence-Lifeline

Helles Himmelblau – Primary- und Clickable-Variante auf dunklem Hintergrund.

Blau-Tint

Token: $DS_LIGHTBLUE, $SECONDARY, $TEXT_DARK, $FGCOLOR, $BLACK, $COMPONENT_BG ‡
HEX: #D7E9F4
Verwendung: Form-Füllung, Standard-Text, Element-Labels, C4-Component-Hintergrund

Helles Blau-Grau – häufigste Flächen- und Textfarbe in der Palette.

Dark Blau-Grau

Token: $DS_LIGHTBLUE, $SECONDARY, $DARK_GRADIENT1, $DS_DARK_CONTAINER
HEX: #22303C
Verwendung: Form-Füllung, Container-Hintergrund, Gradient

Dunkle Blau-Grau-Fläche für Formen und Container auf dunklem Canvas.

Container Tint

Token: $CONTAINER_BG ‡
HEX: #EEF8FE
Verwendung: <<container>> Hintergrund

Leicht bläuliche Fläche für C4-Container-Ebene.

Alice Blue

Token: $ALICEBLUE ‡
HEX: #F0F8FF
Verwendung: Use-Case-System-rectangle, Package-Hintergrund

Sehr helles Blau für Systemgrenzen und Packages.

White

Token: $TEXT_WHITE, $DS_BASE_BACKGROUND, $PUML_BGCOLOR, $CONTEXT_BG ‡
HEX: #FFFFFF
Verwendung: Inverse Textfarbe, Canvas, Export-Hintergrund, C4-Context

Reines Weiß – Canvas-Grundfläche und helle Container-Ebene.

Super Light Grey

Token: $SUPERLIGHTGREY ‡
HEX: #F8F8F8
Verwendung: <<external>>, Sequence-Groups, Swimlanes, Reference-Header

Fast weiße Grautönung für externe Elemente und Gruppierungen.

Light Grey

Token: $DS_LIGHTGREY, $DISABLED_GREY
HEX: #C6C6C6
Verwendung: Use-Case-Actor, dezente Rahmen, Swimlane-Rahmen

Helles Neutralgrau für Akteure und zurückhaltende Rahmen.

Medium Light Grey

Token: $DS_LIGHTGREY
HEX: #B6B6B6
Verwendung: Use-Case-Actor, dezente Rahmen, Swimlane-Rahmen

Mittleres Hellgrau – Akteur- und Rahmenvariante auf dunklem Canvas.

Medium Grey

Token: $DS_GREY
HEX: #7A7A7A
Verwendung: Pfeile, Legenden-Rahmen, Extern-Interface, Group-/Box-Rahmen

Modusunabhängiges Mittelgrau für Verbindungen und neutrale Interfaces.

Tertiary Tint

Token: $TERTIARY_TINT
HEX: #6D6D6D
Verwendung: Actor-Label, Bullets, Subheader, Sequence Box-/Delay-/Group-Font

Gedämpftes Grau für untergeordnete und ergänzende Beschriftungen.

Secondary Tint

Token: $TEXT_DARK_SECONDARY, $TERTIARY_TINT, $MODULE_BG ‡
HEX: #AFC1C7
Verwendung: Tertiärer Text, C4-Module-Hintergrund

Blau-graues Sekundärgrau für Text und C4-Module-Ebene.

Disabled Grey

Token: $DS_DARK_DISABLED, $CODE_BG ‡
HEX: #84999F
Verwendung: Deaktivierter Text, C4-Code-Hintergrund

Gedämpftes Blau-Grau für inaktive Zustände und C4-Code-Ebene.

Black

Token: $TEXT_BLACK, $BLACK, $FGCOLOR
HEX: #000000
Verwendung: Standard-Text, Element-Labels, Titel, Legende, Notes, Pfeilbeschriftung

Maximaler Kontrast für Fließtext und Beschriftungen auf hellen Flächen.

Dark Canvas

Token: $DS_DARK_BACKGROUND, $PUML_BGCOLOR, $DARK_GRADIENT2
HEX: #15202B
Verwendung: Export-Hintergrund, Canvas, Sequence-Box/Group-Body

Dunkelblaues Schwarz – Grundfläche für Dark-Mode-Diagramme.

Dark Surface

Token: $SUPERLIGHTGREY ‡
HEX: #2D2D2D
Verwendung: <<external>>, Sequence-Groups, Swimlanes, Reference-Header

Dunkle Oberfläche für externe Elemente und Gruppierungen.

Dark Surface Alt

Token: $ALICEBLUE ‡
HEX: #3A3A3A
Verwendung: Use-Case-System-rectangle, Package-Hintergrund

Alternative dunkle Fläche für Systemgrenzen und Packages.

C4 Context

Token: $CONTEXT_BG ‡
HEX: #2A2A2A
Verwendung: <<context>> Hintergrund

Hintergrund der äußersten C4-Ebene auf dunklem Canvas.

C4 Container

Token: $CONTAINER_BG ‡
HEX: #353535
Verwendung: <<container>> Hintergrund

Hintergrund der C4-Container-Ebene auf dunklem Canvas.

C4 Component

Token: $COMPONENT_BG ‡
HEX: #404040
Verwendung: <<component>> Hintergrund

Hintergrund der C4-Component-Ebene auf dunklem Canvas.

C4 Module

Token: $MODULE_BG ‡
HEX: #4A4A4A
Verwendung: <<module>> Hintergrund

Hintergrund der C4-Module-Ebene auf dunklem Canvas.

C4 Code

Token: $CODE_BG ‡
HEX: #555555
Verwendung: <<code>> Hintergrund

Hintergrund der innersten C4-Code-Ebene auf dunklem Canvas.

Valid Green

Token: $DS_GREEN, $SUCCESS
HEX: #6B9714
Verwendung: Erfolg, positive Status, Bestätigungen

Semantisches Grün für Erfolgs- und Valid-Zustände.

Valid Green Light

Token: $DS_DARK_GREEN, $SUCCESS
HEX: #B9D478
Verwendung: Erfolg, positive Status, Bestätigungen

Helle Valid-Variante mit gutem Kontrast auf dunklem Hintergrund.

Orange

Token: $DS_ORANGE, $WARNING
HEX: #DB6A00
Verwendung: Warnmeldungen, Storage-Semantik, Folder-Rahmen, Akzent

Modusunabhängiges Warn- und Akzentorange der Corporate Identity.

Invalid Red

Token: $DS_RED, $DANGER
HEX: #C63328
Verwendung: Fehler, negative Status, kritische Pfade

Semantisches Rot für Fehler- und Invalid-Zustände.

Invalid Red Light

Token: $DS_DARK_RED, $DANGER
HEX: #E85F63
Verwendung: Fehler, negative Status, kritische Pfade

Helle Invalid-Variante mit gutem Kontrast auf dunklem Hintergrund.

Farbnutzung¶

Deep Ocean Blue / Bright Sky

Token: $DS_CLICKABLE / $DS_DARK_CLICKABLE
Light: #00759E
Dark: #77DDFF
Verwendung: Interaktive Elemente: Rahmen, Links, Buttons, Sequence-Lifeline, Group-Header

Primärfarbe für klickbare und interaktive Elemente – Deep Ocean Blue im Light Mode, Bright Sky im Dark Mode.

Primary / Markenblau

Token: $DS_BLUE, $PRIMARY
Light: #00759E
Dark: #77DDFF
Verwendung: Rahmen Class, State, Activity, Component; Start/End-State; Package-Rahmen

Rahmenfarbe für zentrale Formen – identischer HEX wie Clickable, eigene Token-Zuordnung für Form-Rahmen.

Blau-Tint

Token: $DS_LIGHTBLUE, $SECONDARY
Light: #D7E9F4
Dark: #22303C
Verwendung: Hintergrund Class, State, Activity, Use Case, Component, Participant, Collections

Standard-Füllfarbe für Diagramm-Formen – helles Blau-Tint im Light Mode, dunkles Blau-Grau im Dark Mode.

Interface

Token: $DS_CYAN
HEX: #00A5E1
Verwendung: Interface-Hintergrund und -Rahmen (BorderThickness 2)

Interfaces nutzen Primary Cyan als Füll- und Rahmenfarbe – modusunabhängig, mit verstärktem Rahmen.

Extern / Fremdsystem

Token: $SUPERLIGHTGREY ‡
Light: #F8F8F8
Dark: #2D2D2D
Verwendung: <<external>>, <<External>>: Class, Agent, Database, Participant, Use Case

Füllfarbe für externe Systeme und Fremdakteure – PlantUML-spezifische Erweiterung außerhalb der Web-CI.

Actor

Token: $DS_LIGHTGREY
Light: #C6C6C6
Dark: #B6B6B6
Verwendung: Use-Case-Actor-Hintergrund und -Rahmen

Neutrale Grautöne für Use-Case-Akteure – Hintergrund und Rahmen in einem Token-Paar.

Extern-Interface

Token: $DS_GREY
HEX: #7A7A7A
Verwendung: <<external>> Interface-Hintergrund und -Rahmen

Mittleres Grau für externe Interfaces – modusunabhängig, unterscheidet sich von internen Cyan-Interfaces.

Pfeile & Linien

Token: $DS_GREY
HEX: #7A7A7A
Verwendung: ArrowColor, Sequence-Pfeile, Activity-Pfeile; Legenden-Rahmen; Group-/Box-Rahmen

Standardfarbe für Verbindungen und Pfeile – dezent und gut lesbar auf hellem und dunklem Hintergrund.

Rahmen dezent

Token: $DS_LIGHTGREY
Light: #C6C6C6
Dark: #B6B6B6
Verwendung: Swimlane-Rahmen; Sequence-Reference-Rahmen

Dezenter Rahmen für untergeordnete Container – weniger dominant als Primary-Rahmen.

Default / Darkmode Text

Token: $TEXT_BLACK / $TEXT_DARK, $FGCOLOR
Light: #000000
Dark: #D7E9F4
Verwendung: Standard-Fließtext; Titel, Legende, Notes, Pfeilbeschriftung, Stereotyp-Labels

Primäre Textfarbe für Diagramm-Metadaten und Fließtext – Schwarz im Light Mode, helles Blau-Grau im Dark Mode.

Element-Labels

Token: $BLACK
Light: #000000
Dark: #D7E9F4
Verwendung: Class-Header, Participant, Activity, State, Component, Package, Rectangle

Beschriftung direkt auf Formen – hoher Kontrast zur Blau-Tint-Füllung.

Actor-Label

Token: $TERTIARY_TINT / $TEXT_DARK_SECONDARY
Light: #6D6D6D
Dark: #AFC1C7
Verwendung: Use-Case-Actor-Beschriftung

Sekundäre Textfarbe speziell für Actor-Labels – zurückhaltender als Element-Labels.

Tertiary Tint / Secondary

Token: $TERTIARY_TINT / $TEXT_DARK_SECONDARY
Light: #6D6D6D
Dark: #AFC1C7
Verwendung: Bullets, Subheader-Nummerierung; Sequence Box-/Delay-/Group-Font

Tertiäre Textfarbe für untergeordnete und ergänzende Beschriftungen.

White / Disabled

Token: $TEXT_WHITE / $DS_DARK_DISABLED
Light: #FFFFFF
Dark: #84999F
Verwendung: Text auf dunklem oder farbigem Hintergrund; Dark-Mode deaktivierter Text

Inverse Textfarbe für Kontrast auf farbigen Flächen – im Dark Mode auch für deaktivierte Zustände.

Systemgrenze

Token: $ALICEBLUE ‡
Light: #F0F8FF
Dark: #3A3A3A
Verwendung: Use-Case-System-rectangle, Package-Hintergrund

Hintergrund für Systemgrenzen und Packages – dezente Abgrenzung vom Diagramm-Hintergrund.

Gruppe / Swimlane

Token: $SUPERLIGHTGREY ‡
Light: #F8F8F8
Dark: #2D2D2D
Verwendung: Sequence-Groups, Divider, Activity-Swimlane-Titel, Reference-Header

Container-Hintergrund für Gruppierungen und Swimlanes – identischer HEX wie Extern/Fremdsystem, andere Rolle.

Frame / Folder

Token: $DS_CYAN, $DS_ORANGE
Frame: #00A5E1
Folder: #DB6A00
Verwendung: Rahmen- und Textfarbe für frame bzw. folder

Semantische Hervorhebung: Cyan für Frames, Orange für Folders – in beiden Modi identisch.

Export / Canvas

Token: $PUML_BGCOLOR, $DS_BASE_BACKGROUND / $DS_DARK_BACKGROUND
Light: #FFFFFF
Dark: #15202B
Verwendung: Gerenderter Diagramm-Hintergrund; Sequence-Box/Group-Body; Surface Base

Canvas- und Export-Hintergrund – bestimmt die sichtbare Fläche des gerenderten Diagramms.

Titel

Token: $FGCOLOR
Light: #000000
Dark: #D7E9F4
Verwendung: skinparam title · FontColor

Diagrammtitel – nutzt die Standard-Vordergrundfarbe des aktiven Modus.

Legende

Token: $FGCOLOR, $DS_GREY
Light: #000000 (Text) · #7A7A7A (Rahmen)
Dark: #D7E9F4 (Text) · #7A7A7A (Rahmen)
Verwendung: Legenden-Text; Rahmen $DS_GREY, Hintergrund transparent

Legende kombiniert modusabhängigen Text mit modusunabhängigem Grau-Rahmen.

Notes

Token: $FGCOLOR
Light: #000000
Dark: #D7E9F4
Verwendung: Note-Text (Hintergrund transparent)

Textfarbe für Anmerkungen – Hintergrund bleibt transparent.

Valid / Valid Dark

Token: $DS_GREEN, $SUCCESS / $DS_DARK_GREEN
Light: #6B9714
Dark: #B9D478
Verwendung: Erfolg, positive Status, Bestätigungen

Semantisches Grün für Erfolgs- und Valid-Zustände – kräftiger im Light, heller im Dark Mode.

Orange

Token: $DS_ORANGE, $WARNING
HEX: #DB6A00
Verwendung: Warnmeldungen, Storage-Semantik, Akzent

Warn- und Akzentfarbe – modusunabhängig, auch für Folder-Semantik genutzt.

Invalid / Invalid Dark

Token: $DS_RED, $DANGER / $DS_DARK_RED
Light: #C63328
Dark: #E85F63
Verwendung: Fehler, negative Status, kritische Pfade

Semantisches Rot für Fehler- und Invalid-Zustände – kräftiger im Light, heller im Dark Mode.

C4 – Context

Token: $CONTEXT_BG ‡
Light: #FFFFFF
Dark: #2A2A2A
Verwendung: <<context>> Hintergrund

C4-Context-Ebene – PlantUML-spezifische Erweiterung für System-Context-Diagramme.

C4 – Container

Token: $CONTAINER_BG ‡
Light: #EEF8FE
Dark: #353535
Verwendung: <<container>> Hintergrund

C4-Container-Ebene – leicht bläulicher Hintergrund im Light Mode.

C4 – Component

Token: $COMPONENT_BG ‡
Light: #D7E9F4
Dark: #404040
Verwendung: <<component>> Hintergrund (gleicher HEX wie Form-Füllung Light)

C4-Component-Ebene – im Light Mode identisch mit Blau-Tint-Formfüllung.

C4 – Module

Token: $MODULE_BG ‡
Light: #AFC1C7
Dark: #4A4A4A
Verwendung: <<module>> Hintergrund (gleicher HEX wie Text Tertiary Dark)

C4-Module-Ebene – im Light Mode identisch mit Tertiary-Tint-Dark-Textfarbe.

C4 – Code

Token: $CODE_BG ‡
Light: #84999F
Dark: #555555
Verwendung: <<code>> Hintergrund (gleicher HEX wie Text Disabled Dark)

C4-Code-Ebene – im Light Mode identisch mit Disabled-Text-Dark-Farbe.

Typografie¶

Einheitliche Schrift sorgt für lesbare Diagramme in Präsentationen, MkDocs und Druck.

Rolle	Verwendung	Wert
Standardschrift	Alle Diagrammtexte	`Helvetica` (`$FONTNAME`)
Body	Standard-Labels, Attribute	12 pt
Titel	Diagrammtitel	28 pt, normal (nicht bold)
Notes	Anmerkungen, Erläuterungen	11 pt, linksbündig
Class-Header	Klassennamen, Typ-Header	15 pt, bold
Pfeilbeschriftung	Kanten- und Pfeil-Labels	11 pt (`ArrowFontSize`) — Globale Defaults
Swimlane-Titel	Activity-Swimlanes	16 pt
Sequence-Divider	Trennlinien-Beschriftung	14 pt

Grundsätze:

Bold nur in Headern (Titel, Class-Header) - Fließtext in Notes und Attributen bleibt normal.
Deutsche Umlaute können direkt in Labels verwendet werden (UTF-8).
Diagrammtyp-spezifische Abweichungen: jeweilige Diagrammtyp-Seite.

Abstände & Form¶

Globale Abstands- und Formwerte gelten diagrammübergreifend.

Token / Parameter	Wert	Gilt für
`roundcorner`	16	Eckenradius aller Elemente (Ausnahme: Gantt-Bundle → 6)
`BoxPadding`	32	Innenabstand von Sequence-Boxen
`$PUML_ELEMENT_PADDING`	4	Element-Padding (CSS-Pfad ab PlantUML 1.2026.3)
`$PUML_SEQUENCE_GAP_H`	32	Horizontaler Abstand zwischen Sequence-Participants
`$PUML_SEQ_MARGIN_V`	4	Vertikaler Participant-Rand
`$PUML_SEQ_INNER_V` / `$H`	16	Inneres Participant-Padding
`ArrowThickness`	1.5	Standard-Pfeilstärke
`shadowing`	false	Keine Schatten (CI: „Weniger ist mehr“)
`dpi`	100	Export-Auflösung

Modus-Schalter¶

Modus-Schalter steuern Palette, Hintergrund und Darstellungsvariante. Sie werden vor dem Theme-Include gesetzt - typischerweise über die fertigen Entry-Points:

!include .../doubleslash/light.puml    ' Light Mode (Default)
!include .../doubleslash/dark.puml     ' Dark Mode

Schalter	Standard (Light)	Standard (Dark)	Wirkung
`$PUML_MODE`	`"light"`	`"dark"`	Schaltet die gesamte Farbpalette
`$PUML_BGCOLOR`	`#FFFFFF`	`#15202B`	Export-Hintergrund des gerenderten Bildes
`$PUML_OUTLINE`	`"false"`	`"false"`	`"true"` → Outline-Modus: Füllfarben werden transparent, Text nutzt helle Varianten (Druck/Präsentation)
`$PUML_GRADIENT`	`20`	`15`	Stärke für abgeleitete Farbtöne (`$PRIMARY_DARK`, `$SUCCESS_LIGHT`, …)

Light / Dark wählen¶

Ziel	Include
Helle Präsentationen, Druck, helle Docs	`doubleslash/light.puml`
Dunkle Präsentationen, Dark-Mode-Docs	`doubleslash/dark.puml`
Neutral (Light Default)	`doubleslash/doubleslash-gen2.puml`

$PUML_MODE nach dem Include zu ändern wirkt nicht - abgeleitete Tokens sind bereits gesetzt.

Outline-Modus¶

Bei $PUML_OUTLINE = "true" (vor dem Include setzen) werden semantische Füllfarben ($INFO_BG, $DANGER_BG, …) auf den Export-Hintergrund gesetzt; Textfarben wechseln zu den *_LIGHT-Varianten. Geeignet für schwarz-weiß-Druck und reduzierte Folien.

Weiterführend¶

Thema	Seite
Do/Don't für Autoren (keine Hex-Werte, Theme-Include)	Autoren-Regeln
Globale skinparam, Padding-Gate, Titel	Globale Defaults
C4-Stereotypen im Detail	System & C4
Include-Patterns Light/Dark/System	Style Guide - Templates
Bekannte Abweichungen	Anti-Patterns