TypeScript Tokens

Preview

/**
 * Generated by UI Archive — ui-archive.com
 * Domain: notion.so
 * Snapshot: 2026-11-15
 * Format: W3C DTCG compatible
 * Token names preserve original CSS variable names
 */

export const tokens = {
  "color": {
    "tatami-color-gray-100": "#f9f9f8",
    "tatami-color-gray-400": "#a39e98",
    "tatami-color-gray-500": "#78736f",
    "tatami-color-gray-700": "#494744",
    "tatami-color-gray-900": "#191918",
    "tatami-color-red-200": "#fdd3cd",
    "tatami-color-red-300": "#ff8b7c",
    "tatami-color-red-400": "#f77463",
    "tatami-color-red-500": "#f64932",
    "tatami-color-red-600": "#e32d14",
    "tatami-color-red-700": "#b01601",
    "tatami-color-red-800": "#6f0d00",
    "tatami-color-red-900": "#4f0900",
    "tatami-color-orange-200": "#ffdec4",
    "tatami-color-orange-300": "#ffad71",
    "tatami-color-orange-400": "#ff8a33",
    "tatami-color-orange-500": "#ff6d00",
    "tatami-color-orange-600": "#dd5b00",
    "tatami-color-orange-700": "#ab4a00",
    "tatami-color-orange-800": "#793400",
    "tatami-color-orange-900": "#532200",
    "tatami-color-yellow-100": "#fff5e0"
  },
  "fontSize": {
    "sf-pro": "12px",
    "sf-pro-rounded": "16px",
    "lyon-text": "17px",
    "notioninter-14px-500": "14px",
    "notioninter-24px-500": "24px",
    "notioninter-40px-400": "40px",
…

All Tokens