Briar’s color scheme offers enough flexibility to account for various use cases while keeping every color shade distinguishable.
The dark palette is primarily used for interfaces that are adapting a night theme. Shades of it can be used as backgrounds, borders, and shadows to emphasise certain areas or set them apart.
The neutral palette is primarily used within components to help differentiate hierarchy. Shades of gray can be used as backgrounds, borders, and shadows to emphasise certain areas or set them apart.
Briar uses Material Design spacing guidelines for both Web and Android platforms. Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing. Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout. Smaller components, such as iconography and typography, can align to a 4dp grid.
Briar’s typography system slightly differs from platform to platform. On the web, we use a slightly modified version of the Material Design typography guidelines using the Inter typeface by Rasmus Andersson and Roboto Mono for code snippets and other cases where a monospace font might be required.
|Scale Category||Font Weight||Size||Case||Letter spacing|
In paragraphs (not UI components) links are underlined for accessibility reasons.
In some cases (such as code snippets or contact links) a mono space typeface is required. We use Roboto Mono with a slightly darker or lighter shade background to distinguish the snippet from other text.
Briar uses the Material Design Guidelines for both Web and Android iconography. Please refer to these guidelines.