Design Tokens for Atlas.
| Color | Value | Name | CSS Variable | Description |
|---|---|---|---|---|
#282929 | ColorBlack400 | For use as our main text color. | ||
#000000 | ColorBlack700 | For use of text on Bars, Containers, Lanes, and Milestones to ensure AA Contrast compliancy. | ||
#FFFFFF | ColorWhite400 | For use as a text color on dark elements. | ||
#FFFFFF | ColorWhiteTransparent | For use as the background color of elements which lay on top of surfaces to obscure their contents. This color has an alpha of `0.2`. | ||
#919497 | ColorGray200 | For use as the disabled state text within inputs and other form elements. Also for use as background on pills. | ||
#6A6E72 | ColorGray400 | For use as secodary copy and side navigation. Also for use as default icon color | ||
#F0F3F5 | ColorLightGray100 | For use of teritary buttons in their defaut state and hover and active state for ghost buttons. Also for use of backgrounds to slightly distinguish between white backgrounds. | ||
#E8ECEE | ColorLightGray200 | —— | ||
#DDE1E4 | ColorLightGray300 | —— | ||
#D1D5D9 | ColorLightGray400 | For use as the border color on form inputs and other elements. Also for use on hover, active, and focus state of teritary buttons. | ||
#ECF6FE | ColorBlue100 | For use as the background color on informational alerts and banners. Also for use as the main background on secdondary buttons | ||
#C0E2FC | ColorBlue200 | For use as background color on secondary button's hover state. Also for use as background on pills. | ||
#4FAAE8 | ColorBlue300 | |||
#0A6CB9 | ColorBlue400 | For use as the primary blue for links and buttons. Also for use of icons within informational banners and alerts. | ||
#0757AA | ColorBlue500 | For use as background on primary button's hover state. | ||
#064474 | ColorBlue700 | For use as text on informational banners, alerts, and background elements. Also for use on backgrounds for primary button's focus and active state. | ||
#FEF3EC | ColorOrange100 | For use as a decorative surface color. | ||
#FACEB3 | ColorOrange200 | For use as a decorative surface color. | ||
#F5A370 | ColorOrange300 | For use as a decorative surface color. | ||
#F0782D | ColorOrange400 | For use as a decorative surface color. | ||
#B05821 | ColorOrange500 | For use as a decorative surface color. | ||
#723108 | ColorOrange700 | For use as a decorative surface color. | ||
#FCEFED | ColorRed100 | For use as the background color on destructive alerts and banners. | ||
#F4BDB8 | ColorRed200 | For use as border color on danger button's focused state. Also for use as background on pills. | ||
#E1756C | ColorRed300 | For use as background on pills. | ||
#CD2D1F | ColorRed400 | For use as background color on danger button's default state. Also for use as primary color on connections line. | ||
#AC261A | ColorRed500 | For use as background color on danger button's hover and active state | ||
#8B1F15 | ColorRed600 | —— | ||
#6A1810 | ColorRed700 | For use as background color on danger button's focused state. Also for use as text color on destructive alerts and banners. | ||
#FFF9EB | ColorYellow100 | For use as the background color on warning alerts and banners. | ||
#FFE6AD | ColorYellow200 | For use as background on pills. | ||
#FFD575 | ColorYellow300 | For use as background on pills. | ||
#FFC33D | ColorYellow400 | For use as icon color on warning alerts | ||
#D39E29 | ColorYellow500 | —— | ||
#A67A14 | ColorYellow600 | —— | ||
#7A5500 | ColorYellow700 | For use as text color on warning alerts and banners. Also for use as text color on pills. | ||
#F4FAEF | ColorGreen100 | For use as the background color on success alerts and banners. | ||
#D4ECC0 | ColorGreen200 | For use as background on pills. | ||
#9DCA79 | ColorGreen300 | For use as background on pills. | ||
#65A831 | ColorGreen400 | For use as icon color on success alerts and banners. Also for use on legacy bootstrap buttons. | ||
#457E19 | ColorGreen500 | For use as icon color on success alerts and banners. | ||
#395F1C | ColorGreen700 | For use as text color on success alerts and banners. Also for use as text color on pills. | ||
#F3EFFB | ColorPurple100 | For use as a decorative surface color. | ||
#CDBEEF | ColorPurple200 | For use as a decorative surface color. | ||
#9376D2 | ColorPurple300 | For use as a decorative surface color. | ||
#582DB4 | ColorPurple400 | For use as a decorative surface color. | ||
#301862 | ColorPurple700 | For use as a decorative surface color. | ||
#282929 | ColorTransparentOverlay | For use as the transparent background behind modals and dialogs. This color has an alpha of `0.7`. | ||
#282929 | ColorTransparentShadow | For use as the drop shadow (box-shadow) on windows. | ||
#FFFFFF | ColorTransparentEmpty | —— |