BRAND_GUIDELINES.md

# ScaleupXQ Brand Guidelines

A comprehensive guide to our visual identity, tone of voice, and core values. This guide ensures consistency and cohesiveness in every communication, helping amplify the ScaleupXQ brand with clarity and impact.

---

## 1. Colors

### Primary Colors

The revised color palette for ScaleupXQ reflects the company's dynamic and authoritative stance in the sales consulting industry. Bold and expressive, designed to make a strong statement.

| Name | Hex Code | Usage |
|------|----------|-------|
| **Primary 100** | `#6D3EF3` | Primary brand color, headers, key highlights |
| **Primary 200** | `#602DF2` | Darker primary variant, hover states |

### Secondary Colors

These colors reinforce ScaleupXQ's identity and enhance visual communication with potential clients.

| Family | 100 (Lightest) | 200 | 300 | 400 (Darkest) |
|--------|----------------|-----|-----|---------------|
| **Lilac** | `#F4F0FF` | `#E8E0FF` | `#B89EFF` | `#1E0C32` |
| **Tangerine** | `#FFEBE9` | `#FFD8D3` | `#FF8474` | `#391418` |
| **Emerald** | `#E8FAF3` | `#D1F5E6` | `#70E0B1` | `#00302A` |
| **Marigold** | `#FFFDEF` | `#FFFADF` | `#FFF09B` | `#2E2A22` |
| **Zodiac** | `#F2FCFE` | `#E4F9FD` | `#ABECFA` | `#001630` |
| **Sierra** | `#FEF4EC` | `#FDE9D9` | `#FAB987` | `#2D1622` |

### Base Colors

| Name | Hex Code | Usage |
|------|----------|-------|
| **Base 100** | `#FFFFFF` | White backgrounds |
| **Base 200** | `#F5F5F6` | Light gray backgrounds |
| **Base 300** | `#D8D8D9` | Borders, dividers |
| **Base 400** | `#B2B1B3` | Muted text |
| **Base 500** | `#6E6D71` | Secondary text |
| **Base 600** | `#0D0B13` | Dark backgrounds, primary text |

### Color Level Usage (Important!)

ScaleupXQ uses colors at different "levels" for different purposes:

| Level | Purpose | Example |
|-------|---------|---------|
| **100** | Light backgrounds, subtle fills | `#F4F0FF` (Lilac 100) for card backgrounds |
| **200** | Slightly darker backgrounds, borders | `#E8E0FF` (Lilac 200) for hover states |
| **300** | Vibrant accents, charts, progress bars | `#B89EFF` (Lilac 300) for highlights |
| **400** | Dark text, strong contrast | `#1E0C32` (Lilac 400) for headings on light bg |

### Dashboard Color Mapping

```css
:root {
    /* Primary brand */
    --primary: #6D3EF3;        /* Primary - main accent, buttons, links */
    --primary-dark: #602DF2;   /* Primary dark - hover states */

    /* Status colors - ALWAYS use 300-level (vibrant) for both themes */
    --success: #70E0B1;        /* Emerald 300 - positive metrics */
    --warning: #FFF09B;        /* Marigold 300 - caution, pending */
    --danger: #FF8474;         /* Tangerine 300 - negative, errors */
    --info: #ABECFA;           /* Zodiac 300 - informational */

    /* Card backgrounds - use 100-level colors */
    --bg-lilac: #F4F0FF;       /* Lilac 100 */
    --bg-emerald: #E8FAF3;     /* Emerald 100 */
    --bg-zodiac: #F2FCFE;      /* Zodiac 100 */

    /* Base colors */
    --bg-white: #FFFFFF;       /* Base 100 - main background */
    --bg-light: #F5F5F6;       /* Base 200 - subtle background */
    --border: #D8D8D9;         /* Base 300 - borders, dividers */
    --text-muted: #6E6D71;     /* Base 500 - secondary text */
    --text-dark: #0D0B13;      /* Base 600 - primary text */
}
```

---

## 2. Typography

### Font: Inter

ScaleupXQ uses **Inter** as its typographic standard. This modern and bold font offers a range of weights, providing exceptional flexibility for various design needs.

