Edit WorkOS tokens

{
  "color": {
    "primary": {
      "purple": {
        "$value": "#7C3AED",
        "$type": "color",
        "$description": "Primary brand color used for CTAs, headings, and key UI elements"
      },
      "purple-light": {
        "$value": "#A78BFA",
        "$type": "color",
        "$description": "Light purple for hover states and accents"
      },
      "purple-dark": {
        "$value": "#6D28D9",
        "$type": "color",
        "$description": "Dark purple for active states"
      }
    },
    "accent": {
      "blue": {
        "$value": "#6366F1",
        "$type": "color",
        "$description": "Blue accent for gradients and secondary actions"
      },
      "indigo": {
        "$value": "#4F46E5",
        "$type": "color",
        "$description": "Indigo accent for UI elements"
      },
      "teal": {
        "$value": "#14B8A6",
        "$type": "color",
        "$description": "Teal for gradient stops and accents"
      },
      "pink": {
        "$value": "#EC4899",
        "$type": "color",
        "$description": "Pink for gradient stops"
      }
    },
    "success": {
      "green": {
        "$value": "#10B981",
        "$type": "color",
        "$description": "Success green for enabled states and positive actions"
      },
      "green-light": {
        "$value": "#34D399",
        "$type": "color",
        "$description": "Light green for success highlights"
      }
    },
    "text": {
      "primary": {
        "$value": "#111827",
        "$type": "color",
        "$description": "Primary text color for headings and important content"
      },
      "secondary": {
        "$value": "#374151",
        "$type": "color",
        "$description": "Secondary text for body content"
      },
      "tertiary": {
        "$value": "#6B7280",
        "$type": "color",
        "$description": "Tertiary text for muted content and descriptions"
      },
      "quaternary": {
        "$value": "#9CA3AF",
        "$type": "color",
        "$description": "Quaternary text for placeholders"
      }
    },
    "background": {
      "primary": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Primary background color"
      },
      "secondary": {
        "$value": "#F9FAFB",
        "$type": "color",
        "$description": "Secondary background for alternate sections"
      },
      "tertiary": {
        "$value": "#F3F4F6",
        "$type": "color",
        "$description": "Tertiary background for subtle elements"
      },
      "dark": {
        "$value": "#1E293B",
        "$type": "color",
        "$description": "Dark background for cards and sections"
      },
      "dark-alt": {
        "$value": "#1F2937",
        "$type": "color",
        "$description": "Alternative dark background"
      }
    },
    "border": {
      "light": {
        "$value": "#E5E7EB",
        "$type": "color",
        "$description": "Light border color for default borders"
      },
      "medium": {
        "$value": "#D1D5DB",
        "$type": "color",
        "$description": "Medium border for emphasized borders"
      }
    }
  },
  "font": {
    "family": {
      "sans": {
        "$value": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
        "$type": "fontFamily",
        "$description": "Primary sans-serif font stack"
      }
    },
    "size": {
      "display-xl": {
        "$value": "72px",
        "$type": "fontSize",
        "$description": "Extra large display text"
      },
      "display-lg": {
        "$value": "60px",
        "$type": "fontSize",
        "$description": "Large display text for heroes"
      },
      "display-md": {
        "$value": "48px",
        "$type": "fontSize",
        "$description": "Medium display for page titles"
      },
      "heading-xl": {
        "$value": "40px",
        "$type": "fontSize",
        "$description": "Extra large heading"
      },
      "heading-lg": {
        "$value": "36px",
        "$type": "fontSize",
        "$description": "Large heading for sections"
      },
      "heading-md": {
        "$value": "30px",
        "$type": "fontSize",
        "$description": "Medium heading"
      },
      "heading-sm": {
        "$value": "24px",
        "$type": "fontSize",
        "$description": "Small heading for cards"
      },
      "body-lg": {
        "$value": "18px",
        "$type": "fontSize",
        "$description": "Large body text"
      },
      "body-md": {
        "$value": "16px",
        "$type": "fontSize",
        "$description": "Default body text"
      },
      "body-sm": {
        "$value": "14px",
        "$type": "fontSize",
        "$description": "Small text"
      }
    },
    "weight": {
      "regular": {
        "$value": "400",
        "$type": "fontWeight",
        "$description": "Regular font weight"
      },
      "medium": {
        "$value": "500",
        "$type": "fontWeight",
        "$description": "Medium font weight"
      },
      "semibold": {
        "$value": "600",
        "$type": "fontWeight",
        "$description": "Semibold for subheadings"
      },
      "bold": {
        "$value": "700",
        "$type": "fontWeight",
        "$description": "Bold for headings"
      }
    }
  },
  "spacing": {
    "xs": {
      "$value": "8px",
      "$type": "spacing",
      "$description": "Extra small spacing"
    },
    "sm": {
      "$value": "12px",
      "$type": "spacing",
      "$description": "Small spacing"
    },
    "md": {
      "$value": "16px",
      "$type": "spacing",
      "$description": "Medium spacing"
    },
    "lg": {
      "$value": "24px",
      "$type": "spacing",
      "$description": "Large spacing"
    },
    "xl": {
      "$value": "32px",
      "$type": "spacing",
      "$description": "Extra large spacing"
    },
    "2xl": {
      "$value": "48px",
      "$type": "spacing",
      "$description": "2X large spacing"
    },
    "3xl": {
      "$value": "64px",
      "$type": "spacing",
      "$description": "3X large spacing"
    },
    "4xl": {
      "$value": "80px",
      "$type": "spacing",
      "$description": "4X large spacing for sections"
    },
    "5xl": {
      "$value": "96px",
      "$type": "spacing",
      "$description": "5X large spacing"
    },
    "6xl": {
      "$value": "128px",
      "$type": "spacing",
      "$description": "6X large spacing for hero sections"
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "borderRadius",
      "$description": "Small radius for badges"
    },
    "md": {
      "$value": "8px",
      "$type": "borderRadius",
      "$description": "Medium radius for buttons and inputs"
    },
    "lg": {
      "$value": "12px",
      "$type": "borderRadius",
      "$description": "Large radius for cards"
    },
    "xl": {
      "$value": "16px",
      "$type": "borderRadius",
      "$description": "Extra large radius"
    },
    "2xl": {
      "$value": "20px",
      "$type": "borderRadius",
      "$description": "2X large radius for panels"
    },
    "3xl": {
      "$value": "24px",
      "$type": "borderRadius",
      "$description": "3X large radius for hero cards"
    },
    "full": {
      "$value": "9999px",
      "$type": "borderRadius",
      "$description": "Full radius for pills and circles"
    }
  },
  "shadow": {
    "xs": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
      "$type": "shadow",
      "$description": "Extra small shadow"
    },
    "sm": {
      "$value": "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
      "$type": "shadow",
      "$description": "Small shadow"
    },
    "md": {
      "$value": "0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06)",
      "$type": "shadow",
      "$description": "Medium shadow for cards"
    },
    "lg": {
      "$value": "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)",
      "$type": "shadow",
      "$description": "Large shadow for elevated elements"
    },
    "xl": {
      "$value": "0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)",
      "$type": "shadow",
      "$description": "Extra large shadow"
    },
    "2xl": {
      "$value": "0 25px 50px rgba(0, 0, 0, 0.15)",
      "$type": "shadow",
      "$description": "2X large shadow for modals"
    }
  }
}