DuckDB Design Manual
This manual documents DuckDB’s visual and communication standards to maintain consistency across the website, technical documentation, and community materials.
Logo Usage
Use for web headers, presentations, and horizontal layouts.
Use in square or portrait spaces – mobile screens, posters, narrow sidebars.
Use for favicons, app tiles, and profile images below 40px height.
Maintain clearspace equal to the height of “D” on all sides. Minimum width: 120px digital, 25mm print.
Do not stretch, rotate, recolor outside brand palette, apply effects, or place on low-contrast backgrounds.
Light & Dark Mode
Use lightmode logos (black circle, yellow logo element, black type) on white and light backgrounds. Use darkmode logos (yellow circle, black logo element, white type) on black, charcoal, and dark backgrounds to maintain contrast.
Colors
DuckDB’s color system creates visual context: yellow for core brand identity, with secondary colors that differentiate product areas.
Primary Colors
HEX: #FFF100
RGB: 255, 241, 0
CMYK: 6, 0, 87, 0
Pantone: Process Yellow C
Use for logos, primary CTAs, and key brand applications.
Secondary Colors
HEX: #7D66FF
RGB: 125, 102, 255
HEX: #FF6900
RGB: 255, 105, 0
HEX: #2EAFFF
RGB: 46, 175, 255
HEX: #00C770
RGB: 0, 199, 112
Secondary colors establish visual hierarchy, categorize content, and guide navigation while maintaining brand cohesion. Use for feature differentiation, status indicators, data visualization, and interface elements.
Accessibility
All text must meet WCAG AA standards: 4.5:1 for normal text, 3:1 for large text (≥18pt or ≥14pt bold).
Approved Combinations
White text on all secondary color backgrounds meets AA standards. Do not use colored text on white backgrounds for body copy.
Visual Style
DuckDB’s visual identity balances technical precision with clear design. Drawing from railroad diagram aesthetics used in SQL documentation, the system uses structured graphics – curved connectors, rounded containers, junction points – to reflect systematic data operations.
Graphic language
DuckDB’s visual system draws from railroad diagrams – structured syntax diagrams used in technical documentation. Use curved connectors, branching paths, and junction points as graphic elements to reinforce systematic database operations.
Iconography
Use simple, geometric icons with railroad diagram influences – rounded rectangles, directional arrows, junction points. Maintain consistent stroke weights (2–3px) and rounded terminals. Icons represent database concepts, file types, and workflow states.