null

Fundamental Style

Color

Usage Examples

Primary Color

Secondary Color

Typography

Corner Radius

Spacing

Shadow

Icons

Divider

General Guide

UX Writing

Page Layout

Empty State

Action

Button

Feedback

Dialog

Badge

Tips

Toast

Tooltip

Navigation

Top Bar

Bottom Navigation

Tab Group

Step Bar

Input

Text Input

Search Box

Virtual Keyboard

Number Stepper

Uploader

Selection

Radio Button

Checkbox

Switch

Chips

Information

Avatar

List

Card

Header

Label

Bottom Sheet

Voucher

Contextual Banner

Page Pattern

OTP

Scan Upload

Scan Payment

Result Page

Transaction Detail Page

Illustration

Color

The color system ensures a consistent experience across our products. It communicates brand identity, conveys information, create visual hierarchy and draw users' attention to the right place.

Usage Examples

Refer to token list for the color values.

Primary Color

These are the main neutral, brand and semantic colors that make up the majority of the colors used in the design system and components.

Base
These are base black, white and transparent color style

White

#FFFFFF

Black

#000000

Transparent

#000000 0%

Neutral
Gray is a neutral color and is the foundation of the color system.
Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.

neutral.25

#F8F8F8

Neutral.50

#F2F2F2

Neutral.100

#E1E1E1

Neutral.200

#D7D7D7

Neutral.300

#BEBEBE

Neutral.400

#A3A3A3

Neutral.500

#8C8C8C

Neutral.600

#747474

Neutral.700

#5B5B5B

Neutral.800

#454545

Neutral.900

#333333

Neutral.950

#222222

Shopee & MariBank
The brand color is your "primary" 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.

Shopee bag

#FFF6F4

Shopee

#EE4D2D

MariBank bg

#FFF5EC

MariBank

#FA5E00

Success
Success colors communicate a positive action, positive trend, or a successful confirmation.

Success bg

#EDFEF1

Success

#1EA95E

Success text

#008942

Warning
Warning colors communicate caution, attention, or potential issues that require user awareness.

Warning bg

#FCF9E6

Warning

#EA9400

Warning text

#C16F00

Error
Error colors communicate a negative action, negative trend, or an error.

Error bg

#FFF6F7

Error

#EA1C42

Error text

#BF1234

Black & White Opacity
Use alpha color variables to manage all white and black opacity fill colors in your designs

blackOpacity.25

rgba(0,0,0,0.03)

blackOpacity.50

rgba(0,0,0,0.05)

blackOpacity.100

rgba(0,0,0,0.1)

blackOpacity.200

rgba(0,0,0,0.16)

blackOpacity.300

rgba(0,0,0,0.25)

blackOpacity.400

rgba(0,0,0,0.36)

blackOpacity.500

rgba(0,0,0,0.45)

blackOpacity.600

rgba(0,0,0,0.54)

blackOpacity.700

rgba(0,0,0,0.64)

blackOpacity.800

rgba(0,0,0,0.73)

blackOpacity.900

rgba(0,0,0,0.8)

blackOpacity.950

rgba(0,0,0,0.87)

whiteOpacity.25

rgba(255,255,255,0.13)

whiteOpacity.50

rgba(255,255,255,0.2)

whiteOpacity.100

rgba(255,255,255,0.27)

whiteOpacity.200

rgba(255,255,255,0.36)

whiteOpacity.300

rgba(255,255,255,0.46)

whiteOpacity.400

rgba(255,255,255,0.55)

whiteOpacity.500

rgba(255,255,255,0.64)

whiteOpacity.600

rgba(255,255,255,0.75)

whiteOpacity.700

rgba(255,255,255,0.84)

whiteOpacity.800

rgba(255,255,255,0.95)

whiteOpacity.900

rgba(255,255,255,0.9)

whiteOpacity.950

rgba(255,255,255,0.97)

Secondary Color

Along with primary colors, it's helpful to have a selection of secondary colors to use in components such as pills, alerts and labels. These secondary colors should be used sparingly or as accents, while the primary color(s) should take precedence.

amber.600

#F88A05

greenLight.600

#64A311

teal.600

#04A48E

blue.600

#0084D0

blueDark.600

#1C64F0

purple.600

#8B3CE2

pink.600

#CE1EA0

Color

BaseThese are base black, white and transparent color style

NeutralGray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.

Shopee & MariBankThe brand color is your "primary" 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.

SuccessSuccess colors communicate a positive action, positive trend, or a successful confirmation.

WarningWarning colors communicate caution, attention, or potential issues that require user awareness.

ErrorError colors communicate a negative action, negative trend, or an error.

Black & White OpacityUse alpha color variables to manage all white and black opacity fill colors in your designs

Base
These are base black, white and transparent color style

Neutral
Gray is a neutral color and is the foundation of the color system.
Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.

Shopee & MariBank
The brand color is your "primary" 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.

Success
Success colors communicate a positive action, positive trend, or a successful confirmation.

Warning
Warning colors communicate caution, attention, or potential issues that require user awareness.

Error
Error colors communicate a negative action, negative trend, or an error.

Black & White Opacity
Use alpha color variables to manage all white and black opacity fill colors in your designs