Color

stablev1.0.0

Semantic Color Palettes from Figma SCDC node 76:1539: Main, Prime, Grayscale, Brand, Wealth, PFM, Quicklinks, Gradients, Dark, and Extra.

Open in Figma

Live preview

GLOBAL DESIGN SYSTEM

Semantic Color Palettes

OVERVIEW

Understand styling and color groups.

Semantic palettes from Figma SCDC node 76:1539. Use these groups so products share one color language — interactive, status, grayscale, brand, and ancillary ramps.

Main

is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.

Black (#000000)

Blue (#2772C7)

Green (#1F8845)

Red (#D0021B)

Grey (#6B6E73)

White (#FFFFFF)

Orange (#FF9526)

Purple (#8B0FED)

Prime

Prime colors with different brightness.

Blue 75 (#6FA1DA)

Blue 50 (#B7D0EC)

Blue 20 (#EAF0F8)

Blue 25 (#F7FBFF)

Green 75 (#6AB083)

Green 50 (#A6D0B5)

Green 25 (#E8F3EC)

Red 75 (#E05667)

Red 50 (#EFABB3)

Red 25 (#FAE5E8)

Grayscale

grayscale is the foundation of our color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually using gray.

Black 900 (#191919)

Black 800 (#282828)

Black 700 (#333333)

Black 600 (#555555)

Black 500 (#6B6E73)

Black 400 (#939393)

Black 300 (#AAAAAA)

Black 200 (#CCCBCB)

Black 100 (#DFDFDF)

Color 90 (#E5E5E5)

Black 80 (#EEEEEE)

Black 50 (#F3F3F3)

Black 40 (#F4F4F4)

Black 35 (#F5F5F5)

Black 30 (#F8F8F8)

Black 25 (#FAFAFA)

Brand / Trustmark

Our brand colors. use them wisely.

Blue (#0473EA)

Green (#38D200)

Dark (#525355)

Focus / Keyboard

Focus rings and keyboard highlights. Green is the default input focus.

Blue (#0473EA)

Green (#38D200)

Dark (#525355)

Wealth

Color specifically for wealth landing and L1/L2 screens

0083B3 (#0083B3)

0473EA (#0473EA)

2C60C3 (#2C60C3)

086788 (#086788)

52DAFF (#52DAFF)

AEF1EA (#AEF1EA)

3BEB8D (#3BEB8D)

4A9E92 (#4A9E92)

356F65 (#356F65)

3B829B (#3B829B)

20ACFF (#20ACFF)

77B1F9 (#77B1F9)

38D200 (#38D200)

13A092 (#13A092)

29D0F5 (#29D0F5)

D4D4D4 (#D4D4D4)

PFM

descrption comes later

transport (#374047)

withdrawal (#757575)

bills-and-utilities (#F54537)

travel (#C15908)

salary (#FFBA06)

entertainment (#E9D10D)

transfer (#CDDC3B)

Others (#13CB99)

groceries (#00A546)

digital-brand-green (#3EB812)

digital-brand-blue (#2BFDDF)

dining (#31CAD8)

investment (#00BCD3)

shopping (#00A9F3)

health (#AE6BFC)

insurance (#EA7FF7)

Quicklinks

descrption comes later

Green

Teal

Cyan

Blue

Gradients

descrption comes later

Brand

Quicklinks

Retail Blue

Priority Dark

Priority Private

Private Dark Grey

Red Dark

Red Tangerine

Green

Light Green

Light Cyan

Dark

descrption comes later

01521E (#01521E)

004EA6 (#004EA6)

860010 (#860010)

Extra

descrption comes later

F4E46F (#F4E46F)

FFF6C7 (#FFF6C7)

EAC57A (#EAC57A)

Orange (#FF9E0D)

Purple (#8B0FED)

Dark (old Proton)

descrption comes later

01521E (#01521E)

004EA6 (#004EA6)

860010 (#860010)

Ancillary colors

The following color palettes were extracted and generated from our main ones, free to use as ancillary colors

#cfe4fb10%

#afd3f920%

#87bdf630%

#5fa6f340%

#3790f050%

#0f7aedBase

#0d66c660%

#0a519e70%

#083d7780%

#05294f90%

#03182f100%

#d7f6cc10%

#bdf0aa20%

#9ce98030%

#7ae15540%

#59da2a50%

#38d200Base

#2faf0060%

#258c0070%

#1c690080%

#13460090%

#0b2a00100%

#f6ccd110%

#efabb320%

#e8818d30%

#e0566740%

#d82c4150%

#d0021bBase

#ad021760%

#8b011270%

#68010e80%

#45010990%

#290106100%

#ccf4ef10%

#99e9df20%

#66dfcf30%

#33d4bf40%

#1ac4ad50%

#13cb99Base

#10a87f60%

#0c856670%

#09634c80%

#05423390%

#03271e100%

#d0dce810%

#a1b9d120%

#7296ba30%

#4373a340%

#27588a50%

#0c3a66Base

#0a315660%

#08274570%

#061d3480%

#04142390%

#020c15100%

#ffe4c810%

#ffd0a020%

#ffbb7830%

#ffa65040%

#ff9b3b50%

#ff9526Base

#d57c2060%

#aa641970%

#804b1380%

#55320d90%

#331e08100%

#e4c9fb10%

#c993f720%

#ae5df330%

#9c36f040%

#9322ee50%

#8b0fedBase

#740dc660%

#5d0a9e70%

#46087780%

#2e054f90%

#1c0330100%

Implementation

import { Color } from '@nitro-core/ui';

<Color
  name="Black"
  hex="#000000"
/>

Design → Code

Property names stay aligned so a Figma Button maps onto the production import below.

Figma

Semantic Color Palettes

76:1539

name: Black
hex: #000000

Code

Color

@nitro-core/ui

name: "Black"
hex: "#000000"

Token inspector

Brand blue

Figma Variable

Brand / Trustmark Blue #0473ea

Nitro Token

color.palette.brandBlue

CSS

--nitro-color-palette-brand-blue

Chain

Figma → Token → CSS → Component

Brand green

Figma Variable

Brand / Trustmark Green #38d200

Nitro Token

color.palette.brandGreen

CSS

--nitro-color-palette-brand-green

Chain

Figma → Token → CSS → Component

Main red

Figma Variable

Main Red #d0021b

Nitro Token

color.palette.mainRed

CSS

--nitro-color-palette-main-red

Chain

Figma → Token → CSS → Component