@cfpb/cfpb-design-system/src/elements/abstracts/custom-props.css

CFPB's UI framework

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --beige: #bea96f;
  --beige-30: #f0e8d8;
  --beige-60: #d8c8a0;
  --black: #101820;
  --font-stack: var(--font-stack-branded, system-ui, sans-serif);
  --font-stack-branded: initial;
  --gold: #ff9e1b;
  --gold-10: #fff6ec;
  --gold-20: #fff0dd;
  --gold-30: #ffe8cb;
  --gold-40: #ffe1b9;
  --gold-50: #ffd8a3;
  --gold-60: #ffce8d;
  --gold-70: #ffc372;
  --gold-80: #ffb858;
  --gold-90: #ffab39;
  --gold-dark: #dc731c;
  --gold-mid-dark: #ed881b;
  --gray: #5a5d61;
  --gray-10: #e7e8e9;
  --gray-15: #dcdddf;
  --gray-20: #d2d3d5;
  --gray-30: #c3c4c4;
  --gray-40: #b4b5b6;
  --gray-5: #f7f8f9;
  --gray-50: #a2a3a4;
  --gray-60: #919395;
  --gray-70: #838588;
  --gray-80: #75787b;
  --gray-90: #676a6f;
  --gray-dark: #43484e;
  --gray-darker: #293037;
  --gray-mid-dark: #4f5257;
  --green: #20aa3f;
  --green-10: #f0f8eb;
  --green-20: #e2efd8;
  --green-30: #d4eac6;
  --green-40: #c7e5b3;
  --green-50: #bae0a2;
  --green-60: #addc91;
  --green-70: #93cf7c;
  --green-80: #66c368;
  --green-90: #48b753;
  --green-dark: #1e9642;
  --green-mid-dark: #1fa040;
  --navy: #254b87;
  --navy-10: #f4f6fa;
  --navy-20: #d3daeb;
  --navy-30: #c3cde2;
  --navy-40: #b3c0d9;
  --navy-50: #9daecc;
  --navy-60: #889cc0;
  --navy-70: #6f88b2;
  --navy-80: #5674a3;
  --navy-90: #3e5f95;
  --navy-dark: #002d72;
  --navy-mid-dark: #123c7c;
  --neutral: #8a6c57;
  --neutral-10: #f8f5f2;
  --neutral-20: #e7ddd7;
  --neutral-30: #ddd1c9;
  --neutral-40: #d3c5bc;
  --neutral-50: #c6b4a9;
  --neutral-60: #baa496;
  --neutral-70: #ad9484;
  --neutral-80: #a18573;
  --neutral-90: #957865;
  --neutral-dark: #745745;
  --neutral-mid-dark: #7d604b;
  --pacific: #0072ce;
  --pacific-10: #eff8fd;
  --pacific-20: #d6e8fa;
  --pacific-30: #c3ddf6;
  --pacific-40: #afd2f2;
  --pacific-50: #96c4ed;
  --pacific-60: #7eb7e8;
  --pacific-70: #61a7e2;
  --pacific-80: #4497dc;
  --pacific-90: #2284d5;
  --pacific-dark: #0050b4;
  --pacific-mid-dark: #0061c1;
  --purple: #b4267a;
  --purple-10: #fdf3f8;
  --purple-20: #f0d8e2;
  --purple-30: #ebc9d9;
  --purple-40: #e3b2cc;
  --purple-50: #dc9cbf;
  --purple-60: #d486b2;
  --purple-70: #cd70a5;
  --purple-80: #c55998;
  --purple-90: #be438b;
  --purple-dark: #a01b68;
  --purple-mid-dark: #aa2071;
  --red: #d14124;
  --red-10: #fbefec;
  --red-20: #f7e0d9;
  --red-30: #f3d1c8;
  --red-40: #f0c3b8;
  --red-50: #ebb0a3;
  --red-60: #e79e8e;
  --red-70: #e28875;
  --red-80: #dd735d;
  --red-90: #d75a40;
  --red-dark: #b63014;
  --red-mid-dark: #c3381c;
  --teal: #257675;
  --teal-10: #f0f7f6;
  --teal-20: #d4e7e6;
  --teal-30: #c4dddc;
  --teal-40: #b4d2d1;
  --teal-50: #9ec4c3;
  --teal-60: #89b6b5;
  --teal-70: #70a6a5;
  --teal-80: #579695;
  --teal-90: #3e8685;
  --teal-dark: #005e5d;
  --teal-mid-dark: #126b69;
  --white: #fff;
}