Colors

The mobile apps design system coloring logic is built using System Colors and Design Tokens

Design Tokens

Design Tokens

Design Tokens are contextual colors based on the system colors.
The design token name structure is "$[property]-[semantic]-[weight]". (e.g $backgroundPrimaryHeavy, $textSuccessLight)

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

$backgroundPremiumHeavy

$backgroundPremiumLight

$backgroundDineLight

$backgroundFitLight

$backgroundDineHeavy

$backgroundFitHeavy

$backgroundBrandedHeavy

• Property - The property we use this token for. The properties are:

  • background
  • text
  • icon
  • outline

• Semantic - the meaning of the color, what is the message that we want to pass using this color. The semantics are:

  • neutral
  • primary - the primary color of the app, means, blue for Spaces app and green for Fit app.
  • general
  • success
  • warning
  • danger
  • premium
  • dine
  • fit
  • disabled
  • inverted
  • default

• Weight - the weight of the color (optional). The weights are:

  • light
  • medium
  • heavy

So, for example, a valid token can be: $backgroundPrimaryHeavy or $textSuccess.

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

Controls

Select Theme

OR

Customize theme

Primary

Dark Color

Text and Icon

Dark Color

Background

Light Color

Live Preview

FLEURS FRAÎCHES

Banner Title

This is banner message text that can be long and wrap to the next line

Utils

• Colors.rgba(color, alpha) - Get the rgba value of a given color (e.g. Colors.rgba(Colors.red50, 0.4))
• Colors.getColorTint(color, tintKey) - Get a specific tint of a given color (e.g. Colors.getColorTint(Colors.red30, 70) will return Colors.red70)

Colors Linter

To avoid hard coded values and also to provide you with a quick way to use uilib colors without having to check what's the name of each hex value.
Use the auto-fix comes with this linter to get the uilib names automatically.