Colors

Our default library Colors object is using System Colors and Design Tokens.

Design Tokens

Design Tokens

Design Tokens provide semantic meaning to our color system by mapping contextual usage to system colors. Each token follows the naming pattern: $[property][Semantic][Weight]

For example:

• $backgroundPrimaryHeavy: A heavy primary background color
• $textSuccess: Success-themed text color
• $iconWarning: Warning-themed icon color

Design Token Structure

Design tokens follow a structured naming convention: $[property][Semantic][Weight], where:

Property

Defines the UI element the token applies to:

• background - Background colors
• text - Text colors
• icon - Icon colors
• outline - Border/outline colors

Semantic

Represents the contextual meaning:

• neutral - Neutral/default state
• primary - App's primary brand color
• general - General purpose
• success - Positive/success states
• warning - Warning/caution states
• danger - Error/danger states
• disabled - Disabled state
• inverted - Reversed/contrasting colors
• default - Default state

Weight (Optional)

Indicates the color intensity:

• light - Lighter variation
• medium - Medium intensity
• heavy - Heavier/darker variation

Examples:

• $backgroundPrimaryHeavy - Dark variant of primary background
• $textSuccess - Success state text color
• $iconWarning - Warning state icon color

View all available design tokens in our token definition files.

Token

Light Mode

Dark Mode

$backgroundDefault

$backgroundElevated

$backgroundElevatedLight

$backgroundNeutralHeavy

$backgroundNeutralIdle

$backgroundNeutralMedium

$backgroundNeutral

$backgroundNeutralLight

$backgroundPrimaryHeavy

$backgroundPrimaryMedium

$backgroundPrimaryLight

$backgroundGeneralHeavy

$backgroundGeneralMedium

$backgroundGeneralLight

$backgroundSuccessHeavy

$backgroundSuccessLight

$backgroundWarningHeavy

$backgroundWarningLight

$backgroundMajorLight

$backgroundMajorHeavy

$backgroundDangerHeavy

$backgroundDangerLight

$backgroundDisabled

$backgroundDark

$backgroundDarkElevated

$backgroundDarkActive

$backgroundInverted

Dark Mode Integration

Design tokens provide seamless dark mode support through automatic color mapping. Each token maps to appropriate system colors for both light and dark themes:

// Example mapping
$textSuccess → green10 (light mode)
$textSuccess → green60 (dark mode)

View the complete token mappings:

• Light mode tokens
• Dark mode tokens

Custom Design Tokens

Customize the design system by:

1. Using loadSchemes() to override existing tokens
2. Generating tokens from your primary brand color:

Colors.loadSchemes({
  light: {
    $textDefault: '#20303C'
  },
  dark: {
    $textDefault: '#F8F8F8'
  }
});

This defines the default text color token for both light and dark modes.

System Colors

System Colors

The System Colors are all the colors we use in our design system. (red30, grey10 and so on).

Base Palette

AAA

Grey 1

#13191E

AAA

Grey 5

#1E2830

AAA

Grey 10

#20303C

AAA

Grey 20

#4D5963

AAA

Grey 30

#6E7881

AAA

Grey 40

#A6ACB1

AAA

Grey 50

#D2D6D8

AAA

Grey 60

#E8ECF0

AAA

Grey 70

#F0F2F5

AAA

Grey 80

#F8f9FA

AAA

Violet 1

#170E5C

AAA

Violet 5

#231690

AAA

Violet 10

#3220CD

AAA

Violet 20

#4633E9

AAA

Violet 30

#5A48F5

AAA

Violet 40

#8579FF

AAA

Violet 50

#B2ABFF

AAA

Violet 60

#D1CCFF

AAA

Violet 70

#E3E0FF

AAA

Violet 80

#F0EEFF

AAA

Blue 1

#092E76

AAA

Blue 5

#0C3E9D

AAA

Blue 10

#0F4DC4

AAA

Blue 20

#0F59E6

AAA

Blue 30

#116DFF

AAA

Blue 40

#3582FF

AAA

Blue 50

#81B4FF

AAA

Blue 60

#97C7FF

AAA

Blue 70

#C4DFFF

AAA

Blue 80

