Give us your valuable feedback

It will help us understand how we can serve you better

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

Others

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.

Info: The android legion SDK does not provide colors for your tribe or squad, you have to override the default color according to your tribe or squad

Usage

in your composable function, can use value LegionTheme.colors.{color_token} on the colors attribute widget. for example :

@Composable
fun YourComposable() {
    Text(
        text = stringResource(id = R.string.your_string),
        style = LegionTheme.typography.bodyLargeRegular,
        color = LegionTheme.colors.tertiary700
    )
}

Variants

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.

#FBFAFF

primary25

#F5F3FF

primary50

#ECE9FE

primary100

#DDD6FE

primary200

#C3B5FD

primary300

#A48AFB

primary400

#875BF7

primary500

#7839EE

primary600

#6927DA

primary700

#5720B7

primary800

#491C96

primary900

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

@Composable
fun YourAppTheme(content: @Composable () -> Unit) {
    LegionAppTheme(
        ...
        colorScheme = LgnColorScheme(
            primary25 = Color(0xFFFCFCFD),
            primary50 = Color(0xFFFCFCFD),
            primary100 = Color(0xFFFCFCFD),
            primary200 = Color(0xFFFCFCFD),

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.

#F5F8FF

secondary25

#EFF4FF

secondary50

#D1E0FF

secondary100

#B2CCFF

secondary200

#84ADFF

secondary300

#528BFF

secondary400

#2970FF

secondary500

#155EEF

secondary600

#004EEB

secondary700

#0040C1

secondary800

#00359E

secondary900

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

@Composable
fun YourAppTheme(content: @Composable () -> Unit) {
    LegionAppTheme(
        ...
        colorScheme = LgnColorScheme(
            secondary25 = Color(0xFFFCFCFD),
            secondary50 = Color(0xFFFCFCFD),
            secondary100 = Color(0xFFFCFCFD),
            secondary200 = Color(0xFFFCFCFD),

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.

#FCFCFD

tertiary25

#F9FAFB

tertiary50

#F2F4F7

tertiary100

#EAECF0

tertiary200

#D0D5DD

tertiary300

#98A2B3

tertiary400

#667085

tertiary500

#475467

tertiary600

#344054

tertiary700

#1D2939

tertiary800

#101828

tertiary900

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

@Composable
fun YourAppTheme(content: @Composable () -> Unit) {
    LegionAppTheme(
        ...
        colorScheme = LgnColorScheme(
            tertiary25 = Color(0xFFFCFCFD),
            tertiary50 = Color(0xFFFCFCFD),
            tertiary100 = Color(0xFFFCFCFD),
            tertiary200 = Color(0xFFFCFCFD),

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.

#F6FEF9

success25

#ECFDF3

success50

#D1FADF

success100

#A6F4C5

success200

#6CE9A6

success300

#32D583

success400

#12B76A

success500

#039855

success600

#027A48

success700

#05603A

success800

#054F31

success900

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

@Composable
fun YourAppTheme(content: @Composable () -> Unit) {
    LegionAppTheme(
        ...
        colorScheme = LgnColorScheme(
            success25 = Color(0xFFFCFCFD),
            success50 = Color(0xFFFCFCFD),
            success100 = Color(0xFFFCFCFD),
            success200 = Color(0xFFFCFCFD),

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.

#FFFCF5

warning25

#FFFAEB

warning50

#FEF0C7

warning100

#FEDF89

warning200

#FEC84B

warning300

#FDB022

warning400

#F79009

warning500

#DC6803

warning600

#B54708

warning700

#93370D

warning800

#7A2E0E

warning900

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

@Composable
fun YourAppTheme(content: @Composable () -> Unit) {
    LegionAppTheme(
        ...
        colorScheme = LgnColorScheme(
            warning25 = Color(0xFFFCFCFD),
            warning50 = Color(0xFFFCFCFD),
            warning100 = Color(0xFFFCFCFD),
            warning200 = Color(0xFFFCFCFD),

Information

Infomation colors can communicate that an action is informative section or
these colors are commonly used in awareness for users’ attention.

#F5FAFF

information25

#EFF8FF

information50

#D1E9FF

information100

#B2DDFF

information200

#84CAFF

information300

#53B1FD

information400

#2E90FA

information500

#1570EF

information600

#175CD3

information700

#1849A9

information800

#194185

information900

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

@Composable
fun YourAppTheme(content: @Composable () -> Unit) {
    LegionAppTheme(
        ...
        colorScheme = LgnColorScheme(
            info25 = Color(0xFFFCFCFD),
            info50 = Color(0xFFFCFCFD),
            info100 = Color(0xFFFCFCFD),
            info200 = Color(0xFFFCFCFD),

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.

#FFFBFA

error25

#FEF3F2

error50

#FEE4E2

error100

#FECDCA

error200

#FDA29B

error300

#F97066

error400

#F04438

error500

#D92D20

error600

#B42318

error700

#912018

error800

#7A271A

error900

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

@Composable
fun YourAppTheme(content: @Composable () -> Unit) {
    LegionAppTheme(
        ...
        colorScheme = LgnColorScheme(
            error25 = Color(0xFFFCFCFD),
            error50 = Color(0xFFFCFCFD),
            error100 = Color(0xFFFCFCFD),
            error200 = Color(0xFFFCFCFD),

Foundation

Color System

Selected Theme

Usage

Variants

Primary

Override Colors

Secondary

Override Colors

Tertiary

Override Colors

Accent

Success

Override Colors

Warning

Override Colors

Information

Override Colors

Error

Override Colors

Example