# KumoOps Brand Guide

> **Cloud operations made simple**
> Mascot: Kumo the Red Panda

Machine-readable brand guidelines for KumoOps. For structured data, see [`/design-tokens.json`](/design-tokens.json).

---

## Brand Identity

- **Name:** KumoOps
- **Website:** [https://kumo-ops.com](https://kumo-ops.com)
- **Tagline:** Cloud operations made simple
- **Mascot:** Kumo the Red Panda
- **Positioning:** KumoOps is your CloudSecOps team. We prioritize security in every aspect of our cloud operations services, supporting all major providers with full flexibility. We become an extension of your team, handling CloudSecOps end-to-end with 99.95% SLA and zero minutes of release downtime.

---

## Logo Assets

All logo files are served as static assets at stable URLs.

| Variant | Format | URL | Notes |
|---------|--------|-----|-------|
| Icon (Kumo mascot) | WebP | [`/assets/kumo-logo.webp`](/assets/kumo-logo.webp) | 1:1 aspect ratio, use for favicons/avatars |
| Full Logo (Light BG) | SVG | [`/assets/kumoops-logo-full-light.svg`](/assets/kumoops-logo-full-light.svg) | Dark text, for white/light backgrounds |
| Full Logo (Dark BG) | SVG | [`/assets/kumoops-logo-full-dark.svg`](/assets/kumoops-logo-full-dark.svg) | White text, for dark/colored backgrounds |
| Full Logo (Light BG) | PNG 800px | [`/assets/kumoops-logo-full-light-800px.png`](/assets/kumoops-logo-full-light-800px.png) | Raster, light background variant |
| Full Logo (Dark BG) | PNG 800px | [`/assets/kumoops-logo-full-dark-800px.png`](/assets/kumoops-logo-full-dark-800px.png) | Raster, dark background variant |
| Favicon | ICO | [`/favicon-48x48.ico`](/favicon-48x48.ico) | 48×48 favicon |

### Logo Composition

The full logo combines the Kumo mascot icon with the "KumoOps" wordmark:
- **Font:** Poppins SemiBold (600)
- **"Kumo"** — foreground color (`#1a1a2e` on light, `#FFFFFF` on dark)
- **"Ops"** — primary red (`#EB5247`)
- **Gap:** 12px between icon and wordmark
- **Alignment:** vertically centered

### Logo Rules

- Clear space: 0.5× logo height on all sides
- Minimum digital size: 40px height
- Minimum print size: 10mm height
- Recommended sizes: favicon 16–32px, app icon 180–512px, social avatar 400px, website header 40–60px

### Logo Don'ts

- Do not stretch, distort, or rotate
- Do not change logo colors outside approved variations
- Do not add effects like shadows or gradients
- Do not place on busy backgrounds

---

## Color Palette

### Primary Colors

| Name | Hex | RGB | HSL | Usage |
|------|-----|-----|-----|-------|
| Fire Engine Red | `#EB5247` | 235, 82, 71 | `4 80% 60%` | Primary CTAs, brand accents, interactive elements |
| Rich Black | `#1F242E` | 31, 36, 46 | `220 20% 15%` | Text, dark backgrounds, secondary buttons |
| Cloud White | `#F9FAFB` | 249, 250, 251 | `200 15% 98%` | Page backgrounds |
| Soft Gray | `#F1F3F4` | 241, 243, 244 | `200 10% 95%` | Subtle backgrounds, disabled states |

### Semantic Colors

| Name | Hex | RGB | HSL | Usage |
|------|-----|-----|-----|-------|
| Success Green | `#16A34A` | 22, 163, 74 | `142 76% 36%` | Success states, confirmations |
| Warning Amber | `#F59E0B` | 245, 158, 11 | `38 92% 50%` | Warning states, caution messages |
| Error Red | `#EF4444` | 239, 68, 68 | `0 84% 60%` | Error states, destructive actions |
| Info Blue | `#3B82F6` | 59, 130, 246 | `221 83% 53%` | Informational messages, links |

### Color Rules

**DO:**
- Use Fire Engine Red (`#EB5247`) for primary CTAs, active states, and brand accents
- Use Rich Black (`#1F242E`) as the primary dark/secondary color
- Maintain WCAG AA contrast ratios for accessibility

**DON'T:**
- Use Fire Engine Red for large background areas
- Create new color variations outside the defined palette
- Use low contrast color combinations for text

---

## Typography

- **Font Family:** Poppins (exclusively)
- **Font Stack:** `'Poppins', system-ui, -apple-system, sans-serif`
- **Weights:** Thin (100), Extra Light (200), Light (300), Regular (400), Medium (500), Semi Bold (600), Bold (700), Extra Bold (800), Black (900)

### Size Scale

| Token | Size |
|-------|------|
| xs | 12px |
| sm | 14px |
| base | 16px |
| lg | 18px |
| xl | 20px |
| 2xl | 24px |
| 3xl | 30px |
| 4xl | 36px |
| 5xl | 48px |
| 6xl | 60px |

### Line Heights

- **tight:** 1.25
- **normal:** 1.5
- **relaxed:** 1.75

### Typography Rules

- Use Poppins as the only font family — never mix with other fonts
- Maintain proper heading hierarchy (H1 → H2 → H3)
- Never set body text smaller than 14px

---

## Spacing & Layout

- **Base unit:** 4px
- **Grid:** 4px increments (4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96)
- **Container max-widths:** sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1400px
- **Section spacing:** `py-16 md:py-24`
- **Content max-width:** `max-w-6xl mx-auto`

### Border Radius

| Token | Value |
|-------|-------|
| none | 0px |
| sm | 4px |
| md | 8px |
| lg | 16px |
| xl | 24px |
| full | 9999px |
| Default `--radius` | 1rem |

### Shadows

- **Card:** `0 4px 20px -4px hsl(200 20% 50% / 0.15)`
- **Card Hover:** `0 8px 30px -4px hsl(200 20% 50% / 0.25)`
- **Button:** `0 4px 14px -2px hsl(1 73% 51% / 0.4)`

---

## UI Components

### Cards
- Default: `rounded-xl border border-border bg-card shadow-card`
- Hover: `shadow-card-hover` with transition
- Padding: `p-6`

### Buttons
- **Primary:** `bg-primary text-primary-foreground` (Fire Engine Red)
- **Secondary:** `bg-secondary text-secondary-foreground` (Rich Black)
- **Outline:** `border border-input bg-transparent`
- **Destructive:** `bg-destructive text-destructive-foreground`

### Animations
- Motion: Framer Motion, duration 0.3–0.5s
- Easing: ease-out
- Entrance: fade up (`opacity: 0, y: 20 → opacity: 1, y: 0`)

---

## Brand Values

- **Security First** — We prioritize security in every aspect of our CloudSecOps services.
- **Cloud Native** — Built for the cloud, supporting all major providers with full flexibility.
- **Zero Downtime** — 99.95% SLA with 0 minutes of release downtime for your applications.
- **Your Team** — We become an extension of your team, handling CloudSecOps end-to-end.

---

## Brand Voice

- Professional yet approachable
- Technical excellence with human touch
- Emphasize reliability and security
- No jargon overload — clear, confident, warm
- Focus on empowering developers and teams

---

## CSS Variables

```css
:root {
  --background: 200 15% 98%;
  --foreground: 200 75% 8%;
  --card: 0 0% 100%;
  --card-foreground: 200 75% 8%;
  --popover: 0 0% 100%;
  --popover-foreground: 200 75% 8%;
  --primary: 4 80% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 20% 15%;
      --secondary-foreground: 0 0% 100%;
  --muted: 200 10% 95%;
  --muted-foreground: 200 10% 40%;
  --accent: 4 80% 95%;
  --accent-foreground: 1 73% 35%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 76% 36%;
  --warning: 38 92% 50%;
  --info: 221 83% 53%;
  --border: 200 15% 90%;
  --input: 200 15% 90%;
  --ring: 1 73% 51%;
  --radius: 1rem;
}
```

---

## Technology Stack

- **Framework:** React + TypeScript + Vite
- **Styling:** Tailwind CSS with shadcn/ui
- **Font loading:** @fontsource/poppins
- **Icons:** Lucide React
- **Routing:** React Router DOM
- **State:** React Query (TanStack Query)
- **Animations:** Framer Motion + tailwindcss-animate

---

## Machine-Readable Assets

| Resource | URL | Format |
|----------|-----|--------|
| Design Tokens | [`/design-tokens.json`](/design-tokens.json) | JSON |
| Brand Guide | [`/brand-guide.md`](/brand-guide.md) | Markdown |
| Icon Logo | [`/assets/kumo-logo.webp`](/assets/kumo-logo.webp) | WebP |
| Full Logo (Light) | [`/assets/kumoops-logo-full-light.svg`](/assets/kumoops-logo-full-light.svg) | SVG |
| Full Logo (Dark) | [`/assets/kumoops-logo-full-dark.svg`](/assets/kumoops-logo-full-dark.svg) | SVG |
| Full Logo PNG (Light) | [`/assets/kumoops-logo-full-light-800px.png`](/assets/kumoops-logo-full-light-800px.png) | PNG |
| Full Logo PNG (Dark) | [`/assets/kumoops-logo-full-dark-800px.png`](/assets/kumoops-logo-full-dark-800px.png) | PNG |

---

*© KumoOps. All rights reserved.*