# CloudPulse Brand Guidelines

## 1. Brand Overview

CloudPulse is a cloud monitoring SaaS platform dedicated to delivering real-time cloud infrastructure visibility. Our brand embodies precision, reliability, and clarity—helping teams gain comprehensive insight into their cloud environments with confidence.

### Mission

To provide real-time cloud infrastructure visibility that empowers organizations to monitor, understand, and optimize their cloud operations seamlessly.

### Brand Promise

CloudPulse delivers instant, actionable insights into cloud infrastructure health and performance, enabling teams to respond to issues before they impact business operations.

---

## 2. Color Palette

### Primary Color: Electric Blue

- **Hex:** `#2563EB`
- **RGB:** `rgb(37, 99, 235)`
- **HSL:** `hsl(217, 91%, 53%)`
- **Usage:** Primary buttons, headers, brand accents, active states, and key UI elements. This color represents trust, technology, and reliability.

### Secondary Color: Deep Blue

- **Hex:** `#1E40AF`
- **RGB:** `rgb(30, 64, 175)`
- **HSL:** `hsl(217, 72%, 40%)`
- **Usage:** Secondary buttons, hover states, darker accents, and text links. Use this for depth and hierarchy.

### Accent Color: Emerald Green

- **Hex:** `#10B981`
- **RGB:** `rgb(16, 185, 129)`
- **HSL:** `hsl(160, 84%, 39%)`
- **Usage:** Success states, positive indicators, healthy status, completion, and confirmations. This communicates positive outcomes and operational health.

### Neutral Palette: Slate Grays

#### Slate-50

- **Hex:** `#F8FAFC`
- **RGB:** `rgb(248, 250, 252)`
- **Usage:** Lightest backgrounds, subtle containers

#### Slate-100

- **Hex:** `#F1F5F9`
- **RGB:** `rgb(241, 245, 249)`
- **Usage:** Light backgrounds, secondary containers

#### Slate-200

- **Hex:** `#E2E8F0`
- **RGB:** `rgb(226, 232, 240)`
- **Usage:** Borders, dividers, subtle backgrounds

#### Slate-400

- **Hex:** `#94A3B8`
- **RGB:** `rgb(148, 163, 184)`
- **Usage:** Secondary text, placeholder text, disabled states

#### Slate-600

- **Hex:** `#475569`
- **RGB:** `rgb(71, 85, 105)`
- **Usage:** Primary text, body copy

#### Slate-900

- **Hex:** `#0F172A`
- **RGB:** `rgb(15, 23, 42)`
- **Usage:** Dark text, high contrast headers

### Status Colors

| Status        | Color         | Hex       | Usage                              |
| ------------- | ------------- | --------- | ---------------------------------- |
| Success       | Emerald Green | `#10B981` | Healthy systems, completed actions |
| Warning       | Amber         | `#F59E0B` | Alerts requiring attention         |
| Critical      | Red           | `#EF4444` | Errors, critical issues            |
| Informational | Sky Blue      | `#0EA5E9` | Tips, helpful information          |

---

## 3. Typography

### Font Family Recommendations

**Primary Font:** Inter (preferred)

- Modern, clean sans-serif with excellent readability
- Available on Google Fonts for web implementations
- Strong neutrality makes it ideal for SaaS interfaces

**Fallback Options:**

- System fonts stack: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
- Ensures consistency across all devices and platforms

### Font Sizing Scale

| Level        | Size | Weight         | Usage                              |
| ------------ | ---- | -------------- | ---------------------------------- |
| H1           | 32px | 700 (Bold)     | Main page titles, brand statements |
| H2           | 28px | 700 (Bold)     | Section headings                   |
| H3           | 24px | 600 (Semibold) | Subsection titles                  |
| H4           | 20px | 600 (Semibold) | Card headers, prominent labels     |
| H5           | 16px | 600 (Semibold) | Smaller headers, emphasis          |
| Body Large   | 16px | 400 (Regular)  | Primary body text, descriptions    |
| Body Default | 14px | 400 (Regular)  | Standard UI text                   |
| Body Small   | 12px | 400 (Regular)  | Secondary text, timestamps, meta   |
| Caption      | 11px | 400 (Regular)  | Smallest labels, hints             |

