CSS Variables

Preview

/* Generated by UI Archive — ui-archive.com */

:root {
  /* Colors */
  --color-tatami-color-gray-100: #f9f9f8;
  --color-tatami-color-gray-400: #a39e98;
  --color-tatami-color-gray-500: #78736f;
  --color-tatami-color-gray-700: #494744;
  --color-tatami-color-gray-900: #191918;
  --color-tatami-color-red-200: #fdd3cd;
  --color-tatami-color-red-300: #ff8b7c;
  --color-tatami-color-red-400: #f77463;
  --color-tatami-color-red-500: #f64932;
  --color-tatami-color-red-600: #e32d14;
  --color-tatami-color-red-700: #b01601;
  --color-tatami-color-red-800: #6f0d00;
  --color-tatami-color-red-900: #4f0900;
  --color-tatami-color-orange-200: #ffdec4;
  --color-tatami-color-orange-300: #ffad71;
  --color-tatami-color-orange-400: #ff8a33;
  --color-tatami-color-orange-500: #ff6d00;
  --color-tatami-color-orange-600: #dd5b00;
  --color-tatami-color-orange-700: #ab4a00;
  --color-tatami-color-orange-800: #793400;
  --color-tatami-color-orange-900: #532200;
  --color-tatami-color-yellow-100: #fff5e0;

  /* Typography */
  --font-size-sf-pro: 12px;
  --font-size-sf-pro-rounded: 16px;
  --font-size-lyon-text: 17px;
  --font-size-notioninter-14px-500: 14px;
  --font-size-notioninter-24px-500: 24px;
  --font-size-notioninter-40px-400: 40px;
  --font-size-notioninter-72px-500: 72px;
  --font-size-notioninter-22px-700: 22px;
  --font-size-notioninter-20px-600: 20px;
  --font-size-lyon-text-18px-400: 18px;
  --font-size-notioninter-0px-400: 0px;
  --font-size-notioninter-54px-700: 54px;
…

All Tokens