Design Guidelines

These guidelines describe the Django Debug Toolbar brand: its logo, colors and typography. They exist to keep the project’s visual identity consistent across the toolbar UI, the documentation, the website and any community materials.

The brand assets referenced below live in docs/_static/brand/. The full set (every color variant of every layout) is available there as both .svg and .png, the SVGs are used throughout this page, while the PNGs are provided for contexts that cannot use SVG.

Logo

The logo combines a logo element (the stylized “D” fan) with the Django Debug Toolbar wordmark. In the colored variants, only the word “Debug” is set in Signal Green; “Django” and “Toolbar” stay in the neutral color.

Do not alter the logo (such as changing its color, shape, orientation, or layout) or add effects without approval from the project maintainers. Everything you need has been made available, so always use the supplied files.

Primary wordmark

The inline wordmark is the primary lockup. Use it wherever horizontal space allows.

Layout variants

Use the stacked or columns lockups when the available space is more square than wide, for example in a sidebar or a social avatar.

Logo element

The logo element can be used on its own as a compact mark, a favicon or an ornament.

App icons

Square icons are provided on each of the brand’s background colors for use as app icons and favicons.

Choosing a variant

Each lockup ships in four color variants. Pick the one that keeps the logo legible against its background:

Black – neutral logo on light backgrounds.
White – neutral logo on dark backgrounds.
Colored (dark) – green “Debug” with black text, for light backgrounds.
Colored (light) – green “Debug” with white text, for dark backgrounds.

Colors

The primary colors are Signal Green, Trace Cyan, System Teal and Runtime Black. Each has five shades, from the fully saturated 1 down to the lightest 5. All other colors are supporting accents or lower-opacity tints of these.

In the toolbar UI these map directly to the theme: Signal Green is the structural and data color (table borders, timeline bars), Trace Cyan is the panel surface, System Teal is the dark-mode surface, and Runtime Black is the sidebar and text.

Signal Green
	#30C16E	#6ED499	#ACE6C5
Trace Cyan
	#38BBE8	#73D6F8	#E0F8FF
System Teal
	#014A5F	#4D8EA0	#CCDFE4
Runtime Black
	#131313	#999999	#E6E6E6

The complete palette, including every shade:

Family	Shade 1	Shade 2	Shade 3	Shade 4	Shade 5
Signal Green	`#30C16E`	`#6ED499`	`#ACE6C5`	`#D6F3E2`	`#EAF9F0`
Trace Cyan	`#38BBE8`	`#73D6F8`	`#B3ECFE`	`#C9F2FF`	`#E0F8FF`
System Teal	`#014A5F`	`#4D8EA0`	`#9ABEC9`	`#CCDFE4`	`#E6EFF1`
Runtime Black	`#131313`	`#4D4D4D`	`#999999`	`#CCCCCC`	`#E6E6E6`

Typography

Two typefaces carry the brand, both free and usable for web and print:

Alef (Bold) – used for headlines and panel titles.
Geist and Geist Mono – used for body text, with Geist Mono reserved for code, calls to action and other monospace contexts.

In the toolbar UI, panel titles are set in Alef Bold, general text in Geist, and code samples in a monospace stack. Both fonts are self-hosted so the toolbar keeps working offline and under a strict Content Security Policy.

Credits

The Django Debug Toolbar brand and logo were designed by Robin of RBNX Studio. Thank you for giving the project its visual identity.