Give us your valuable feedback

It will help us understand how we can serve you better

Foundation

Color System

Color plays a key role in creating products with effective interfaces and user experiences.

Selected Theme

Select brand or tribe name to preview style

Others

This page contains information for Legion Phoenix (Version 2) design system. If you wish to see Legion UI (Version 1) design system please visit this link.

Usage

Colors system leverages a purposeful set of color styles as the perfect starting point for any brand or project. When it comes to color, contrast is critical for ensuring text is legible.

Primary Colors

The primary color is your “brand” 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.

#FBFAFF

primary25

#F5F3FF

primary50

#ECE9FE

primary100

#DDD6FE

primary200

#C3B5FD

primary300

#A48AFB

primary400

#875BF7

primary500

#7839EE

primary600

#6927DA

primary700

#5720B7

primary800

#491C96

primary900

  <Box background="primary25">...</Box>
  <Box background="primary50">...</Box>
  <Box background="primary100">...</Box>
  <Box background="primary200">...</Box>
  <Box background="primary300">...</Box>
  <Box background="primary400">...</Box>
  <Box background="primary500">...</Box>
  <Box background="primary600">...</Box>
  <Box background="primary700">...</Box>

Secondary Palette

The secondary colors is color highlight or complement the primary color. These are to be used sparingly to make the UI elements stand out. These colors are also usually defined in the brand guidelines.

#F5F8FF

secondary25

#EFF4FF

secondary50

#D1E0FF

secondary100

#B2CCFF

secondary200

#84ADFF

secondary300

#528BFF

secondary400

#2970FF

secondary500

#155EEF

secondary600

#004EEB

secondary700

#0040C1

secondary800

#00359E

secondary900

  <Box background="secondary25">...</Box>
  <Box background="secondary50">...</Box>
  <Box background="secondary100">...</Box>
  <Box background="secondary200">...</Box>
  <Box background="secondary300">...</Box>
  <Box background="secondary400">...</Box>
  <Box background="secondary500">...</Box>
  <Box background="secondary600">...</Box>
  <Box background="secondary700">...</Box>

Tertiary Palette

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

#FCFCFD

tertiary25

#F9FAFB

tertiary50

#F2F4F7

tertiary100

#EAECF0

tertiary200

#D0D5DD

tertiary300

#98A2B3

tertiary400

#667085

tertiary500

#475467

tertiary600

#344054

tertiary700

#1D2939

tertiary800

#101828

tertiary900

  <Box background="tertiary25">...</Box>
  <Box background="tertiary50">...</Box>
  <Box background="tertiary100">...</Box>
  <Box background="tertiary200">...</Box>
  <Box background="tertiary300">...</Box>
  <Box background="tertiary400">...</Box>
  <Box background="tertiary500">...</Box>
  <Box background="tertiary600">...</Box>
  <Box background="tertiary700">...</Box>

Semantic Colors

Semantic colours communicate important status to the user such as success, information, warning or error. These colours should be used paired with text, an icon or both to fulfill their purpose in the best way possible.

Success

Success colors communicate a positive action, postive trend, or a successful confirmation. If you’re using green as your primary color, it can be helpful to introduce a different hue for your success green.

#F6FEF9

success25

#ECFDF3

success50

#D1FADF

success100

#A6F4C5

success200

#6CE9A6

success300

#32D583

success400

#12B76A

success500

#039855

success600

#027A48

success700

#05603A

success800

#054F31

success900

  <Box background="success25">...</Box>
  <Box background="success50">...</Box>
  <Box background="success100">...</Box>
  <Box background="success200">...</Box>
  <Box background="success300">...</Box>
  <Box background="success400">...</Box>
  <Box background="success500">...</Box>
  <Box background="success600">...</Box>
  <Box background="success700">...</Box>

Warning

Warning colors can communicate that an action is potentially destructive or “on-hold”. These colors are commonly used in confirmations to grab the users’ attention.

#FFFCF5

warning25

#FFFAEB

warning50

#FEF0C7

warning100

#FEDF89

warning200

#FEC84B

warning300

#FDB022

warning400

#F79009

warning500

#DC6803

warning600

#B54708

warning700

#93370D

warning800

#7A2E0E

warning900

  <Box background="warning25">...</Box>
  <Box background="warning50">...</Box>
  <Box background="warning100">...</Box>
  <Box background="warning200">...</Box>
  <Box background="warning300">...</Box>
  <Box background="warning400">...</Box>
  <Box background="warning500">...</Box>
  <Box background="warning600">...</Box>
  <Box background="warning700">...</Box>

Information

Information colors can communicate that an action is informative section or
these colors are commonly used in awareness for users’ attention.

#F5FAFF

information25

#EFF8FF

information50

#D1E9FF

information100

#B2DDFF

information200

#84CAFF

information300

#53B1FD

information400

#2E90FA

information500

#1570EF

information600

#175CD3

information700

#1849A9

information800

#194185

information900

  <Box background="information25">...</Box>
  <Box background="information50">...</Box>
  <Box background="information100">...</Box>
  <Box background="information200">...</Box>
  <Box background="information300">...</Box>
  <Box background="information400">...</Box>
  <Box background="information500">...</Box>
  <Box background="information600">...</Box>
  <Box background="information700">...</Box>

Error

Error colors are used across error states and in “destructive” actions. They communicate a destructive/negative action, such as removing a user from your team.

#FFFBFA

error25

#FEF3F2

error50

#FEE4E2

error100

#FECDCA

error200

#FDA29B

error300

#F97066

error400

#F04438

error500

#D92D20

error600

#B42318

error700

#912018

error800

#7A271A

error900

  <Box background="error25">...</Box>
  <Box background="error50">...</Box>
  <Box background="error100">...</Box>
  <Box background="error200">...</Box>
  <Box background="error300">...</Box>
  <Box background="error400">...</Box>
  <Box background="error500">...</Box>
  <Box background="error600">...</Box>
  <Box background="error700">...</Box>