### Font Weight Usage

- **700 (Bold):** Main headings, prominent emphasis
- **600 (Semibold):** Secondary headings, action labels, emphasis
- **500 (Medium):** Button text, important labels
- **400 (Regular):** Body text, descriptions, default UI text

### Line Height

- **Headings:** 1.2 (tight vertical spacing)
- **Body Text:** 1.5 (comfortable reading)
- **Captions:** 1.4 (clear small text)

---

## 4. Tone of Voice

### Brand Voice Principles

CloudPulse communicates with **professional credibility** balanced with **approachable warmth**. We speak to both technical experts and cloud decision-makers with respect for their expertise while remaining accessible.

### Tone Guidelines

| Context          | Tone                           | Example                                                 |
| ---------------- | ------------------------------ | ------------------------------------------------------- |
| Error Messages   | Clear & Helpful                | "Connection lost. Reconnecting..." (not "ERROR 503")    |
| Success Messages | Confident & Encouraging        | "Infrastructure is running smoothly across all regions" |
| Documentation    | Expert & Clear                 | Use precise technical language with clear explanations  |
| Marketing        | Aspirational & Credible        | Highlight confidence and peace of mind                  |
| Support          | Empathetic & Solutions-Focused | Acknowledge issues and guide toward resolution          |

### Voice Characteristics

**DO:**

- Use active voice and clear action verbs
- Explain "why" alongside "what"
- Use inclusive language ("we," "our," "you")
- Be concise and eliminate jargon where possible
- Provide reassurance about system reliability
- Use conversational but professional language

**DON'T:**

- Use excessive technical jargon without explanation
- Be overly casual or playful
- Make vague claims without data
- Use passive voice for important instructions
- Overcomplicate simple concepts
- Use fear-based messaging

### Message Hierarchy

1. **Status/Action:** "What's happening right now?"
2. **Impact:** "Why does this matter?"
3. **Resolution:** "What should the user do?"

---

## 5. Logo Usage Rules

### Logo Versions

#### Full Logo (Preferred)

The CloudPulse logo with text is the primary identifier. Use on all primary communications.

**Minimum Size:** 120px width (web), 1 inch width (print)

#### Icon Mark (Symbol Only)

The CloudPulse symbol can be used standalone in:

- Favicon implementations
- App icons
- Social media avatars
- Tight spaces where full logo doesn't fit

**Minimum Size:** 32px × 32px (web), 0.5 inch × 0.5 inch (print)

### Spacing & Clearance

- **Minimum clear space:** Maintain a clearance around the logo equal to the height of the symbol mark
- **Never crowd the logo** with other elements
- **Always maintain proportions** when resizing

### Color Usage

