Color attributes
This document consists of all color attributes that UX Framework uses by default. You can override them in your application code. Use Colors Schema guide for details.
GUIDE
Colors Schema
The document about how to configure colors in the app built on top of the UX Framework.
The Android Navigation SDK UX Framework incorporates a comprehensive design system based on style attributes.
This design system enhances the visual consistency and user experience across various components and screens of the application. The design system is defined using the DashStyle styleable element in XML, which encapsulates various style attributes for customization.
DashStyle Attributes
The DashStyle styleable defines a set of attributes, each of which corresponds to a specific aspect of the design system. These attributes enable customization of colors used throughout the application. The design system's colors are categorized into different groups, each with its own set of subgroups. This categorization facilitates easy and consistent application of colors across the application's UI.
Text Colors Schema
| Attribute Name | Attribute Type | Description | Day Color | Night Color |
|---|---|---|---|---|
text_color_primary | color | Main text color used throughout the application. | #05070A | #EDEFF2 |
text_color_secondary | color | Secondary text color for less prominent elements. | #536275 | #A6B2C6 |
text_color_tertiary | color | Tertiary text color for low-priority or subtle elements. | #B4BAC6 | #3B4252 |
text_color_links | color | Color used for hyperlinks. | #3072F5 | #407CF5 |
text_color_accent | color | Attention-grabbing text color. | #3072F5 | #407CF5 |
text_color_inverted | color | Text color for inverted backgrounds. | #FFFFFF | #EDEFF2 |
text_color_red | color | Text color indicating errors or warnings. | #EB252A | #EA3136 |
Background Colors Schema
| Attribute Name | Attribute Type | Description | Day Color | Night Color |
|---|---|---|---|---|
background_color_primary | color | Primary background color. | #FFFFFF | #181B20 |
background_color_secondary | color | Secondary background color. | #F2F4F7 | #292C33 |
background_color_tertiary | color | Tertiary background color. | #EAECEF | #3B4252 |
background_color_quaternary | color | Quaternary background color. | #F2F4F7 | #181B20 |
background_color_fade | color | Fade background color. | #B305070A | #B3181B20 |
background_color_sidebar | color | Sidebar background color. | #D9FFFFFF | #D9090A0B |
Icons Color Schema
| Attribute Name | Attribute Type | Description | Day Color | Night Color |
|---|---|---|---|---|
icon_color_primary | color | Primary color for icons. | #23262D | #EDEFF2 |
icon_color_secondary | color | Secondary color for icons. | #697388 | #A6B1C6 |
icon_color_inverted | color | Icon color for use on inverted backgrounds. | #FFFFFF | #EDEFF2 |
icon_color_red | color | Icon color indicating errors. | #EB252A | #EA3136 |
icon_color_green | color | Icon color indicating success. | #09AA74 | #0BDA95 |
icon_color_accent | color | Icon color for emphasizing elements. | #3064F5 | #407CF5 |
Buttons Color Schema
| Attribute Name | Attribute Type | Description | Day Color | Night Color |
|---|---|---|---|---|
button_color_primary | color | Primary button color. | #3072F5 | #407CF5 |
button_color_secondary | color | Secondary button color. | #FFFFFF | #181B20 |
button_color_tertiary | color | Tertiary button color. | #B4BAC6 | #3B4252 |
button_color_quaternary | color | Quaternary button color. | #FFFFFF | #292C33 |
button_color_transparent | color | Button color with transparency. | #00FFFFFF | #00FFFFFF |
button_color_red | color | Button color indicating critical actions. | #EB252A | #EA3136 |
Borders Color Schema
| Attribute Name | Attribute Type | Description | Day Color | Night Color |
|---|---|---|---|---|
border_color_primary | color | Primary border color. | #DFE2E8 | #303642 |
border_color_accent | color | Border color for accentuated elements. | #3072F5 | #407CF5 |
border_color_red | color | Border color indicating errors. | #EB252A | #EA3136 |
Search Pins Color Schema
| Attribute Name | Attribute Type | Description | Day Color | Night Color |
|---|---|---|---|---|
search_pin_color_primary | color | Primary color for search pins. | #FFFFFF | #EDEFF2 |
search_pin_color_on_primary | color | Color for search pin text on a primary background. | #05070A | #05070A |
search_pin_color_accent | color | Accent color for search pins. | #3064F5 | #407CF5 |
search_pin_color_on_accent | color | Color for search pin text on an accent background. | #FFFFFF | #EDEFF2 |
Destination Pins Color Schema
| Attribute Name | Attribute Type | Description | Day Color | Night Color |
|---|---|---|---|---|
destination_pin_color_primary | color | Primary color for destination pins. | #EB252A | #EA3136 |
destination_pin_color_secondary | color | Secondary color for destination pins. | #3064F5 | #407CF5 |
Speed Limit Colors
| Attribute Name | Attribute Type | Description | Day Color | Night Color |
|---|---|---|---|---|
speed_limit_color_primary | color | Primary color for speed limit indicators. | #FFFFFF | #FFFFFF |
speed_limit_color_on_primary | color | Color for speed limit text on a primary background. | #05070A | #05070A |
speed_limit_color_secondary | color | Secondary color for speed limit indicators. | #FFFFFF | #181B20 |
speed_limit_color_on_secondary | color | Color for speed limit text on a secondary background. | #05070A | #F2F4F5 |
speed_limit_color_accent | color | Accent color for speed limit indicators. | #EB252A | #EA3136 |
speed_limit_color_on_accent | color | Color for speed limit text on an accent background. | #FFFFFF | #FFFFFF |
Guidance Colors
| Attribute Name | Attribute Type | Description | Day Color | Night Color |
|---|---|---|---|---|
guidance_color_primary | color | Primary color for guidance elements. | #3072F5 | #407CF5 |
guidance_color_on_primary | color | Color for guidance text on a primary background. | #FFFFFF | #EDEFF2 |
guidance_color_on_primary_50 | color | Semi-transparent color for guidance text on a primary background. | #7FFFFFFF | #7FEDEFF2 |
guidance_color_secondary | color | Secondary color for guidance elements. | #1B43B4 | #1F55C2 |
guidance_color_on_secondary | color | Color for guidance text on a secondary background. | #FFFFFF | #EDEFF2 |
guidance_color_on_secondary_50 | color | Semi-transparent color for guidance text on a secondary background. | #7FFFFFFF | #7FEDEFF2 |
guidance_color_tertiary | color | Tertiary color for guidance elements. | #FFFFFF | #181B20 |
guidance_color_on_tertiary | color | Color for guidance text on a tertiary background. | #05070A | #EDEFF2 |
guidance_color_on_tertiary_50 | color | Semi-transparent color for guidance text on a tertiary background. | #7F05070A | #7FEDEFF2 |
Was this page helpful?