#E9F3FF

AAA

Green 1

#004030

AAA

Green 5

#006047

AAA

Green 10

#008563

AAA

Green 20

#009872

AAA

Green 30

#00A87E

AAA

Green 40

#45C3A4

AAA

Green 50

#85DEC8

AAA

Green 60

#B3EBDD

AAA

Green 70

#CFF2E9

AAA

Green 80

#E3F7F2

AAA

Red 1

#5F140F

AAA

Red 5

#9E1E11

AAA

Red 10

#D52712

AAA

Red 20

#E93222

AAA

Red 30

#FC3D2F

AAA

Red 40

#FD7267

AAA

Red 50

#FEA6A0

AAA

Red 60

#FFC9C5

AAA

Red 70

#FFDEDC

AAA

Red 80

#FFEDEC

AAA

Yellow 1

#6A4300

AAA

Yellow 5

#9C6600

AAA

Yellow 10

#E89900

AAA

Yellow 20

#F7AE00

AAA

Yellow 30

#FFC50D

AAA

Yellow 40

#FFD54E

AAA

Yellow 50

#FFE48D

AAA

Yellow 60

#FFEEB9

AAA

Yellow 70

#FFF4D3

AAA

Yellow 80

#FFF9E4

AAA

Orange 1

#762D00

AAA

Orange 5

#9E3900

AAA

Orange 10

#CD4700

AAA

Orange 20

#E95504

AAA

Orange 30

#FB6413

AAA

Orange 40

#FC8E53

AAA

Orange 50

#FDB893

AAA

Orange 60

#FED4BD

AAA

Orange 70

#FFE5D7

AAA

Orange 80

#FFF1EA

AAA

black

#000000

AAA

white

#FFFFFF

AAA

dark

#0E1216

Accessibility

Dev

loadColors

Load a set of colors to be used in the app.
These colors will be accessible through the Colors class and as modifiers. usage:

import {Colors} from 'react-native-ui-lib';

Colors.loadColors({
  error: '#ff2442',
  success: '#00CD8B',
  text: '#20303C'
});

import {View, Text, Colors} from 'react-native-ui-lib';

<View>
  <Text style={{color: Colors.error}}>Error Message</Text>
  <Text success>Success Message</Text>
<View>

loadSchemes

Load a set of scheme colors to support dark/light mode.
This feature works hand in hand with our modifiers This method also supports adding and overriding design tokens:

Colors.loadSchemes({
  light: {
    screenBG: 'transparent',
    textColor: Colors.grey10,
    moonOrSun: Colors.yellow30,
    mountainForeground: Colors.green30,
    mountainBackground: Colors.green50,
    $backgroundSuccess: Colors.green40,
    $backgroundSuccessLight: Colors.green70
  },
  dark: {
    screenBG: Colors.grey10,
    textColor: Colors.white,
    moonOrSun: Colors.grey80,
    mountainForeground: Colors.violet10,
    mountainBackground: Colors.violet20,
    $backgroundSuccess: Colors.green40,
    $backgroundSuccessLight: Colors.green20
  }
});

<View flex padding-page bg-screenBG>
  <Text h1 textColor>
    Dark Mode
  </Text>
</View>

Note: for dark mode support please add the following require in your app, in an initial place, before importing react-native-ui-lib at the first time.

require('react-native-ui-lib/config').setConfig({appScheme: 'default'});

rgba

usage:

import {Colors} from 'react-native-ui-lib';

Colors.rgba('#ff2442', 0.05); // 'rgb(255, 36, 66, 0.05)'
Colors.rgba(44, 224, 112, 0.2); // 'rgb(44, 224, 112, 0.2)'

getColorTint

usage:

import {Colors} from 'react-native-ui-lib';

Colors.getColorTint(Colors.green30, 70); // will return the value of Colors.green70
Colors.getColorTint('#ff2442', 50); // will return the 5th tint in an autogenerate 8-tints palette based on '#ff2442'

isDark

returns true if a color is considered dark (bright colors will return false)

import {Colors} from 'react-native-ui-lib';

Colors.isDark(Colors.grey10); // true
Colors.isDark(Colors.grey80); // false