| Background          | Logo Color              | Usage                            |
| ------------------- | ----------------------- | -------------------------------- |
| White/Light         | Electric Blue (#2563EB) | Preferred, high contrast         |
| Dark (Slate-900)    | White                   | Alternative on dark backgrounds  |
| Electric Blue       | White                   | On brand color backgrounds       |
| Colored Backgrounds | White with outline      | When full color isn't accessible |

### Logo Don'ts

- **Never rotate** the logo at arbitrary angles
- **Never skew or distort** the proportions
- **Never add shadows or effects** not in the original design
- **Never change the color** without explicit brand approval
- **Never place on clashing patterns** that reduce visibility
- **Never use the old version** if a new one is available
- **Never invert colors** without maintaining contrast requirements

### File Formats

- **Web:** SVG (preferred), PNG (with transparency)
- **Print:** Vector (EPS, PDF)
- **Social Media:** PNG 1200×1200px minimum
- **Favicon:** ICO 32×32px, PNG 256×256px

---

## 6. Spacing & Layout Principles

### Base Grid System

CloudPulse uses an **8px base grid** for consistent spacing and alignment.

**Grid Values:** 8px, 16px, 24px, 32px, 40px, 48px, 56px, 64px

### Spacing Scale

| Scale | Pixels | Usage                             |
| ----- | ------ | --------------------------------- |
| XS    | 4px    | Micro-spacing within components   |
| S     | 8px    | Padding in buttons, input fields  |
| M     | 16px   | Padding in cards, section spacing |
| L     | 24px   | Spacing between major sections    |
| XL    | 32px   | Top-level padding, page margins   |
| 2XL   | 40px   | Section separations               |
| 3XL   | 48px   | Large block separations           |
| 4XL   | 64px   | Page-level margins                |

### Layout Principles

#### 1. Hierarchy Through Spacing

- Use larger spacing for major sections
- Compress spacing for related elements
- Create visual grouping through consistent gaps

#### 2. Responsive Design

- **Desktop (1200px+):** Full spacing scale, multi-column layouts
- **Tablet (768px-1199px):** Moderate spacing, 2-column where appropriate
- **Mobile (<768px):** Reduced margins (24-32px), single column

#### 3. Container Sizing

- **Max content width:** 1280px
- **Page padding:** 32px on desktop, 24px on tablet, 16px on mobile
- **Column gutter:** 24px between columns

#### 4. Whitespace Strategy

- Embrace whitespace for readability
- Never crowd information
- Use negative space to highlight important content
- Maintain consistent air around key elements

### Card & Container Spacing

- **Card padding:** 24px
- **Card-to-card gap:** 16px
- **Border radius:** 8px (default), 12px (prominent), 4px (subtle)

### Typography Spacing

- **Heading to body text:** 12px
- **Paragraph spacing:** 16px
- **List item spacing:** 8px
- **Margin below headings:** 16px

### Component Spacing

| Component   | Internal Padding | External Margin |
| ----------- | ---------------- | --------------- |
| Button      | 8px 16px         | 8px             |
| Input Field | 8px 12px         | 12px            |
| Badge       | 4px 8px          | 4px             |
| Alert       | 16px             | 16px            |
| Menu Item   | 12px 16px        | 4px             |

---

## 7. Visual Design System

### Borders & Dividers

- **Primary divider:** 1px solid #E2E8F0 (Slate-200)
- **Subtle divider:** 1px solid #F1F5F9 (Slate-100)
- **Emphasis divider:** 2px solid #2563EB (Electric Blue)

### Shadows

| Level       | CSS                               | Usage                           |
| ----------- | --------------------------------- | ------------------------------- |
| Elevation 1 | `0 1px 2px rgba(0, 0, 0, 0.05)`   | Subtle lift on cards, dropdowns |
| Elevation 2 | `0 4px 6px rgba(0, 0, 0, 0.07)`   | Standard card shadow            |
| Elevation 3 | `0 10px 15px rgba(0, 0, 0, 0.1)`  | Modal overlay, floating panels  |
| Elevation 4 | `0 20px 25px rgba(0, 0, 0, 0.15)` | Maximum elevation, emphasis     |

### Corner Radius

- **Sharp:** 0px (rarely used, specific data tables)
- **Subtle:** 4px (input fields, small buttons)
- **Default:** 8px (cards, standard components)
- **Rounded:** 12px (prominent components, focus)
- **Pill:** 9999px (pills, full-round buttons, badges)

### Opacity Levels

| Level      | Opacity | Usage                           |
| ---------- | ------- | ------------------------------- |
| Disabled   | 50%     | Disabled buttons, inactive text |
| Hover      | 80%     | Subtle interaction feedback     |
| Focus      | 100%    | Primary interaction state       |
| Background | 5-10%   | Subtle background tints         |

---

## 8. Photography & Imagery

### Photography Style

CloudPulse imagery should reflect:

- **Modern tech environments** (data centers, monitoring dashboards)
- **Real people** engaged with cloud technology
- **Clear, well-lit subjects** with minimal distractions
- **Professional quality** over stylized or overly artistic

### Image Treatment

- **Saturation:** Natural, slightly enhanced
- **Color grading:** Align with brand color palette where appropriate
- **Filters:** Minimal; maintain clarity and professionalism
- **Composition:** Rule of thirds, balanced framing

### Icon Style

- **Stroke weight:** 2px (consistent across all icons)
- **Corner radius:** 2px (for rounded rectangles in icons)
- **Size:** Design at 24px base, scale as needed (16px, 32px, 48px)
- **Color:** Use primary brand colors and status colors
- **Clarity:** Icons must remain recognizable at minimum size (16px)

---

## 9. Voice Examples

### Error Communication

**Avoid:** "Error 500: Internal Server Error"
**Prefer:** "We're experiencing temporary monitoring delays. Your infrastructure is still being tracked—we're restoring full visibility now."

### Feature Announcement

**Avoid:** "New monitoring capabilities added"
**Prefer:** "Real-time cross-region monitoring is now available. See infrastructure health across all your cloud regions in a single dashboard."

### Support Interaction

**Avoid:** "We cannot assist with this issue."
**Prefer:** "This falls outside our direct support scope, but I'd recommend checking [resource]. Here's how we've helped similar customers solve this..."

---

## 10. Brand Dos and Don'ts

### DO

✓ Maintain consistent color usage across all materials
✓ Use clear, jargon-light language
✓ Respect the grid system for alignment
✓ Provide adequate whitespace
✓ Update brand materials promptly
✓ Test accessibility (contrast, readability)
✓ Use official logo files
✓ Maintain professional tone in all communications

### DON'T

✗ Mix typefaces excessively
✗ Use outdated logo versions
✗ Apply arbitrary effects to brand elements
✗ Crowd information; use breathing room
✗ Use brand colors in low-contrast combinations
✗ Create off-brand variations without approval
✗ Use casual language in technical documentation
✗ Ignore spacing and alignment guidelines

---

## 11. Accessibility Considerations

### Color Contrast

All text must meet WCAG AA standards:

- **Normal text:** Minimum 4.5:1 contrast ratio
- **Large text (18px+):** Minimum 3:1 contrast ratio

**Key Combinations:**

- Electric Blue (#2563EB) on white: 4.57:1 ✓
- Emerald Green (#10B981) on white: 4.96:1 ✓
- Slate-400 (#94A3B8) on white: 4.51:1 ✓

### Typography Accessibility

- Never rely on color alone to communicate status
- Use icons + color + text for critical information
- Maintain minimum 16px font size for body text on mobile
- Use sufficient line-height (1.4-1.6) for readability

### Interactive Elements

- Minimum touch target: 44px × 44px
- Visible focus indicators for keyboard navigation
- Clear hover and active states
- Adequate spacing between clickable elements

---

## 12. Implementation Guidelines

### Web Applications

- Use CSS variables for brand colors for easy theming
- Implement responsive typography using flexible sizing
- Ensure all interactive elements meet accessibility standards
- Test color contrast in all environments

### Print Materials

- Use CMYK color model for accurate printing
- Provide color specifications to printing vendors
- Maintain 1/8 inch clearance around logo
- Test proofs before final printing

### Digital Communications

- Use brand colors consistently in emails and documents
- Maintain typography hierarchy in presentations
- Apply spacing rules for visual consistency
- Include proper attribution for imagery

---

## 13. Approval & Updates

**Brand Guardian:** Design & Marketing Team
**Last Updated:** April 15, 2026
**Next Review:** October 2026

For brand guideline questions or to request exceptions, contact the brand team.

---

**CloudPulse Brand Guidelines** | Effective April 2026
