Design Beautiful Dashboards in AI/BI

Databricks announced new dashboard theming capabilities in AI/BI, allowing users to apply consistent brand identities across dashboards via workspace themes. The feature enables custom fonts, colors, and layouts to improve trust and professionalism, with examples from customers like Rivian and Wineshipping.

by Maggie Li /blog/author/maggie-li and Mohit Hingorani /blog/author/mohit-hingorani Introduction Every company has a brand identity that reflects what it stands for, shaped by its logo, colors, fonts, and tone. Our most recognizable customers, like Rivian https://www.databricks.com/blog/how-rivian-drives-trusted-ai-powered-decisions-speed-thought-databricks and Wineshipping https://www.databricks.com/customers/wineshipping/ai-bi-dashboards , apply that identity consistently across every surface: marketing, slide decks, websites, and products. That consistency is what earns trust with their customers and partners. Dashboards are a crucial medium through which business teams share data with decision makers and external partners. Dashboard authors craft this experience to help viewers understand their data and surface key insights. For dashboards to look trustworthy and professional, authors need to make them feel cohesive and on-brand. Dashboard themes https://docs.databricks.com/aws/en/dashboards/manage/settings choose-a-preset-theme let you update the look and feel of individual dashboards to match your vision. Workspace themes https://docs.databricks.com/aws/en/dashboards/manage/settings workspace-theme take this further by applying a consistent theme across all dashboards in the workspace, which inherit it automatically. This can of course be extended and/or modified locally as needed. In this post, we will explore some design best practices and create a custom theme to reflect the brand. We will use some fictional Wanderbrick’s brand guidelines as an example to create a dashboard. Want to follow along? Wanderbricks is a fictional travel and hospitality company with a sample dataset available in every Databricks workspace. You can recreate the dashboard from scratch using the Genie Code prompts in each section, or just read along and apply the ideas to your own. Start by opening a new dashboard and dropping in this prompt. It creates a local metric view on top of the samples.wanderbricks schema with the dimensions and measures we'll use throughout. Setting up your grid The purpose of your dashboard should determine how many columns are in your grid layout. AI/BI offers a flexible 12-column grid that you can subdivide into 3, 4, or 6 columns depending on your needs. Dense, technical dashboards with many widgets benefit from a 6-column layout, fitting more widgets into view. On the other hand, an executive dashboard could use a 3-column layout to reduce cognitive load. Creating hierarchy When viewing a dashboard, the human eye naturally scans to find the most important information before reading. Depending on the design of your dashboard, the eye will follow one of two paths across the dashboard: an F-pattern or Z-pattern. For dashboards that are heavy on imagery and visualizations, the eye naturally follows a Z-pattern across visual layouts, starting top-left with titles and filters, cutting diagonally down, and landing bottom-right on detailed visualizations and tables. For dashboards that are more text or table-heavy, an F-pattern can emerge. The eye scans the first row fully, then moves down the left. In either pattern, the principle is the same: put what matters most where the eye lands first. Resize to emphasize If everything on your dashboard is the same size, nothing stands out. Viewers need visual cues to know where to focus first. Establish a clear hierarchy by making your most critical metrics and primary visuals larger, and letting secondary elements recede into the background. Try applying this to the Wanderbricks dashboard. The first prompt builds an executive overview page following the hierarchy we just covered, and the second adds a denser technical page to show how the same principles adapt to a different audience. Choosing a font for a dashboard is a functional decision as much as an aesthetic one. Your brand identity and audience should both factor into your font choice. A more technical audience might appreciate something expressive like Space Grotesk, while an executive dashboard benefits from something more familiar and conservative, like Arial. The goal isn't just style but setting the tone. Dashboards tend to be information-dense, so readability comes first. We recommend sans-serif fonts since they reduce visual strain. AI/BI natively supports a few web safe sans-serif options out of the box, including Arial, Tahoma, and Verdana. If you want to use your own font, you can now add a local font https://docs.databricks.com/gcp/en/dashboards/manage/settings to your dashboard. This is especially useful when dashboards are being embedded within your internal tools for consistency. For this dashboard we will use a local font and set it to Space Grotesk. To ensure legibility, pick font colors that maintain a high contrast against the widget background. Use an accessibility tool like Adobe color contrast checker https://color.adobe.com/create/color-contrast-analyzer to verify. In light mode, avoid using Pure black 000000 as it can feel harsh against a bright background FFFFFF . In light mode, a slightly softened tone like 08141A against EBEBEB often creates a more comfortable reading experience. In dark mode, you can try using EBEBEB against 08141A to avoid excessive contrast. AI/BI supports a set of web-safe and open source fonts that you can apply with Genie Code. For brand fonts, use the local font option under Settings Font Use local font. Try this prompt to get started with an open source option and set your font colors. The 60-30-10 rule https://uxplanet.org/the-60-30-10-rule-a-foolproof-way-to-choose-colors-for-your-ui-design-d15625e56d25 is a foundational principle in color theory for creating balanced, visually harmonious designs. Designers use this rule across many contexts–from choosing the colors for a room in your house to establishing branding for a new company. This design rule helps you define your color palette with three categories of color, and gives your palette the appropriate balance with how much each should be used in a holistic design: Below we will discuss how to apply this principle to choose beautiful colors for your dashboard. Neutral Background colors By keeping background colors close to neutral, we let data visualization colors communicate accurately without introducing unintended bias. For light mode, keep widget backgrounds close to White FCFCFD with a slightly darker color for the canvas background EBEBEB . This creates separation without distraction. When contrast is subtle, the dashboard reads as a cohesive whole rather than a grid of isolated elements. Setting border colors to match the widget background reduces visual clutter, especially in dense layouts. Per widget customization To emphasize certain widgets and make them stand apart, you may override theme properties for a widget. In widget style settings, update the background & border color to 1F354B. In addition, update the font color to EBEBEB to ensure high contrast. Bold selection color Selection color is used to highlight interactive elements like filters, tabs and buttons. Select a color that is easily distinguishable from text and background colors. You can easily derive them using your brand colors. Using our brand’s 15AFDD as the base color in Adobe Color https://color.adobe.com/create/color-wheel , we can try deriving a selection color by setting the color harmony to square resulting in colors like DE7914 & 3A7689. Picking a blue color like 2272B4 is usually a safe choice - it's analogous to the hyperlink color associated with interactive links on the web. Dark mode Every AI/BI theme supports both light and dark mode. Setup both modes by switching the light/dark mode toggle. To set up light mode, you can use brand color for 1E343F for canvas background and 08141A for widget background. In light mode, the brighter color for the widget is usually recommended as it provides high contrast. For font color we will use E8EFF1 to provide high legibility . Try applying the 60-30-10 principle to the Wanderbricks dashboard. This prompt sets neutral canvas and widget backgrounds, hides borders by matching them to the widget color, and adds a complementary blue for interactive elements. With the interface colors established for both light and dark mode, the final step is selecting the visualization palette. A well-balanced data visualization palette ties the whole dashboard together and brings it to life. The palette can include brand colors but will need adjustments as they may be unusable for visualizations. An estimated 4.5% of the global population https://www.colourblindawareness.org/colour-blindness/ experiences some form of color blindness, so it is important to design a palette that is color blind friendly. If you want to try out some industry standard palettes we recommend checking out colorbrewer https://colorbrewer2.org/ type=qualitative&scheme=Set2&n=5 . A few key things to consider when designing your own palette: For our custom Databricks visualization palette, we start with our brand color 15AFDD in Adobe Color https://color.adobe.com/create/color-wheel . Applying the “square” color harmony to derive 4 additional colors 83DE14, DE7914, BE14DE, 3A7689 that are evenly spaced on the color wheel. From there in Adobe color, you may make a few more tweaks: The final color palette we have are 15AFDD, 2375A8, 52A870, C85070, C89930 . Once your palette passes the accessibility checks, apply it to see your charts come to life. This is the palette we landed on after running it through Adobe Color's color blindness simulator and testing in both light and dark mode. Design decisions that seem small in isolation add up quickly. A consistent font, an intentional color palette and a layout built to let viewers easily read. Together they transform a dashboard into something people trust. Workspace themes help scale that across your organization, so good design practice becomes the starting point for every dashboard. The dashboard we walked through is available here https://github.com/databricks-solutions/aibi-dashboard-wanderbricks if you want to explore it yourself. If you're not using AI/BI dashboards yet, we're natively built into Databricks. Have ideas or feedback? Share them with us. https://claude.ai/chat/link Subscribe to our blog and get the latest posts delivered to your inbox.