# Codrlabs Brand Guidelines

**Version 1.0 • March 2026**

---

## Introduction

Welcome to the Codrlabs brand guidelines. This document defines our visual identity, color system, typography, and voice guidelines for all branded communications.

Consistent application of these guidelines builds recognition and trust with our audience. Whether you're creating a presentation, website, or marketing material, these standards ensure our brand remains strong and cohesive.

---

## Logo & Logomark

The Codrlabs logo is built from four geometric shapes — two circles and a connecting arc — paired with a custom wordmark. Always use the supplied SVG or PNG files; never recreate the logo in text or attempt to redraw it.

### Logo Variants

#### Primary Logo
Full logo. This is the default for all branded materials.

**Files:**
- `codrlabs-primary-light.svg` (light backgrounds)
- `codrlabs-primary-dark.svg` (dark backgrounds)

#### Icon/Symbol
Used standalone for favicons, app icons, and avatar crops.

**File:**
- `codrlabs-icon.svg`

---

## Color Palette

Four brand colors create a vibrant, dynamic palette. The contrast between Magenta and Turquoise anchors the warm Apricot and Burnt Orange for a harmonious system.

### Brand Colors

#### Magenta `#AC0C90`
**RGB:** RGB(172, 12, 144)  
**CMYK:** C: 0  M: 93  Y: 17  K: 33  
**Pantone:** PMS 239 C  
**Usage:** Energy, passion, and creativity. The boldest element of the palette — used for strong CTAs, highlights, and key UI moments.

#### Turquoise `#00BFAF`
**RGB:** RGB(0, 191, 175)  
**CMYK:** C: 100  M: 0  Y: 8  K: 25  
**Pantone:** PMS 3265 C  
**Usage:** Calmness, trust, and reliability. The primary interactive color — used for buttons, links, and interactive elements.

#### Burnt Orange `#E37343`
**RGB:** RGB(227, 115, 67)  
**CMYK:** C: 0  M: 49  Y: 70  K: 11  
**Pantone:** PMS 716 C  
**Usage:** Passion, energy, and intensity. Bridges Magenta and Apricot in gradients — adds depth and draws attention.

#### Apricot `#F6BD51`
**RGB:** RGB(246, 189, 81)  
**CMYK:** C: 0  M: 23  Y: 67  K: 4  
**Pantone:** PMS 1225 C  
**Usage:** Sunshine and optimism. Introduces warmth and positivity — used for stat counters, highlights, and warm gradient stops.

### Brand Gradient

**CSS (diagonal):**
```css
background: linear-gradient(135deg, #AC0C90 0%, #E37343 50%, #F6BD51 100%);
```

**CSS (horizontal):**
```css
background: linear-gradient(to right, #AC0C90 0%, #E37343 50%, #F6BD51 100%);
```

**Usage:** Banners, section backgrounds, and decorative dividers only. **Never on buttons or body text.**

### Neutral Palette

- **Dark Gray** `#282828` — Primary text
- **Light Gray** `#D3D3D3` — Secondary text, dividers
- **Off White** `#F7F7F7` — Backgrounds, surfaces
- **Pure White** `#FFFFFF` — Primary background
- **Dark Navy** `#14142B` — Dark backgrounds, footer

---

## Typography System

Two typefaces — Plus Jakarta Sans for headings and UI labels, DM Sans for body text. Together they balance authority with warmth.

### Primary Fonts

