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
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.
Default LegionUI
import LegionUIColor.LGNTheme.<colorCode>
Theme
import LegionUILGNColor.<colorCode>
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.
Primary Colors Default LegionUI
Color.LGNTheme.primaryColor.LGNTheme.primary25Color.LGNTheme.primary50Color.LGNTheme.primary100Color.LGNTheme.primary200Color.LGNTheme.primary300Color.LGNTheme.primary400Color.LGNTheme.primary500Color.LGNTheme.primary600
Primary Colors Theme
LGNColor.primaryLGNColor.primary25LGNColor.primary50LGNColor.primary100LGNColor.primary200LGNColor.primary300LGNColor.primary400LGNColor.primary500LGNColor.primary600
Secondary Colors
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.
Secondary Colors Default LegionUI
Color.LGNTheme.secondary25Color.LGNTheme.secondary50Color.LGNTheme.secondary100Color.LGNTheme.secondary200Color.LGNTheme.secondary300Color.LGNTheme.secondary400Color.LGNTheme.secondary500Color.LGNTheme.secondary600Color.LGNTheme.secondary700
Secondary Colors Theme
LGNColor.secondary25LGNColor.secondary50LGNColor.secondary100LGNColor.secondary200LGNColor.secondary300LGNColor.secondary400LGNColor.secondary500LGNColor.secondary600LGNColor.secondary700
Tertiary Colors
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.
Tertiary Colors Default LegionUI
Color.LGNTheme.tertiary25Color.LGNTheme.tertiary50Color.LGNTheme.tertiary100Color.LGNTheme.tertiary200Color.LGNTheme.tertiary300Color.LGNTheme.tertiary400Color.LGNTheme.tertiary500Color.LGNTheme.tertiary600Color.LGNTheme.tertiary700
Tertiary Colors Theme
LGNColor.tertiary25LGNColor.tertiary50LGNColor.tertiary100LGNColor.tertiary200LGNColor.tertiary300LGNColor.tertiary400LGNColor.tertiary500LGNColor.tertiary600LGNColor.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.
Success Colors Default LegionUI
Color.LGNTheme.success25Color.LGNTheme.success50Color.LGNTheme.success100Color.LGNTheme.success200Color.LGNTheme.success300Color.LGNTheme.success400Color.LGNTheme.success500Color.LGNTheme.success600Color.LGNTheme.success700
Success Colors Theme
LGNColor.success25LGNColor.success50LGNColor.success100LGNColor.success200LGNColor.success300LGNColor.success400LGNColor.success500LGNColor.success600LGNColor.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.
Warning Colors Default LegionUI
Color.LGNTheme.warning25Color.LGNTheme.warning50Color.LGNTheme.warning100Color.LGNTheme.warning200Color.LGNTheme.warning300Color.LGNTheme.warning400Color.LGNTheme.warning500Color.LGNTheme.warning600Color.LGNTheme.warning700
Warning Colors Theme
LGNColor.warning25LGNColor.warning50LGNColor.warning100LGNColor.warning200LGNColor.warning300LGNColor.warning400LGNColor.warning500LGNColor.warning600LGNColor.warning700
Information
Infomation colors can communicate that an action is informative section or
these colors are commonly used in awareness for users’ attention.
Infromation Color Default LegionUI
Color.LGNTheme.information25Color.LGNTheme.information50Color.LGNTheme.information100Color.LGNTheme.information200Color.LGNTheme.information300Color.LGNTheme.information400Color.LGNTheme.information500Color.LGNTheme.information600Color.LGNTheme.information700
Information Color Theme
LGNColor.information25LGNColor.information50LGNColor.information100LGNColor.information200LGNColor.information300LGNColor.information400LGNColor.information500LGNColor.information600LGNColor.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.
Error Colors Default LegionUI
Color.LGNTheme.error25Color.LGNTheme.error50Color.LGNTheme.error100Color.LGNTheme.error200Color.LGNTheme.error300Color.LGNTheme.error400Color.LGNTheme.error500Color.LGNTheme.error600Color.LGNTheme.error700
Error Colors Theme
LGNColor.error25LGNColor.error50LGNColor.error100LGNColor.error200LGNColor.error300LGNColor.error400LGNColor.error500LGNColor.error600LGNColor.error700
Do you have feedback?
Please let us know to make it better