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

Default

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.

import { colors } from '@legion-theme/Theme Name';

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.

primary25

primary50

primary100

primary200

primary300

primary400

primary500

primary600

primary700

primary800

primary900

  <div style="color: colors.primary25"/>
  <div style="color: colors.primary50"/>
  <div style="color: colors.primary100"/>
  <div style="color: colors.primary200"/>
  <div style="color: colors.primary300"/>
  <div style="color: colors.primary400"/>
  <div style="color: colors.primary500"/>
  <div style="color: colors.primary600"/>
  <div style="color: colors.primary700"/>

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.

secondary25

secondary50

secondary100

secondary200

secondary300

secondary400

secondary500

secondary600

secondary700

secondary800

secondary900

  <div style="color: colors.secondary25"/>
  <div style="color: colors.secondary50"/>
  <div style="color: colors.secondary100"/>
  <div style="color: colors.secondary200"/>
  <div style="color: colors.secondary300"/>
  <div style="color: colors.secondary400"/>
  <div style="color: colors.secondary500"/>
  <div style="color: colors.secondary600"/>
  <div style="color: colors.secondary700"/>

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.

tertiary25

tertiary50

tertiary100

tertiary200

tertiary300

tertiary400

tertiary500

tertiary600

tertiary700

tertiary800

tertiary900

  <div style="color: colors.tertiary25"/>
  <div style="color: colors.tertiary50"/>
  <div style="color: colors.tertiary100"/>
  <div style="color: colors.tertiary200"/>
  <div style="color: colors.tertiary300"/>
  <div style="color: colors.tertiary400"/>
  <div style="color: colors.tertiary500"/>
  <div style="color: colors.tertiary600"/>
  <div style="color: colors.tertiary700"/>

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.

success25

success50

success100

success200

success300

success400

success500

success600

success700

success800

success900

  <div style="color: colors.success25"/>
  <div style="color: colors.success50"/>
  <div style="color: colors.success100"/>
  <div style="color: colors.success200"/>
  <div style="color: colors.success300"/>
  <div style="color: colors.success400"/>
  <div style="color: colors.success500"/>
  <div style="color: colors.success600"/>
  <div style="color: colors.success700"/>

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.

warning25

warning50

warning100

warning200

warning300

warning400

warning500

warning600

warning700

warning800

warning900

  <div style="color: colors.warning25"/>
  <div style="color: colors.warning50"/>
  <div style="color: colors.warning100"/>
  <div style="color: colors.warning200"/>
  <div style="color: colors.warning300"/>
  <div style="color: colors.warning400"/>
  <div style="color: colors.warning500"/>
  <div style="color: colors.warning600"/>
  <div style="color: colors.warning700"/>

Information

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

info25

info50

info100

info200

info300

info400

info500

info600

info700

info800

info900

  <div style="color: colors.information25"/>
  <div style="color: colors.information50"/>
  <div style="color: colors.information100"/>
  <div style="color: colors.information200"/>
  <div style="color: colors.information300"/>
  <div style="color: colors.information400"/>
  <div style="color: colors.information500"/>
  <div style="color: colors.information600"/>
  <div style="color: colors.information700"/>

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.

error25

error50

error100

error200

error300

error400

error500

error600

error700

error800

error900

  <div style="color: colors.error25"/>
  <div style="color: colors.error50"/>
  <div style="color: colors.error100"/>
  <div style="color: colors.error200"/>
  <div style="color: colors.error300"/>
  <div style="color: colors.error400"/>
  <div style="color: colors.error500"/>
  <div style="color: colors.error600"/>
  <div style="color: colors.error700"/>

Do you have feedback?

Please let us know to make it better

Send Feedback