#### Plus Jakarta Sans
**Usage:** Display, headings, and UI labels  
**Weights:** 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold), 800 (ExtraBold)  
**Source:** Google Fonts — [fonts.google.com/specimen/Plus+Jakarta+Sans](https://fonts.google.com/specimen/Plus+Jakarta+Sans)

**HTML Implementation:**
```html
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
```

#### DM Sans
**Usage:** Body text and UI text  
**Weights:** 300 (Light), 400 (Regular), 500 (Medium)  
**Source:** Google Fonts — [fonts.google.com/specimen/DM+Sans](https://fonts.google.com/specimen/DM+Sans)

**HTML Implementation:**
```html
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
```

### Typography Hierarchy

#### Headings (Plus Jakarta Sans)
- **H1 Brand** — 4.5rem / 800 weight
- **H2 Solutions** — 2.5rem / 700 weight
- **H3 Our services** — 1.5rem / 700 weight
- **Label SECTION TITLE** — 0.65rem / 700 weight / UPPERCASE / 0.2em letter-spacing

#### Body (DM Sans)
- **Light body** — 300 weight (hero subtitles and introductory paragraphs)
- **Regular body** — 400 weight (default for all descriptive content, card text, and longer prose)
- **Medium small** — 500 weight (nav links, tags, captions, and supporting metadata)

### Logo Typography (Code Next)

**Important:** The Code Next typeface is used exclusively in the Codrlabs logo wordmark and should **never** be used for general typography. The logo has significant brand impact and should not be recreated or modified. Always use the provided SVG or PNG logo files.

**Logo construction:**
- **CODR** — Code Next Thin (100)
- **LABS** — Code Next ExtraBold (800)

---

## Logo Usage Rules

Consistent application of the logo builds recognition. Follow these rules in all branded materials.

### ✅ DO

- Use the full logomark on white or dark backgrounds only
- Maintain clear space equal to the height of the "C" on all four sides of the logo
- Keep the logo at a minimum of 120px wide for digital, or 30mm for print
- Use the brand gradient (Magenta → Burnt Orange → Apricot) for decorative elements
- Use Turquoise as the primary CTA color across all digital touchpoints

### ❌ DON'T

- Place the logo on busy photographic backgrounds without a solid color backing
- Stretch, skew, rotate, or alter the proportions of the logo in any way
- Use unapproved colors or add drop shadows, outlines, or effects to the logomark
- Use the brand gradient as a button fill or body text color — it is decorative only
- Attempt to recreate the logo using the Code Next font — always use the provided SVG/PNG files

---

## Brand Voice & Persona

### Voice

The voice of Codrlabs is **professional yet friendly and approachable**. We use a first-person voice to establish a personal connection with our customers, making the company seem more relatable and building trust and credibility.

We balance technical expertise with accessibility:
- **Professional:** "Our team of experts," "We specialize in"
- **Approachable:** "Let us help you," "We're here to assist you"

We use a mix of technical and non-technical language, suggesting a balance between professionalism and approachability. The technical language indicates our expertise in software and web development, while the non-technical language suggests a user-friendly approach.

### Persona

Codrlabs is a **passionate, experienced, and innovative** software development company. We're a team of top-notch specialists with over a decade of experience in software development and website design, focused on high customer retention and positive feedback.

We're not just a company that develops software and websites — we're passionate and innovative individuals committed to providing high-quality services and contributing to the field of technology. Our dedication to quality assurance and legal compliance ensures that our products are secure, compliant, and tailored to our clients' unique needs.

---

## Social Media & Digital Presence

Consistent handles across all platforms ensure brand recognition.

- **Facebook:** [@codrlabs](https://www.facebook.com/codrlabs)
- **Instagram:** [@codrlabs](https://www.instagram.com/codrlabs)
- **LinkedIn:** [Codrlabs](https://www.linkedin.com/company/codrlabs)
- **YouTube:** [@codrlabs](https://www.youtube.com/@codrlabs)
- **X:** [@codrlabs](https://x.com/codrlabs)
- **Threads:** [@codrlabs](https://www.threads.com/@codrlabs)
- **Bluesky:** [codrlabs.com](https://bsky.app/profile/codrlabs.com)
- **Website:** [codrlabs.com](https://codrlabs.com)
- **Blog:** [codrlabs.com/blog](https://codrlabs.com/blog)

### Social Media Assets

Use the appropriate logo sizes from the brand kit:
- **Profile pictures:** `square-400x400.png` or `square-800x800.png`
- **Cover/header images:** Use the brand gradient with logo overlay
- **Social sharing:** `og-1200x630.png`

---

## Contact Information

**Email:** [email protected]  
**Phone:** (587) 882-4721  
**Location:** Edmonton, AB, Canada  

**Tagline:** Built in Edmonton. Used everywhere.

---

## Implementation Examples

### HTML/CSS

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Codrlabs</title>
  
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
  
  <!-- Favicons -->
  <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
  
  <style>
    :root {
      --color-brand-magenta: #AC0C90;
      --color-brand-turquoise: #00BFAF;
      --color-brand-burnt-orange: #E37343;
      --color-brand-apricot: #F6BD51;
      --color-text-primary: #282828;
      --color-text-secondary: #D3D3D3;
    }
    
    body {
      font-family: 'DM Sans', sans-serif;
      color: var(--color-text-primary);
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    
    .button-primary {
      background-color: var(--color-brand-turquoise);
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 4px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 600;
    }
    
    .hero-section {
      background: linear-gradient(135deg, #AC0C90 0%, #E37343 50%, #F6BD51 100%);
    }
  </style>
</head>
<body>
  <header>
    <img src="logos/svg/codrlabs-primary-light.svg" alt="Codrlabs" width="240">
  </header>
  
  <main>
    <section class="hero-section">
      <h1>Built in Edmonton. Used everywhere.</h1>
      <button class="button-primary">Get Started</button>
    </section>
  </main>
</body>
</html>
```

---

**© 2023–2026 Codrlabs Solutions Ltd. All rights reserved.**