**Download:** [Inter Font](https://fonts.google.com/specimen/Inter)

### Font Weights

| Weight | CSS Value | Usage |
|--------|-----------|-------|
| **Black** | `900` | Hero headlines, impact statements |
| **Bold** | `700` | Section headers, emphasis |
| **Semibold** | `600` | Subheadings, labels |
| **Medium** | `500` | Body text emphasis, buttons |
| **Regular** | `400` | Body text, paragraphs |

### Implementation

```html
<!-- Google Fonts CDN -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
```

```css
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1 { font-weight: 900; }
h2, h3 { font-weight: 700; }
h4, .label { font-weight: 600; }
.button { font-weight: 500; }
body { font-weight: 400; }
```

---

## 3. Iconography

### Style Guidelines

Our iconography features **clean and minimalistic line icons**, providing a perfect counterbalance to our bold fonts and vibrant color palette.

**Characteristics:**
- Simple, understated design
- Line-based (not filled)
- Consistent stroke width
- Enhances clarity and readability

**Recommended Icon Sets:**
- [Lucide Icons](https://lucide.dev/)
- [Heroicons](https://heroicons.com/) (outline style)
- [Phosphor Icons](https://phosphoricons.com/) (light weight)

---

## 4. Assets

### Logo Usage

| Variant | Use Case |
|---------|----------|
| **Color Light** | Dark backgrounds |
| **Color Dark** | Light backgrounds |
| **Mono Light** | Single-color on dark |
| **Mono Dark** | Single-color on light |

### Logomark

The logomark integrates building blocks and an upward-pointing arrow, symbolising:
- Foundational strength
- Growth trajectory
- Building and elevating B2B sales organizations

### Brand Element

The graphical brand element features a dynamic composition of squares forming an arrow and stairs, symbolising growth and forward momentum.

---

## 5. Tone of Voice

### Bold, Engaging, and Playfully Authentic

We communicate with:

| Quality | Description |
|---------|-------------|
| **Clarity** | Assertive messaging that's impactful and memorable |
| **Engagement** | Connect with audience on a deeper level |
| **Playfulness** | Touch of humor adds unique charm |
| **Authenticity** | Genuine commitment to excellence shines through |

### Writing Guidelines

**Do:**
- Use active voice
- Be direct and confident
- Keep messaging concise
- Add personality where appropriate
- Focus on value and outcomes

**Don't:**
- Use jargon unnecessarily
- Be overly formal or stiff
- Make vague claims
- Use passive constructions
- Overuse superlatives

### Example Phrases

| Instead of... | Write... |
|---------------|----------|
| "We provide solutions" | "We build sales machines" |
| "Our services include" | "We deliver" |
| "It is possible that" | "You can" |
| "In order to" | "To" |

---

## 6. Dashboard-Specific Guidelines

### Card Design

```css
.card {
    background: rgba(109, 62, 243, 0.05);
    border: 1px solid rgba(109, 62, 243, 0.2);
    border-radius: 12px;
}
```

### Progress Indicators

Use 300-level colors (vibrant) for progress bars - consistent across light and dark themes:
- 0-25%: Tangerine 300 (`#FF8474`) - Danger/low
- 25-50%: Sierra 300 (`#FAB987`) - Caution
- 50-75%: Marigold 300 (`#FFF09B`) - Warning/medium
- 75-99%: Zodiac 300 (`#ABECFA`) - Good
- 100%+: Emerald 300 (`#70E0B1`) - Excellent/complete

### Charts

Primary chart colors (in order):
1. `#6D3EF3` - Primary
2. `#70E0B1` - Emerald
3. `#ABECFA` - Zodiac
4. `#FFF09B` - Marigold
5. `#B89EFF` - Lilac
6. `#FAB987` - Sierra
7. `#FF8474` - Tangerine

### Leaderboard Rankings

| Rank | Style |
|------|-------|
| 1st | Gold gradient (`#FFF09B` to `#FAB987`) |
| 2nd | Silver (`#D8D8D9`) |
| 3rd | Bronze (`#FAB987`) |
| Others | Subtle border |

---

## Quick Reference

```css
/* Copy-paste ready CSS variables */
:root {
    --scaleup-primary-100: #6D3EF3;
    --scaleup-primary-200: #602DF2;

    --scaleup-lilac-100: #F4F0FF;
    --scaleup-lilac-200: #E8E0FF;
    --scaleup-lilac-300: #B89EFF;
    --scaleup-lilac-400: #1E0C32;

    --scaleup-tangerine-100: #FFEBE9;
    --scaleup-tangerine-200: #FFD8D3;
    --scaleup-tangerine-300: #FF8474;
    --scaleup-tangerine-400: #391418;

    --scaleup-emerald-100: #E8FAF3;
    --scaleup-emerald-200: #D1F5E6;
    --scaleup-emerald-300: #70E0B1;
    --scaleup-emerald-400: #00302A;

    --scaleup-marigold-100: #FFFDEF;
    --scaleup-marigold-200: #FFFADF;
    --scaleup-marigold-300: #FFF09B;
    --scaleup-marigold-400: #2E2A22;

    --scaleup-zodiac-100: #F2FCFE;
    --scaleup-zodiac-200: #E4F9FD;
    --scaleup-zodiac-300: #ABECFA;
    --scaleup-zodiac-400: #001630;

    --scaleup-sierra-100: #FEF4EC;
    --scaleup-sierra-200: #FDE9D9;
    --scaleup-sierra-300: #FAB987;
    --scaleup-sierra-400: #2D1622;

    --scaleup-base-100: #FFFFFF;
    --scaleup-base-200: #F5F5F6;
    --scaleup-base-300: #D8D8D9;
    --scaleup-base-400: #B2B1B3;
    --scaleup-base-500: #6E6D71;
    --scaleup-base-600: #0D0B13;
}
```