Colors - Fabric

Using Colors

These are the standard Fabric colors that are used across all components and visual elements. Lower opacities of these colors may be used to represent hover states, selection states, etc. Avoid using lower opacities of gray colors.

When referencing colors in code, always use the color name, e.g. "al-tint". Never manually reference the hex color in code, as this makes it difficult to re-style components in the future.

‍

Fabric 1 Colors

al-tint (#F57C00)

Alation Orange

Used for branding and active states.

al-action-link (#009688)

Action Link Teal

Used for buttons, as well as links that do not leave the current page.

al-link (#0288D1)

Link Blue

Used for links that leave the current page.

al-info (#3F51B5)

Info Blue

Used to indicate informational content.

al-win (#4CAF50)

Win Green

Used to indicate positive, or successful content.

al-warning (#FFC107)

Warning Yellow

Used to indicate warnings.

al-error (#D0021B)

Error Red

Used to indicate errors and significant alerts.

al-body (#4E4E4E)

Body Text

Used for body text.

al-sub (#8C8C8C)

Sub Gray

Used for subtext & secondary icons.

al-high (#C8C8C8)

High Gray

Used for empty state UI design elements. Never used for text.

al-medium (#DCDCDC)

Medium Gray

Used for empty state UI design elements. Never used for text.

al-low (#EDEDED)

Low Gray

Used for empty state UI design elements. Never used for text.

Fabric 2 Colors

Fabric 2 colors should be used in all new projects. Some are not referenced in code as of yet, however, you are encouraged to work with your engineering partners to use the new colors.