anvil-hosting/design-system/tokens.json

{
  "colors": {
    "brand": {
      "400": { "value": "#38bdf8", "type": "color", "description": "Sky blue light - hover states, accents" },
      "500": { "value": "#0ea5e9", "type": "color", "description": "Primary brand color - buttons, links" },
      "600": { "value": "#0284c7", "type": "color", "description": "Brand dark - pressed states" },
      "900": { "value": "#0c4a6e", "type": "color", "description": "Brand darkest - subtle backgrounds" }
    },
    "purple": {
      "400": { "value": "#c084fc", "type": "color", "description": "Purple light - accents" },
      "500": { "value": "#a855f7", "type": "color", "description": "Purple primary - secondary accent" },
      "600": { "value": "#9333ea", "type": "color", "description": "Purple dark" }
    },
    "dark": {
      "700": { "value": "#334155", "type": "color", "description": "Dark light - borders, dividers" },
      "800": { "value": "#1e293b", "type": "color", "description": "Dark medium - cards, panels" },
      "900": { "value": "#0b1120", "type": "color", "description": "Dark deepest - page background" }
    },
    "slate": {
      "100": { "value": "#f1f5f9", "type": "color" },
      "200": { "value": "#e2e8f0", "type": "color", "description": "Primary text color" },
      "300": { "value": "#cbd5e1", "type": "color", "description": "Secondary text" },
      "400": { "value": "#94a3b8", "type": "color", "description": "Muted text" },
      "500": { "value": "#64748b", "type": "color", "description": "Disabled text" },
      "700": { "value": "#334155", "type": "color", "description": "Borders" }
    },
    "semantic": {
      "success": { "value": "#22c55e", "type": "color", "description": "Green - success states" },
      "warning": { "value": "#eab308", "type": "color", "description": "Yellow - warning states" },
      "error": { "value": "#ef4444", "type": "color", "description": "Red - error states" },
      "info": { "value": "#3b82f6", "type": "color", "description": "Blue - info states" }
    }
  },
  "typography": {
    "fontFamily": {
      "sans": { "value": "-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif", "type": "fontFamily" },
      "mono": { "value": "'JetBrains Mono', monospace", "type": "fontFamily" }
    },
    "fontSize": {
      "xs": { "value": "12px", "lineHeight": "16px" },
      "sm": { "value": "14px", "lineHeight": "20px" },
      "base": { "value": "16px", "lineHeight": "24px" },
      "lg": { "value": "18px", "lineHeight": "28px" },
      "xl": { "value": "20px", "lineHeight": "28px" },
      "2xl": { "value": "24px", "lineHeight": "32px" },
      "3xl": { "value": "30px", "lineHeight": "36px" },
      "4xl": { "value": "36px", "lineHeight": "40px" },
      "5xl": { "value": "48px", "lineHeight": "48px" },
      "6xl": { "value": "60px", "lineHeight": "60px" }
    },
    "fontWeight": {
      "normal": { "value": "400" },
      "medium": { "value": "500" },
      "semibold": { "value": "600" },
      "bold": { "value": "700" }
    },
    "letterSpacing": {
      "tight": { "value": "-0.025em" },
      "normal": { "value": "0" },
      "wide": { "value": "0.025em" }
    }
  },
  "spacing": {
    "0": { "value": "0px" },
    "1": { "value": "4px" },
    "2": { "value": "8px" },
    "3": { "value": "12px" },
    "4": { "value": "16px" },
    "5": { "value": "20px" },
    "6": { "value": "24px" },
    "8": { "value": "32px" },
    "10": { "value": "40px" },
    "12": { "value": "48px" },
    "16": { "value": "64px" },
    "20": { "value": "80px" },
    "24": { "value": "96px" }
  },
  "borderRadius": {
    "sm": { "value": "4px" },
    "md": { "value": "6px" },
    "lg": { "value": "8px" },
    "xl": { "value": "12px" },
    "2xl": { "value": "16px" },
    "3xl": { "value": "24px" },
    "full": { "value": "9999px" }
  },
  "effects": {
    "blur": {
      "sm": { "value": "8px" },
      "md": { "value": "12px" },
      "lg": { "value": "16px" },
      "xl": { "value": "24px" },
      "3xl": { "value": "64px" }
    },
    "shadow": {
      "sm": { "value": "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)" },
      "md": { "value": "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)" },
      "lg": { "value": "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)" },
      "xl": { "value": "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)" },
      "2xl": { "value": "0 25px 50px -12px rgba(0,0,0,0.25)" },
      "glow-brand": { "value": "0 0 40px rgba(56, 189, 248, 0.3)" },
      "glow-purple": { "value": "0 0 40px rgba(168, 85, 247, 0.3)" }
    }
  },
  "components": {
    "glassPanel": {
      "background": "rgba(30, 41, 59, 0.4)",
      "backdropBlur": "12px",
      "border": "1px solid rgba(255, 255, 255, 0.05)"
    },
    "glassCard": {
      "background": "linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(30, 41, 59, 0.3) 100%)",
      "backdropBlur": "20px",
      "border": "1px solid rgba(255, 255, 255, 0.08)",
      "hoverBackground": "linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 41, 59, 0.5) 100%)",
      "hoverBorder": "1px solid rgba(255, 255, 255, 0.15)",
      "hoverShadow": "0 20px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(56, 189, 248, 0.1)"
    },
    "gradientText": {
      "background": "linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #38bdf8 100%)",
      "backgroundSize": "200% 100%"
    },
    "button": {
      "primary": {
        "background": "linear-gradient(135deg, #0ea5e9, #38bdf8)",
        "hoverBackground": "linear-gradient(135deg, #38bdf8, #0ea5e9)",
        "shadow": "0 0 30px rgba(56, 189, 248, 0.5)"
      },
      "secondary": {
        "background": "rgba(30, 41, 59, 0.6)",
        "border": "1px solid rgba(255, 255, 255, 0.1)"
      }
    }
  },
  "gradients": {
    "brandPurple": {
      "value": "linear-gradient(135deg, #38bdf8 0%, #a855f7 100%)",
      "description": "Primary gradient - hero, CTAs"
    },
    "brandPurpleSoft": {
      "value": "linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%)",
      "description": "Soft gradient - backgrounds"
    },
    "darkGlass": {
      "value": "linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(30, 41, 59, 0.3) 100%)",
      "description": "Glass card background"
    }
  }
}