Design Beautiful Dashboards in AI/BI

Summary

This guide presents dashboard design as a way to apply brand identity consistently while helping viewers interpret business data and trust the result. It recommends choosing a 3-, 4-, or 6-column subdivision of AI/BI’s 12-column grid according to audience needs, then using F- or Z-pattern hierarchy and unequal widget sizes to prioritize information. The visual system combines readable sans-serif or local fonts, high-contrast text, neutral backgrounds, a 60-30-10 color allocation, and distinct interactive and visualization palettes. For the Wanderbricks example, the final five-color palette is #15AFDD, #2375A8, #52A870, #C85070, and #C89930, tested in light and dark modes and with color-blindness simulations; workspace themes extend the resulting styling across dashboards.

Context

Dashboard authors need cohesive, on-brand experiences that make data understandable and present a trustworthy, professional appearance to decision makers and external partners.

Approach / What changed

The guide builds a custom Wanderbricks dashboard theme through layout hierarchy, font selection, UI color definition, and visualization palette design. It uses AI/BI’s grid, local font support, light and dark mode settings, workspace themes, and accessibility checks to apply the resulting design consistently.

Takeaways

• Executive dashboards can use three columns to reduce cognitive load, while dense technical dashboards can use six columns to fit more widgets into view.
• AI/BI supports local fonts; the guide uses Space Grotesk and recommends checking text/background contrast with an accessibility tool.
• The visualization palette uses five colors and is checked in light and dark modes with Adobe Color simulations for Deuteranopia, Protanopia, and Tritanopia.

Related reading