This chapter provides practical guidance for personalizing the visual styling of Board applications to reflect an organization's visual identity. It introduces recommendations for incorporating logos, colors, and typography while maintaining a clear and consistent application interface.
The goal is to help designers establish a recognizable visual identity across Board applications without compromising usability, accessibility, or the consistency of the user experience.
Branding should therefore reinforce recognition without weakening usability and without fragmenting the visual language across the applications of a solution. Where brand guidelines and usability compete, usability takes precedence; where applications differ, the variation should be deliberated rather than incidental.
1. Applying Visual Identity
Branding can help an application feel familiar and connected to the organization, products, and processes it supports. Applying recognizable visual elements such as color, typography, and identity creates continuity between the Board application and the broader user environment.
However, visual styling should support the experience rather than define it. A Board application does not need to reproduce every aspect of an organization's visual identity to feel connected to its brand. A restrained selection of recognizable elements is usually enough to establish familiarity while maintaining a clear application interface.
Visual identity should not compromise readability, accessibility, interaction patterns, or the consistency users rely on to understand how the application works. The objective is to incorporate brand identity where it adds recognition and continuity while maintaining a clear, consistent, and usable interface.
Logo, color, and typography are the primary elements designers can use to introduce this identity. They should be applied consistently and with a clear purpose.
Logos provide a direct connection between the application and the organization.
Board allows the platform-level top bar elements such as the logo and background to be customized. Where identity is already established through the Platform Header, repeating the logo prominently within individual screens is generally unnecessary.
When the logo is placed in the platform top bar, it should be supplied with a transparent background so that it sits directly on the bar rather than inside a visible box of its own, and it should keep clear space around the mark so that it does not touch the edges of the bar or the elements beside it. A logo that fills the full height of the bar, or that carries its own background color, reduces legibility and competes with the navigation elements it sits next to.
Identity should also carry through to output that leaves the application. Reports are exported to PDF and spreadsheets, shared as images, and printed, and those files often reach people who never open the application itself. Where a logo appears in exported output it belongs in the header or footer area rather than over the data, follows the same clear-space rule, and should remain legible when the output is printed in grayscale.
Additional branded imagery may be appropriate in areas where identity has greater relevance, such as the Sign-in or Home screens. Within analytical and operational screens, however, it is best to avoid adding logos or images, to help the user focus on the content and tasks they need to perform.
Introduction of visual identity in sign-in page and platform bar
Brand colors can establish application identity through backgrounds, headers, interactive objects, tables and charts, and other recurring interface elements.
A limited palette derived from the organization's visual identity is generally preferable to applying the complete brand palette throughout the interface. Consistent use of a small number of colors makes the application easier to recognize and helps maintain a coherent visual language.
However, color in an interface can also communicate meaning. Colors used for statuses, alerts, warnings, errors, or other semantic purposes should remain consistent with their intended meaning.
A brand color should therefore not be applied simply because it belongs to the corporate palette if its use creates ambiguity with an existing semantic color. For example, using a brand red extensively for decorative or interactive elements may make errors, negative statuses, or warnings more difficult to distinguish, as covered in Color Use and Meaning.
Use of alternative brand colors to preserve semantic meaning
Brand colors communicate identity. Semantic colors communicate meaning. These two purposes should remain distinguishable.
Where brand colors may be applied, and where semantic colors must remain standard
Custom typography can strengthen brand recognition, but it should be introduced selectively. Board supports corporate fonts in one weight only (regular or bold). This custom corporate font is shared across all the capsules of the same board instance.
Since the available font configuration does not provide the complete range of weights required to establish a clear typographic hierarchy, custom fonts are better suited to limited and prominent uses such as headings and, where appropriate, button labels.
Labels, selectors, tables, charts, and other content should prioritize readability and a consistent typographic hierarchy. Standard application fonts may therefore remain preferable for these elements even when a corporate font is available.
The objective is not to reproduce the organization's typography system exactly, but to introduce enough of its visual character to create recognition without compromising the functional role of typography within the interface.
Selective application of custom fonts to headings to reinforce visual identity
2. Maintaining Usability and Accessibility
Branding does not override the usability and accessibility principles we have already established in Accessibility & Readability.
Brand colors, typography, imagery, and other visual elements should only be applied when they maintain sufficient readability, contrast, clear interaction states, and semantic meaning.
When brand guidelines conflict with an application's usability or accessibility, usability and accessibility should take precedence.
Selection of brand colors that preserve contrast and semantic meaning
3. Consistency Across Applications
Applications that belong to the same solution should generally share a common visual language. Consistent use of typography, navigation patterns, interaction colors, and recurring interface elements helps users understand that they are moving within the same environment.
Visual differences can be introduced when they communicate a meaningful distinction. For example, different application areas may support planning and reporting activities, administration tasks, or experiences intended for different user roles.
In these cases, variation should be deliberate and limited. Changing a prominent element such as the Top Bar or a secondary accent color can help distinguish application areas without creating an entirely different visual language.
Core interaction patterns and colors that communicate the same meaning should remain consistent. An action, status, or interaction should not change appearance simply because the user moves to another application or screen.
Variation should therefore help users distinguish contexts without requiring them to relearn the interface.
Color variation by user role
4. Building an Application Style Reference
Before defining the visual styling of an application, makers should understand the organization’s existing visual identity.
When formal brand guidelines are available, they should provide the primary reference. Focus on the elements that can directly inform the application, such as logos, color palettes, typography, iconography, and examples of digital interfaces.
When practical guidelines are not available, a simple Application Style Reference can be created from existing materials. Corporate websites and applications can provide examples of colors, typography, buttons, icons, and other interface treatments, while reports and other data-heavy materials can help identify established approaches to tables, charts, and data visualization.
Browser developer tools or style-inspection browser extensions can help identify specific properties such as colors and fonts
The objective should not be to reproduce every aspect of the organization’s visual language or create a complete brand book. The reference should capture the elements relevant to application design, providing makers with a consistent starting point for the styling decisions described in the following sections.
Collection of relevant visual identity elements into a practical application reference
5. Key Takeaways
