@aragon/gov-ui-kit/src/theme/tokens/primitives/colors.css

Implementation of the Aragon's Governance UI Kit

@theme {
  --color-*: initial;

  /* Primary */
  --color-primary-50: #f5f8ff;
  --color-primary-100: #c4d7ff;
  --color-primary-200: #93b2ff;
  --color-primary-300: #628cfe;
  --color-primary-400: #3164fa;
  --color-primary-500: #003bf5;
  --color-primary-600: #0037d2;
  --color-primary-700: #0031ad;
  --color-primary-800: #002985;
  --color-primary-900: #001f5c;

  /* Neutral */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f5f7fa;
  --color-neutral-100: #e4e7eb;
  --color-neutral-200: #cbd2d9;
  --color-neutral-300: #9aa5b1;
  --color-neutral-400: #7b8794;
  --color-neutral-500: #616e7c;
  --color-neutral-600: #52606d;
  --color-neutral-700: #3e4c59;
  --color-neutral-800: #323f4b;
  --color-neutral-900: #1f2933;

  /* Info */
  --color-info-100: #d1fdfa;
  --color-info-200: #a4f9fb;
  --color-info-300: #75e8f3;
  --color-info-400: #52cfe7;
  --color-info-500: #1eadd8;
  --color-info-600: #1588b9;
  --color-info-700: #0f669b;
  --color-info-800: #09497d;
  --color-info-900: #053467;

  /* Success */
  --color-success-100: #f3fccc;
  --color-success-200: #e4f99a;
  --color-success-300: #ccef66;
  --color-success-400: #b2e040;
  --color-success-500: #8ecc0a;
  --color-success-600: #74af07;
  --color-success-700: #5c9205;
  --color-success-800: #467603;
  --color-success-900: #366101;

  /* Warning */
  --color-warning-100: #fff3d6;
  --color-warning-200: #ffe4ad;
  --color-warning-300: #ffd083;
  --color-warning-400: #ffbe65;
  --color-warning-500: #ff9f32;
  --color-warning-600: #db7d24;
  --color-warning-700: #b75e19;
  --color-warning-800: #93430f;
  --color-warning-900: #7a3009;

  /* Critical */
  --color-critical-100: #fee4d6;
  --color-critical-200: #fec3ae;
  --color-critical-300: #fd9a86;
  --color-critical-400: #fb7467;
  --color-critical-500: #f93636;
  --color-critical-600: #d62736;
  --color-critical-700: #b31b35;
  --color-critical-800: #901132;
  --color-critical-900: #770a30;

  /* Transparent */
  --color-transparent: transparent;
}

@utility gradient-neutral-50-transparent-to-b {
  @apply bg-linear-to-b from-neutral-50/100 to-neutral-50/0;
}

@utility gradient-neutral-50-transparent-to-t {
  @apply bg-linear-to-t from-neutral-50/100 to-neutral-50/0;
}