Nav open / close arrow

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.

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.

Last Updated

Sep 5, 2019