FigMayo Logo

LIBRARIES

Atomize 3.0
✦ Cover ✦

core

Ctrl-K
Atomize 3.0/Fills & Effects
Updated 12 August 2024
Fills & Effects

We have 7 different levels of elevations in the Dark theme including a resting or flat elevation.

We have 7 different levels of elevations in the Light theme including a resting or flat elevation.

Elevation is the relative distance between two layers and is used to indicate depth along the z-axis. We use them to communicate action hierarchy by putting more emphasis on the most elevated elements on the interface.

Overview

Color palettes bring visual consistency and help create a uniform style across interfaces. Each color has a defined function and relationship to its environment, so it's important to have well-defined rules to use these palettes to ensure accessibility.

Our Design system has a set of 4 color palettes. We apply colors for components, backgrounds, shadows, borders, and content using these sets of colors.

color
gray_alpha
25
50
75
100
200
300
400
500
600
700
800
900
gray
25
50
75
100
200
300
400
500
600
700
800
900
neutral_black
4
7
12
16
20
24
32
48
64
76
88
100
neutral_white
4
7
12
16
20
24
32
48
64
76
88
100
primary
25
50
75
100
200
300
400
500
600
700
800
900
secondary
25
50
75
100
200
300
400
500
600
700
800
900
transparent
transparent
danger
25
50
75
100
200
300
400
500
600
700
800
900
info
25
50
75
100
200
300
400
500
600
700
800
900
success
25
50
75
100
200
300
400
500
600
700
800
900
warning
25
50
75
100
200
300
400
500
600
700
800
900
surface
theme_light
surface_0
surface_1
surface_2
surface_3
surface_high_em
primary_accent_1
primary_accent_2
secondary_accent_1
secondary_accent_2
info_accent_1
info_accent_2
success_accent_1
success_accent_2
warning_accent_1
warning_accent_2
danger_accent_1
danger_accent_2
disabled_base_em
disabled_light_em
disabled_med_em
disabled_high_em
primary
theme_dark
surface_0
surface_1
surface_2
surface_3
surface_4
surface_5
surface_6
surface_high_em
primary_accent_1
primary_accent_2
secondary_accent_1
secondary_accent_2
info_accent_1
info_accent_2
success_accent_1
success_accent_2
warning_accent_1
warning_accent_2
danger_accent_1
danger_accent_2
disabled_base_em
disabled_light_em
disabled_med_em
disabled_high_em
primary
text
theme_light
disabled
low_em
med_em
high_em
primary_on_accentDark
primary_on_mediumDark
primary_on_base
primary_on_accentLight
info_on_accentDark
info_on_mediumDark
info_on_base
info_on_accentLight
success_on_accentDark
success_on_mediumDark
success_on_base
success_on_accentLight
warning_on_accentDark
warning_on_mediumDark
warning_on_base
warning_on_accentLight
danger_on_accentDark
danger_on_mediumDark
danger_on_base
danger_on_accentLight
white
theme_dark
disabled
low_em
med_em
high_em
primary_on_accentDark
primary_on_base
primary_on_accentLight
info_on_accentDark
info_on_base
info_on_accentLight
success_on_accentDark
success_on_base
success_on_accentLight
warning_on_accentDark
warning_on_base
warning_on_accentLight
danger_on_accentDark
danger_on_base
danger_on_accentLight
dark
outline
theme_light
none
base_em
low_em
med_em
high_em
primary_high_em
primary_med_em
primary_low_em
info_high_em
info_med_em
info_low_em
success_high_em
success_med_em
success_low_em
warning_high_em
warning_med_em
warning_low_em
danger_high_em
danger_med_em
danger_low_em
white
theme_dark
none
base_em
low_em
med_em
high_em
primary_base_em
elevation
theme_light
theme_dark
outline
theme_light
theme_dark