root-variables.scss

:root {
  --font-title-large: 36px;
  --font-title-small: 24px;
  --font-body: 16px;
  --font-label: 12px;

  --jp-black: #000000;
  --jp-black-80: #2c3338;

  --jp-white: #ffffff;
  --jp-white-off: #f9f9f6;

  --jp-gray: #dcdcde;
  --jp-gray-0: #F6F7F7;
  --jp-gray-5: #dcdcde;
  --jp-gray-10: #c3c4c7;
  --jp-gray-20: #A7AAAD;
  --jp-gray-30: #8c8f94;
  --jp-gray-40: #787C82;
  --jp-gray-50: #646970;
  --jp-gray-60: #50575E;
  --jp-gray-70: #3c434a;
  --jp-gray-80: #2C3338;
  --jp-gray-90: #1d2327;
  --jp-gray-100: #101517;
  --jp-gray-off: #e2e2df;

  --jp-yellow-5: #f5e6b3;
  --jp-yellow-10: #f2cf75;
  --jp-yellow-40: #c08c00;

  --jp-orange-20: #faa754;

  --jp-blue-5: #ced9f2;

  --jp-red-0: #F7EBEC;
  --jp-red-50: #D63638;
  --jp-red-60: #B32D2E;
  --jp-red-80: #8A2424;
  --jp-red: #d63639;

  --jp-pink: #C9356E;

  --jp-green-0: #f0f2eb;
  --jp-green-5: #d0e6b8;
  --jp-green-10: #9dd977;
  --jp-green-20: #64ca43;
  --jp-green-30: #2fb41f;
  --jp-green-40: #069e08;
  --jp-green-50: #008710;
  --jp-green-60: #007117;
  --jp-green-70: #005b18;
  --jp-green-80: #004515;
  --jp-green-90: #003010;
  --jp-green-100: #001c09;
  --jp-green: #069e08;

  --jp-green-primary: var(--jp-green-40);
  --jp-green-secondary: var(--jp-green-30);

  --jp-border-radius: 4px;
  --jp-border-radius-rna: 8px;
  --jp-menu-border-height: 1px;
  --jp-underline-thickness: 2px;

  --jp-modal-padding-large: 32px;
  --jp-modal-padding: 24px;
  --jp-modal-padding-small: 16px;
  --jp-modal-radius: 8px;

  --jp-button-padding: 8px;
  --jp-button-radius: 4px;

  --jp-gap: 16px;

  --jp-highlight: #3858e9;
}