Color Variables
Core colors
Core colors are used to support user interface design by calling attention to specific elements, such as buttons, callouts, icons, etc.
Color Generation
You can use the DDS Color Generation Figma Plugin to generate custom color palettes for this design system.
/*Primary Variants*/
--dda-primary-0: #000000;
--dda-primary-4: #001110;
--dda-primary-5: #001413;
--dda-primary-6: #001716;
--dda-primary-10: #00201F;
--dda-primary-12: #002423;
--dda-primary-17: #00302F;
--dda-primary-20: #003735;
--dda-primary-22: #003C3A;
--dda-primary-24: #00413F;
--dda-primary-25: #004341;
--dda-primary-30: #00504E;
--dda-primary-35: #005D5A;
--dda-primary-40: #006A67;
--dda-primary-50: #008582;
--dda-primary-60: #00A19E;
--dda-primary-70: #21BEBA;
--dda-primary-80: #4DDAD6;
--dda-primary-87: #66EEE9;
--dda-primary-90: #6FF7F2;
--dda-primary-92: #76FDF8;
--dda-primary-94: #99FFFA;
--dda-primary-95: #D0F5F4;
--dda-primary-96: #C2FFFB;
--dda-primary-98: #E3FFFD;
--dda-primary-99: #F2FFFD;
--dda-primary-100: #FFFFFF;
/*Secondary Variants*/
--dda-secondary-0: #000000;
--dda-secondary-4: #000836;
--dda-secondary-5: #000A3D;
--dda-secondary-6: #000C43;
--dda-secondary-10: #001257;
--dda-secondary-12: #001561;
--dda-secondary-17: #092072;
--dda-secondary-20: #132778;
--dda-secondary-22: #192C7D;
--dda-secondary-24: #1E3181;
--dda-secondary-25: #213484;
--dda-secondary-30: #2E4090;
--dda-secondary-35: #3B4C9C;
--dda-secondary-40: #4758A9;
--dda-secondary-50: #6071C4;
--dda-secondary-60: #7A8BE0;
--dda-secondary-70: #95A6FD;
--dda-secondary-80: #B9C3FF;
--dda-secondary-87: #D2D8FF;
--dda-secondary-90: #DDE1FF;
--dda-secondary-92: #E5E6FF;
--dda-secondary-94: #ECECFF;
--dda-secondary-95: #F0EFFF;
--dda-secondary-96: #F3F2FF;
--dda-secondary-98: #FBF8FF;
--dda-secondary-99: #FEFBFF;
--dda-secondary-100: #FFFFFF;