Foundation
Color System
Color plays a key role in creating products with effective interfaces and user experiences.
Selected Theme
Select brand or tribe name to preview style
Colors system leverages a purposeful set of color styles as the perfect starting point for any brand or project. When it comes to color, contrast is critical for ensuring text is legible.
Usage
Color can be used in every component or widget by applying value ?attr/{color_token} .
android:textColor="?attr/colorSecondary900"
You can set the color of the widget or components from kotlin file.
...context.requiredColor(UiKitAttr.{colorToken})...
You can also set your preferences color by override or register them in your themes .
<style name="YourTheme" parent="Legion.Light">...<item name="colorPrimary900">@color/primary_900</item><item name="colorPrimary800">@color/primary_800</item><item name="colorPrimary700">@color/primary_700</item><item name="colorSecondary900">@color/secondary_900</item><item name="colorSecondary800">@color/secondary_800</item><item name="colorSecondary700">@color/secondary_700</item><item name="colorTertiary_900">@color/black_900</item>
Variants
Color Primary
The primary color is your “brand” color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
| Color token list avalaibe on android |
|---|
| colorPrimary900 |
| colorPrimary800 |
| colorPrimary700 or colorPrimary_pressed |
| colorPrimary600 or colorPrimary_hover |
| colorPrimary500 or colorPrimary |
| colorPrimary400 |
| colorPrimary300 |
| colorPrimary200 |
| colorPrimary100 |
| colorPrimary50 |
| colorPrimary25 |
Override Colors
<style name="YourTheme" parent="Legion.Light">...<item name="colorPrimary900">@color/primary_900</item><item name="colorPrimary800">@color/primary_800</item><item name="colorPrimary700">@color/primary_700</item><item name="colorPrimary600">@color/primary_600</item><item name="colorPrimary500">@color/primary_500</item><item name="colorPrimary400">@color/primary_400</item><item name="colorPrimary300">@color/primary_300</item>
Color Secondary
The secondary colors is color highlight or complement the primary color. These are to be used sparingly to make the UI elements stand out. These colors are also usually defined in the brand guidelines.
| Color token list avalaibe on android |
|---|
| colorSecondary900 |
| colorSecondary800 |
| colorSecondary700 or colorSecondary_pressed |
| colorSecondary600 or colorSecondary_hover |
| colorSecondary500 or colorSecondary |
| colorSecondary400 |
| colorSecondary300 |
| colorSecondary200 |
| colorSecondary100 |
| colorSecondary50 |
| colorSecondary25 |
Override Colors
<style name="YourTheme" parent="Legion.Light">...<item name="colorSecondary900">@color/secondary_900</item><item name="colorSecondary800">@color/secondary_800</item><item name="colorSecondary700">@color/secondary_700</item><item name="colorSecondary600">@color/secondary_600</item><item name="colorSecondary500">@color/secondary_500</item><item name="colorSecondary400">@color/secondary_400</item><item name="colorSecondary300">@color/secondary_300</item>
Color Tertiary
The tertiary color is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers, outline card — are usually gray.
| Color token list avalaibe on android |
|---|
| colorTertiary900 **_or** black_900 |
| colorTertiary800 **_or** black_800 |
| colorTertiary700 **_or** black_700 |
| colorTertiary600 **_or** black_600 |
| colorTertiary500 **_or** black_500 |
| colorTertiary400 **_or** black_400 |
| colorTertiary300 **_or** black_300 |
| colorTertiary200 **_or** black_200 |
| colorTertiary100 **_or** black_100 |
| colorTertiary50 **_or** black_50 |
| colorTertiary25 **_or** black_25 |
| white |
| black |
Override Colors
<style name="YourTheme" parent="Legion.Light">...<item name="colorTertiary_900">@color/black_900</item><item name="colorTertiary_800">@color/black_800</item><item name="colorTertiary_700">@color/black_700</item><item name="colorTertiary_600">@color/black_600</item><item name="colorTertiary_500">@color/black_500</item><item name="colorTertiary_400">@color/black_400</item><item name="colorTertiary_300">@color/black_300</item>
Color Accent
Accent colours communicate important status to the user such as success, information, warning or error. These colours should be used paired with text, an icon or both to fulfill their purpose in the best way possible.
Success
Success colors communicate a positive action, postive trend, or a successful confirmation. If you’re using green as your primary color, it can be helpful to introduce a different hue for your success green.
| Color token list avalaibe on android |
|---|
| success_900 |
| success_800 |
| success700 **_or** success_pressed |
| success600 **_or** success_hover |
| success500 **_or** success_normal |
| success_400 |
| success_300 |
| success_200 |
| success_100 |
| success_50 |
| success_25 |
Override Colors
<style name="YourTheme" parent="Legion.Light">...<item name="success_900">@color/success_900</item><item name="success_800">@color/success_800</item><item name="success_700">@color/success_700</item><item name="success_600">@color/success_600</item><item name="success_500">@color/success_500</item><item name="success_400">@color/success_400</item><item name="success_300">@color/success_300</item>
Warning
Warning colors can communicate that an action is potentially destructive or “on-hold”. These colors are commonly used in confirmations to grab the users’ attention.
| Color token list avalaibe on android |
|---|
| warning_900 |
| warning_800 |
| warning700 **_or** warning_pressed |
| warning600 **_or** warning_hover |
| warning500 **_or** warning_normal |
| warning_400 |
| warning_300 |
| warning_200 |
| warning_100 |
| warning_50 |
| warning_25 |
Override Colors
<style name="YourTheme" parent="Legion.Light">...<item name="warning_900">@color/warning_900</item><item name="warning_800">@color/warning_800</item><item name="warning_700">@color/warning_700</item><item name="warning_600">@color/warning_600</item><item name="warning_500">@color/warning_500</item><item name="warning_400">@color/warning_400</item><item name="warning_300">@color/warning_300</item>
Information
Infomation colors can communicate that an action is informative section or
these colors are commonly used in awareness for users’ attention.
| Color token list avalaibe on android |
|---|
| info_900 |
| info_800 |
| info700 **_or** info_pressed |
| info600 **_or** info_hover |
| info500 **_or** info_normal |
| info_400 |
| info_300 |
| info_200 |
| info_100 |
| info_50 |
| info_25 |
Override Colors
<style name="YourTheme" parent="Legion.Light">...<item name="info_900">@color/info_900</item><item name="info_800">@color/info_800</item><item name="info_700">@color/info_700</item><item name="info_600">@color/info_600</item><item name="info_500">@color/info_500</item><item name="info_400">@color/info_400</item><item name="info_300">@color/info_300</item>
Error
Error colors are used across error states and in “destructive” actions. They communicate a destructive/negative action, such as removing a user from your team.
| Color token list avalaibe on android |
|---|
| error_900 |
| error_800 |
| error700 **_or** error_pressed |
| error600 **_or** error_hover |
| error500 **_or** error_normal |
| error_400 |
| error_300 |
| error_200 |
| error_100 |
| error_50 |
| error_25 |
Override Colors
<style name="YourTheme" parent="Legion.Light">...<item name="error_900">@color/error_900</item><item name="error_800">@color/error_800</item><item name="error_700">@color/error_700</item><item name="error_600">@color/error_600</item><item name="error_500">@color/error_500</item><item name="error_400">@color/error_400</item><item name="error_300">@color/error_300</item>
Example
Do you have feedback?
Please let us know to make it better