Edit Cloudflare tokens

{
  "color": {
    "orange": {
      "primary": {
        "$value": "#FF6633",
        "$type": "color",
        "$description": "Primary brand color for CTAs and key UI elements"
      },
      "hover": {
        "$value": "#E65C2E",
        "$type": "color",
        "$description": "Hover state for primary orange elements"
      },
      "light": {
        "$value": "#FFF5F0",
        "$type": "color",
        "$description": "Light orange for subtle backgrounds"
      }
    },
    "base": {
      "white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Pure white for backgrounds and text"
      },
      "black": {
        "$value": "#1F1F1F",
        "$type": "color",
        "$description": "Near-black for primary text"
      }
    },
    "gray": {
      "900": {
        "$value": "#1F2937",
        "$type": "color",
        "$description": "Darkest gray for headings"
      },
      "700": {
        "$value": "#374151",
        "$type": "color",
        "$description": "Dark gray for secondary text"
      },
      "600": {
        "$value": "#4B5563",
        "$type": "color",
        "$description": "Medium-dark gray for tertiary text"
      },
      "500": {
        "$value": "#6B7280",
        "$type": "color",
        "$description": "Medium gray for muted text"
      },
      "400": {
        "$value": "#9CA3AF",
        "$type": "color",
        "$description": "Light-medium gray for placeholders"
      },
      "300": {
        "$value": "#D1D5DB",
        "$type": "color",
        "$description": "Light gray for borders"
      },
      "200": {
        "$value": "#E5E7EB",
        "$type": "color",
        "$description": "Very light gray for subtle borders"
      },
      "100": {
        "$value": "#F3F4F6",
        "$type": "color",
        "$description": "Near-white gray for backgrounds"
      },
      "50": {
        "$value": "#F9FAFB",
        "$type": "color",
        "$description": "Lightest gray for page backgrounds"
      }
    }
  },
  "font": {
    "family": {
      "sans": {
        "$value": "'CF Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif",
        "$type": "fontFamily",
        "$description": "Primary sans-serif font stack"
      },
      "mono": {
        "$value": "'Fira Code', 'Courier New', monospace",
        "$type": "fontFamily",
        "$description": "Monospace font for code"
      }
    },
    "size": {
      "hero": {
        "$value": "72px",
        "$type": "dimension",
        "$description": "Hero headline size"
      },
      "display-xl": {
        "$value": "60px",
        "$type": "dimension",
        "$description": "Extra large display text"
      },
      "display-lg": {
        "$value": "48px",
        "$type": "dimension",
        "$description": "Large display text"
      },
      "display-md": {
        "$value": "36px",
        "$type": "dimension",
        "$description": "Medium display text"
      },
      "heading-lg": {
        "$value": "30px",
        "$type": "dimension",
        "$description": "Large heading"
      },
      "heading-md": {
        "$value": "24px",
        "$type": "dimension",
        "$description": "Medium heading"
      },
      "heading-sm": {
        "$value": "20px",
        "$type": "dimension",
        "$description": "Small heading"
      },
      "body-lg": {
        "$value": "18px",
        "$type": "dimension",
        "$description": "Large body text"
      },
      "body-md": {
        "$value": "16px",
        "$type": "dimension",
        "$description": "Standard body text"
      },
      "body-sm": {
        "$value": "14px",
        "$type": "dimension",
        "$description": "Small body text"
      },
      "label": {
        "$value": "12px",
        "$type": "dimension",
        "$description": "Label and caption text"
      }
    },
    "weight": {
      "normal": {
        "$value": "400",
        "$type": "fontWeight",
        "$description": "Normal weight for body text"
      },
      "medium": {
        "$value": "500",
        "$type": "fontWeight",
        "$description": "Medium weight for labels"
      },
      "semibold": {
        "$value": "600",
        "$type": "fontWeight",
        "$description": "Semi-bold for headings"
      },
      "bold": {
        "$value": "700",
        "$type": "fontWeight",
        "$description": "Bold for hero and display text"
      }
    },
    "lineHeight": {
      "tight": {
        "$value": "1.1",
        "$type": "number",
        "$description": "Tight line height for large headings"
      },
      "snug": {
        "$value": "1.25",
        "$type": "number",
        "$description": "Snug line height for headings"
      },
      "normal": {
        "$value": "1.5",
        "$type": "number",
        "$description": "Normal line height for body text"
      },
      "relaxed": {
        "$value": "1.6",
        "$type": "number",
        "$description": "Relaxed line height for comfortable reading"
      }
    }
  },
  "spacing": {
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Extra small spacing"
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Small spacing"
    },
    "md": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Medium spacing"
    },
    "lg": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Large spacing"
    },
    "xl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Extra large spacing"
    },
    "2xl": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "2X large spacing"
    },
    "3xl": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "3X large spacing"
    },
    "4xl": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "4X large spacing"
    },
    "5xl": {
      "$value": "128px",
      "$type": "dimension",
      "$description": "5X large spacing"
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Small border radius"
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Medium border radius"
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Large border radius"
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Extra large border radius"
    },
    "2xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "2X large border radius"
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Fully rounded corners"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
      "$type": "shadow",
      "$description": "Small shadow for subtle elevation"
    },
    "md": {
      "$value": "0 4px 6px rgba(0, 0, 0, 0.07)",
      "$type": "shadow",
      "$description": "Medium shadow for cards"
    },
    "lg": {
      "$value": "0 10px 15px rgba(0, 0, 0, 0.1)",
      "$type": "shadow",
      "$description": "Large shadow for elevated elements"
    },
    "xl": {
      "$value": "0 20px 25px rgba(0, 0, 0, 0.1)",
      "$type": "shadow",
      "$description": "Extra large shadow for modals"
    }
  },
  "border": {
    "width": {
      "default": {
        "$value": "1px",
        "$type": "dimension",
        "$description": "Default border width"
      },
      "thick": {
        "$value": "2px",
        "$type": "dimension",
        "$description": "Thick border width"
      }
    },
    "color": {
      "default": {
        "$value": "#E5E7EB",
        "$type": "color",
        "$description": "Default border color"
      },
      "strong": {
        "$value": "#D1D5DB",
        "$type": "color",
        "$description": "Strong border color"
      }
    }
  }
}