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.

Takeaways

1. 1

   Executive dashboards can use three columns to reduce cognitive load, while dense technical dashboards can use six columns to fit more widgets into view.

2. 2

   AI/BI supports local fonts; the guide uses Space Grotesk and recommends checking text/background contrast with an accessibility tool.

3. 3

   The visualization palette uses five colors and is checked in light and dark modes with Adobe Color simulations for Deuteranopia, Protanopia, and Tritanopia.