{
  "version": "1.0.0",
  "lastUpdated": "2025-01-14",
  "brand": {
    "name": "KumoOps",
    "tagline": "Cloud operations made simple",
    "mascot": "Kumo the Red Panda"
  },
  "colors": {
    "primary": {
      "name": "Fire Engine Red",
      "hex": "#EB5247",
      "hsl": "4 80% 60%",
      "rgb": { "r": 235, "g": 82, "b": 71 },
      "usage": "Primary CTAs, brand accents, interactive elements"
    },
    "secondary": {
      "name": "Rich Black",
      "hex": "#1F242E",
      "hsl": "220 20% 15%",
      "rgb": { "r": 31, "g": 36, "b": 46 },
      "usage": "Text, dark backgrounds, secondary buttons"
    },
    "background": {
      "name": "Cloud White",
      "hex": "#F9FAFB",
      "hsl": "200 15% 98%",
      "rgb": { "r": 249, "g": 250, "b": 251 },
      "usage": "Page backgrounds"
    },
    "muted": {
      "name": "Soft Gray",
      "hex": "#F1F3F4",
      "hsl": "200 10% 95%",
      "rgb": { "r": 241, "g": 243, "b": 244 },
      "usage": "Subtle backgrounds, disabled states"
    },
    "success": {
      "name": "Success Green",
      "hex": "#16A34A",
      "hsl": "142 76% 36%",
      "rgb": { "r": 22, "g": 163, "b": 74 },
      "usage": "Success states, confirmations"
    },
    "warning": {
      "name": "Warning Amber",
      "hex": "#F59E0B",
      "hsl": "38 92% 50%",
      "rgb": { "r": 245, "g": 158, "b": 11 },
      "usage": "Warning states, caution messages"
    },
    "error": {
      "name": "Error Red",
      "hex": "#EF4444",
      "hsl": "0 84% 60%",
      "rgb": { "r": 239, "g": 68, "b": 68 },
      "usage": "Error states, destructive actions"
    },
    "info": {
      "name": "Info Blue",
      "hex": "#3B82F6",
      "hsl": "221 83% 53%",
      "rgb": { "r": 59, "g": 130, "b": 246 },
      "usage": "Informational messages, links"
    }
  },
  "spacing": {
    "unit": "4px",
    "scale": {
      "0": "0px",
      "1": "4px",
      "2": "8px",
      "3": "12px",
      "4": "16px",
      "5": "20px",
      "6": "24px",
      "8": "32px",
      "10": "40px",
      "12": "48px",
      "16": "64px",
      "20": "80px",
      "24": "96px"
    }
  },
  "borderRadius": {
    "none": "0px",
    "sm": "4px",
    "md": "8px",
    "lg": "16px",
    "xl": "24px",
    "full": "9999px"
  },
  "typography": {
    "fontFamily": {
      "primary": "Poppins",
      "fallback": "system-ui, -apple-system, sans-serif",
      "stack": "'Poppins', system-ui, -apple-system, sans-serif"
    },
    "weights": {
      "thin": 100,
      "extralight": 200,
      "light": 300,
      "regular": 400,
      "medium": 500,
      "semibold": 600,
      "bold": 700,
      "extrabold": 800,
      "black": 900
    },
    "sizes": {
      "xs": "12px",
      "sm": "14px",
      "base": "16px",
      "lg": "18px",
      "xl": "20px",
      "2xl": "24px",
      "3xl": "30px",
      "4xl": "36px",
      "5xl": "48px",
      "6xl": "60px"
    },
    "lineHeights": {
      "tight": "1.25",
      "normal": "1.5",
      "relaxed": "1.75"
    }
  },
  "shadows": {
    "card": "0 4px 20px -4px hsl(200 20% 50% / 0.15)",
    "cardHover": "0 8px 30px -4px hsl(200 20% 50% / 0.25)",
    "button": "0 4px 14px -2px hsl(1 73% 51% / 0.4)"
  },
  "logo": {
    "variants": {
      "icon": {
        "name": "Primary Logo (Icon Only)",
        "description": "Kumo the Red Panda mascot - use when space is limited or brand is already established",
        "file": "/assets/kumo-logo.webp",
        "format": "webp",
        "aspectRatio": "1:1",
        "usage": ["Favicons", "App icons", "Social avatars", "Small UI elements"]
      },
      "full": {
        "name": "Primary Logo (Full)",
        "description": "Mascot with 'KumoOps' wordmark - use when brand recognition is needed",
        "composition": {
          "icon": "/assets/kumo-logo.webp",
          "wordmark": {
            "text": "KumoOps",
            "styling": {
              "font": "Poppins",
              "weight": 600,
              "kumo": { "color": "foreground", "hex": "#1a1a2e" },
              "ops": { "color": "primary", "hex": "#EB5247" }
            }
          },
          "gap": "12px",
          "alignment": "center"
        },
        "svg": {
          "template": "<svg width=\"256\" height=\"64\" viewBox=\"0 0 256 64\" xmlns=\"http://www.w3.org/2000/svg\"><defs><style>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&amp;display=swap');.kumo-text{font-family:'Poppins',sans-serif;font-weight:600;font-size:32px;}.kumo-dark{fill:#1a1a2e;}.kumo-primary{fill:#EB5247;}</style></defs><image href=\"{{ICON_URL}}\" x=\"0\" y=\"0\" width=\"64\" height=\"64\"/><text x=\"76\" y=\"42\" class=\"kumo-text\"><tspan class=\"kumo-dark\">Kumo</tspan><tspan class=\"kumo-primary\">Ops</tspan></text></svg>",
          "dimensions": { "width": 256, "height": 64 },
          "placeholders": {
            "ICON_URL": "Replace with absolute URL or base64 data URI of the icon"
          }
        },
        "usage": ["Website headers", "Marketing materials", "Documentation", "Email signatures"]
      }
    },
    "downloads": {
      "icon": {
        "webp": "/assets/kumo-logo.webp"
      },
      "full": {
        "light": {
          "svg": "/assets/kumoops-logo-full-light.svg",
          "png800": "/assets/kumoops-logo-full-light-800px.png"
        },
        "dark": {
          "svg": "/assets/kumoops-logo-full-dark.svg",
          "png800": "/assets/kumoops-logo-full-dark-800px.png"
        }
      },
      "favicon": "/favicon-48x48.ico"
    },
    "minimumSize": {
      "digital": {
        "height": "40px",
        "context": "Web, mobile, digital displays"
      },
      "print": {
        "height": "10mm",
        "context": "Business cards, brochures, signage"
      }
    },
    "clearSpace": {
      "multiplier": 0.5,
      "description": "Minimum clear space equals 0.5x the logo height on all sides"
    },
    "recommendedSizes": {
      "favicon": ["16px", "32px"],
      "appIcon": ["180px", "512px"],
      "socialAvatar": "400px",
      "websiteHeader": "40-60px"
    },
    "donts": [
      "Do not stretch or distort the logo",
      "Do not change the logo colors",
      "Do not add effects like shadows or gradients",
      "Do not place on busy backgrounds",
      "Do not rotate the logo"
    ]
  },
  "breakpoints": {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px",
    "2xl": "1400px"
  },
  "containers": {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px",
    "2xl": "1400px"
  }
}