# LVL Up Performance Brand Guidelines

**Version 1.0 | Last Updated: February 2024**

---

## Table of Contents

1. [Brand Overview](#brand-overview)
2. [Logo Usage](#logo-usage)
3. [Color Palette](#color-palette)
4. [Typography](#typography)
5. [Voice & Tone](#voice--tone)
6. [Visual Elements](#visual-elements)
7. [Do's and Don'ts](#dos-and-donts)
8. [Contact](#contact)

---

## Brand Overview

### Our Mission

LVL Up Performance empowers organizations with intuitive, data-driven tools that
transform how teams set goals, give feedback, and drive continuous improvement.

### Our Vision

A world where every team member feels valued, aligned with company goals, and
empowered to reach their full potential through effective performance
management.

### Brand Personality

- **Professional**: We maintain credibility with HR leaders and executives
- **Approachable**: We're friendly and human, never cold or corporate
- **Empowering**: We focus on growth, development, and potential
- **Innovative**: We lead with modern solutions, not legacy thinking
- **Trustworthy**: We handle sensitive people data with care

### Brand Promise

Premium HR and performance management built to scale with your team.

---

## Logo Usage

### Primary Logo

The LVL Up Performance logo is our primary brand identifier. It should be used
consistently across all communications.

**Logo Versions:**

- **Full Logo (Horizontal)**: Primary use for most applications
- **Icon Only**: For small spaces, favicons, and social media avatars
- **Wordmark Only**: When the icon is already established in context

### Clear Space

Maintain clear space around the logo equal to the height of the "L" in "LVL" on
all sides. This ensures the logo remains prominent and readable.

```
Minimum clear space = height of "L"
```

### Minimum Size

| Format    | Minimum Width   |
| --------- | --------------- |
| Digital   | 100px           |
| Print     | 1 inch (25.4mm) |
| Icon Only | 32px / 0.5 inch |

### Logo Placement

- **Light Backgrounds**: Use the dark/full-color logo version
- **Dark Backgrounds**: Use the light/white logo version
- **Busy Backgrounds**: Use the logo on a solid color block with appropriate
  clear space

### Logo Don'ts

- Do not stretch, distort, or rotate the logo
- Do not change the logo colors
- Do not add effects (shadows, gradients, outlines)
- Do not place on busy backgrounds without a clear space container
- Do not recreate the logo using different fonts
- Do not rearrange logo elements

---

## Color Palette

### Primary Colors

| Color Name    | HEX     | RGB          | Usage                                         |
| ------------- | ------- | ------------ | --------------------------------------------- |
| LVL Up Teal   | #14B8A6 | 20, 184, 166 | Primary brand color, CTAs, key highlights     |
| LVL Up Blue   | #3B82F6 | 59, 130, 246 | Secondary accent, links, interactive elements |
| LVL Up Purple | #8B5CF6 | 139, 92, 246 | Tertiary accent, premium features, gradients  |

### Neutral Colors

| Color Name | HEX     | RGB           | Usage                                |
| ---------- | ------- | ------------- | ------------------------------------ |
| Dark Navy  | #0F172A | 15, 23, 42    | Dark mode backgrounds, headers       |
| Slate 800  | #1E293B | 30, 41, 59    | Secondary dark backgrounds           |
| Slate 600  | #475569 | 71, 85, 105   | Body text (dark mode)                |
| Slate 400  | #94A3B8 | 148, 163, 184 | Muted text, placeholders             |
| Slate 200  | #E2E8F0 | 226, 232, 240 | Borders, dividers                    |
| Slate 50   | #F8FAFC | 248, 250, 252 | Light backgrounds                    |
| White      | #FFFFFF | 255, 255, 255 | Light mode backgrounds, text on dark |

### Gradients

**Primary Gradient (CTAs, Headers):**

```css
background: linear-gradient(to right, #14b8a6, #3b82f6);
```

**Accent Gradient (Features, Highlights):**

```css
background: linear-gradient(to right, #3b82f6, #8b5cf6);
```

**Full Spectrum Gradient (Special Use):**

```css
background: linear-gradient(to right, #14b8a6, #3b82f6, #8b5cf6);
```

### Color Accessibility

All color combinations must meet WCAG 2.1 AA standards for contrast:

- Normal text: 4.5:1 minimum contrast ratio
- Large text (18pt+): 3:1 minimum contrast ratio
- UI components: 3:1 minimum contrast ratio

---

## Typography

### Primary Typeface: Inter

Inter is our primary typeface for all digital and print communications. It's
modern, highly legible, and works excellently at all sizes.

**Font Weights:**

- Regular (400): Body text
- Medium (500): UI elements, labels
- Semibold (600): Subheadings, emphasis
- Bold (700): Headlines, CTAs

**Font Stack:**

```css
font-family:
  "Inter",
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  sans-serif;
```

### Monospace Typeface: JetBrains Mono

For code snippets, technical content, and data displays.

**Font Stack:**

```css
font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
```

### Type Scale

| Element    | Size    | Weight         | Line Height |
| ---------- | ------- | -------------- | ----------- |
| H1         | 48-72px | Bold           | 1.1         |
| H2         | 36-48px | Bold           | 1.2         |
| H3         | 24-30px | Semibold       | 1.3         |
| H4         | 20-24px | Semibold       | 1.4         |
| Body Large | 18px    | Regular        | 1.6         |
| Body       | 16px    | Regular        | 1.6         |
| Body Small | 14px    | Regular        | 1.5         |
| Caption    | 12px    | Regular/Medium | 1.4         |

---

## Voice & Tone

### Brand Voice

Our voice is consistent across all communications. It reflects who we are as a
brand.

**Characteristics:**

- **Clear**: We explain complex HR concepts simply
- **Confident**: We know our product and industry
- **Warm**: We're human and approachable
- **Helpful**: We focus on solutions, not problems
- **Professional**: We maintain credibility with HR leaders

### Tone Variations

Tone adapts based on context while maintaining our core voice.

**Marketing (Aspirational):**

> "Transform your team's potential into performance."

**Product (Instructional):**

> "Click 'Add Goal' to create a new objective for your team."

**Support (Empathetic):**

> "We understand this can be frustrating. Let's work together to resolve this."

**Success (Celebratory):**

> "Congratulations! Your team completed 95% of their Q4 goals."

### Writing Guidelines

1. **Be concise**: Get to the point quickly
2. **Use active voice**: "Teams achieve goals" not "Goals are achieved by teams"
3. **Avoid jargon**: Explain technical terms when necessary
4. **Be inclusive**: Use gender-neutral language
5. **Focus on benefits**: Lead with value, not features

### Words We Use

| Instead of...      | We say...                |
| ------------------ | ------------------------ |
| Employees          | Team members, people     |
| HR department      | People team              |
| Performance review | Performance conversation |
| Feedback           | Insights, input          |
| Annual review      | Continuous development   |

### Words We Avoid

- Synergy
- Leverage (as a verb)
- Circle back
- Deep dive
- Low-hanging fruit
- Move the needle
- Rockstar / Ninja

---

## Visual Elements

### Photography Style

- **Authentic**: Real people in real work environments
- **Diverse**: Representing different backgrounds, ages, and abilities
- **Warm**: Natural lighting, welcoming expressions
- **Modern**: Contemporary office settings and remote work environments
- **Action-oriented**: People collaborating, not posed stock photos

### Iconography

We use Lucide icons (open source) with these specifications:

- Stroke width: 2px
- Size: Minimum 16px, standard 24px
- Color: Inherit from context or use brand colors
- Style: Outlined, not filled

### Illustrations

When using custom illustrations:

- Flat, modern style with subtle gradients
- Use brand color palette
- Consistent character proportions
- Accessible and inclusive representation

### Data Visualization

- Use brand colors for charts and graphs
- Ensure sufficient contrast between data series
- Include legends and labels for accessibility
- Prefer simple visualizations over complex ones

---

## Do's and Don'ts

### Do's

- Use the logo from official brand assets
- Maintain minimum clear space around the logo
- Use approved color combinations
- Follow typography guidelines
- Write in our brand voice
- Ensure all content is accessible

### Don'ts

- Don't modify, distort, or recreate the logo
- Don't use unapproved colors
- Don't use fonts other than Inter or system fallbacks
- Don't use stock photos that feel inauthentic
- Don't use language that excludes or diminishes
- Don't skip accessibility considerations

---

## Contact

### Brand Questions

For questions about brand usage, asset requests, or guideline clarifications:

**Email**: brand@lvlupperformance.com

### Press & Media

For press inquiries, interview requests, or media assets:

**Email**: press@lvlupperformance.com

### Download Assets

All brand assets including logos, templates, and additional resources are
available at:

**Press Kit**: https://lvlupperformance.com/press

---

_These guidelines are subject to periodic updates. Please check for the latest
version before starting any major project._

**LVL Up Performance** | Premium HR + Performance Management

Copyright 2024 LVL Up Performance. All rights reserved.