Color

We are intentional with our use of color, using color sparingly to drive interaction and emphasize useful information per pattern, flow or experience. Our approach to color is timeless, leaning on best practices and accessibility standards to guide our decisions. In combination with thoughtful typographic hierarchy we lay the foundation for a powerful, utilitarian experience that all users can intuitively understand.

Blue

Indicates a primary CTA or informative piece of content. Used for the color system of chips and avatar.

500
#0072F0

100
#CCE3FC

200
#99C7F9

300
#66AAF6

400
#338EF3

500
#0072F0

600
#005BC0

700
#004490

800
#002E60

900
#001730

Green

Used to indicate success or positive action. Additionally used to indicate our power seller on the marketplace. Used for the color system of chips and avatar.

500
#1DAE61

100
#D2EFDF

200
#A5DFC0

300
#77CEA0

400
#4ABE81

500
#1DAE61

600
#178B4E

700
#11683A

800
#0C4627

900
#062313

Teal

Used for the color system of chips and avatar. Also used for some statuses.

500
#01BBC8

100
#CCF1F4

200
#99E4E9

300
#67D6DE

400
#34C9D3

500
#01BBC8

600
#0196A0

700
#017078

800
#004B50

900
#002528

Red

Indicates that a process has an error, failed or indicating a destructive action.

500
#E4002B

100
#FACCD5

200
#F499AA

300
#EF6680

400
#E93355

500
#E4002B

600
#B60022

700
#89001A

800
#5B0011

900
#2E0009

Orange

Indicates an alert or warning needing immediate attention.

500
#FF9425

100
#FFEAD3

200
#FFD4A8

300
#FFBF7C

400
#FFA951

500
#FF9425

600
#CC761E

700
#995916

800
#663B0F

900
#331E07

Yellow

Most commonly used for Medical License Chips.

500
#FFD400

100
#FFF6CC

200
#FFEE99

300
#FFE566

400
#FFDD33

500
#FFD400

600
#CCAA00

700
#997F00

800
#665500

900
#332A00

Purple

LeafLink brand color. Primarily used in our AppSidebar.

500
#1E164B

100
#D2D0DB

200
#A5A2B7

300
#787393

400
#4B456F

500
#1E164B

600
#18123C

700
#120D2D

800
#0C091E

900
#06040F

Royal

LeafLink brand color. Primary used in our AppSidebar for the ContextSwitcher.

500
#303AB2

100
#D6D8F0

200
#ACB0E0

300
#8389D1

400
#5961C1

500
#303AB2

600
#262E8E

700
#1D236B

800
#131747

900
#0A0C24

Seafoam

LeafLink brand color. It is the active state for all AppNavigationItems in the AppSidebar. Occasionally it will be used as a status.

500
#3CDBC0

100
#D8F8F2

200
#B1F1E6

300
#8AE9D9

400
#63E2CD

500
#3CDBC0

600
#30AF9A

700
#248373

800
#18584D

900
#0C2C26

Ice

Defines depth on the platform. Our text styles use a variation of 900, 700 and 500.

500
#C5C9D4

100
#F3F4F6

200
#E8E9EE

300
#DCDFE5

400
#D1D4DD

500
#C5C9D4

600
#9EA1AA

700
#76797F

800
#4F5055

900
#27282A