# CloudPulse Brand Guidelines

## Brand Identity

**Product Name:** CloudPulse
**Tagline:** Monitor smarter, respond faster
**Category:** Cloud Monitoring SaaS

## Color Palette

| Role        | Hex     | Usage                                        |
| ----------- | ------- | -------------------------------------------- |
| Primary     | #2563EB | CTAs, links, primary UI elements             |
| Secondary   | #7C3AED | Accents, gradients, secondary actions        |
| Accent      | #10B981 | Success states, highlights, positive metrics |
| Dark BG     | #0F172A | Dark mode background                         |
| Light BG    | #F8FAFC | Light mode background                        |
| Text Dark   | #1E293B | Primary text on light backgrounds            |
| Text Light  | #F1F5F9 | Primary text on dark backgrounds             |
| Muted       | #64748B | Secondary/muted text                         |
| Border      | #E2E8F0 | Borders, dividers (light mode)               |
| Border Dark | #334155 | Borders, dividers (dark mode)                |

## Typography

- **Font Stack:** `system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`
- **Headings:** Bold (700), Title Case
- **Body:** Regular (400), sentence case
- **Scale:** 1.25 ratio (major third)

## Voice & Tone

- **Confident** — CloudPulse knows cloud monitoring
- **Clear** — No jargon; straightforward language
- **Action-oriented** — Strong CTAs with verbs: Start, Get, Try, Monitor, Deploy

## CTA Patterns

- Primary CTA: Solid primary color background, white text
- Secondary CTA: Outlined or ghost style
- Action verbs required: "Start Free Trial", "Get Started", "Try CloudPulse"

## Logo

- Text-based logo: "CloudPulse" with a pulse/wave icon
- SVG inline for performance
- Minimum clear space: 8px around logo

## Spacing System

- Base unit: 4px
- Section padding: 80px–120px vertical
- Card padding: 24px–32px
- Grid gap: 24px–32px

## Responsive Breakpoints

| Name    | Width   |
| ------- | ------- |
| Mobile  | < 640px |
| Tablet  | 640px   |
| Desktop | 1024px  |
| Wide    | 1280px  |

## Accessibility

- WCAG 2.1 AA compliance required
- Minimum contrast ratio: 4.5:1 for normal text, 3:1 for large text
- All interactive elements must have visible focus indicators
- Reduced motion support via `prefers-reduced-motion`
