SW Theme¶

The SW theme provides ADI brand colors and styling classes adapted for software architecture and AI system diagrams.

Color Palette¶

Light Theme¶

	ADI Blue — `#0067B9` — Primary brand color
	Dark Blue — `#004A87` — Data flow emphasis
	Pale Blue — `#D6EAF8` — Step highlights
	Cream — `#FDF6EC` — Warm container fill
	Background Blue — `#E8F4FD` — Container fill
	Red — `#C8102E` — Error flows
	Green — `#007A33` — Success flows
	Amber — `#F5A623` — Async / warning

Dark Theme¶

The dark theme inverts colors for dark backgrounds:

	ADI Blue — `#4D9AD5` — Primary accent
	Background — `#0D1B2A` — Container fill
	Cream — `#2A2520` — Warm container fill
	Text — `#E0E0E0` — Primary text
	Red — `#FF6B6B` — Error flows
	Green — `#66BB6A` — Success flows
	Amber — `#FFB74D` — Async / warning

Flow Classes¶

Apply these classes on connections (edges) between components to indicate flow type. Each uses a distinct color and stroke style.

Class	Color	Stroke	Use For
`sw-flow`	ADI Blue `#0067B9`	Solid, 2px	Default data/control flow
`sw-flow-data`	Dark Blue `#004A87`	Solid, 3px	Emphasized data flow
`sw-flow-control`	Grey `#58595B`	Dashed, 2px	Control flow paths
`sw-flow-async`	Amber `#F5A623`	Dashed, 2px	Async / event-driven flow
`sw-flow-error`	Red `#C8102E`	Solid, 2px	Error paths
`sw-flow-success`	Green `#007A33`	Solid, 2px	Success paths
`sw-flow-feedback`	Light Blue `#4D9AD5`	Dashed, 2px	Feedback / loop-back
`sw-flow-light`	Light Grey `#D1D3D4`	Solid, 2px	Subtle connectors

Example:

agent: Auditor { class: sw-agent }
model: LLM { class: sw-model }

agent -> model: Request { class: sw-flow }
model -> agent: Response { class: sw-flow-feedback }
agent -> log: Error { class: sw-flow-error }

Container Classes¶

sw-container¶

Groups components with ADI blue border and light blue fill. All containers use a modern border-radius: 12 layout and feature prominent drop shadows for visual depth.

loop: Auditing Loop {
  class: sw-container

  agent: Auditor { class: sw-agent }
  model: Target { class: sw-model }
  agent -> model { class: sw-flow }
}

Variant	Description
`sw-container`	Blue border, light blue fill
`sw-container-cream`	Grey border, warm cream fill
`sw-container-green`	Green border, light green fill
`sw-container-amber`	Amber border, light amber fill
`sw-container-red`	Red border, light red fill
`sw-container-white`	Grey border, white fill

Step Highlight Classes¶

Apply to nodes inside workflow diagrams to color-code process steps, similar to the Petri research page style.

Class	Fill	Stroke
`sw-step-blue`	`#D6EAF8`	`#0067B9`
`sw-step-green`	`#E8F5E9`	`#007A33`
`sw-step-amber`	`#FFF3E0`	`#F5A623`
`sw-step-white`	`#FFFFFF`	`#D1D3D4`

Example:

s1: Formulate hypothesis { class: sw-step-white }
s2: Design scenarios { class: sw-step-blue }
s3: Build environments { class: sw-step-amber }
s4: Run models { class: sw-step-green }

s1 -> s2 -> s3 -> s4 { class: sw-flow-light }

Typography Classes¶

sw-title¶

Diagram title styled with ADI brand colors. Renders as text-only shape.

title: Agent Pipeline { class: sw-title }

sw-subtitle¶

Subsection heading in dark text.

heading: Scoring Phase { class: sw-subtitle }

sw-note¶

Annotation block for notes. Renders as a page shape with muted colors.

note: |md
  Judge scores transcripts
  across multiple dimensions
| { class: sw-note }

ADI Signal Classes¶

The SW library also includes the ADI theme’s signal and layout classes, so you can use hardware-style color coding alongside software components. These classes adapt automatically to light and dark themes.

Class	Color (light)	Stroke	Use For
`adi-signal`	ADI Blue `#0067B9`	Solid, 2px	Default signal connections
`adi-signal-analog`	Soft Black `#231F20`	Solid, 2px	Analog signal paths
`adi-signal-digital`	ADI Blue `#0067B9`	Dashed, 2px	Digital buses (SPI, I2S, JESD204B)
`adi-signal-clock`	Green `#007A33`	Dashed, 1px	Clock distribution
`adi-signal-power`	Red `#C8102E`	Solid, 2px	Power supply rails

Additional ADI layout classes are also available:

adi-container — Blue border container (8px radius, drop shadow)
adi-title — Bold title in ADI Blue
adi-note — Muted annotation block (page shape)

Example mixing SW components with ADI signal styles:

server: API Server { class: sw-server }
fpga: FPGA { class: sw-function }
db: Telemetry DB { class: sw-database }

server -> fpga: SPI Config { class: adi-signal-digital }
fpga -> db: Data Stream { class: sw-flow-data }
fpga -> server: Interrupt { class: adi-signal-clock }

Using Themes¶

import d2

# Light theme (default)
svg_light = d2.compile(code, library="sw")

# Dark theme
svg_dark = d2.compile(code, library="sw", theme="dark")