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;