Maslow AI Brand Guidelines

Brand tokens and color usage rules for Maslow AI.

Color System

Primary Brand Colors

The three colors that form the Maslow logo and represent core service lines.

Secondary Colors

Extended Palette

Teal Variants

Pink Variants

Purple Variants

Orange/Warm Variants

Status Colors

Neutral Colors

Light & Dark Mode

Light Mode

Dark Mode

Dark Band (Emphasis Section)

Use #121D35 as a full-width background within light mode pages to create visual hierarchy. This is NOT a full dark mode—it's a design element.

.dark-band {
  background-color: #121D35;
  color: #FFFFFF;
}
.dark-band .accent {
  color: #6DC4AD; /* Teal pops on dark */
}

Typography

Font Stack

<!-- Google Fonts (Manrope only - Graphik requires license) -->
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">

Usage

Type Scale

Headline Pattern

The brand uses a distinctive headline style: bold keyword + regular supporting text.

<h1>
  <span class="bold">At Maslow</span><br>
  <span class="light">we turn big data into<br>business success stories</span>
</h1>

.bold { font-weight: 800; color: #333333; }
.light { font-weight: 400; color: #A5A5A5; }

Logo

Color Logo Components

The Maslow logo uses three overlapping elements:

Logo Variants

Logo + Wordmark

[Logo] MASLOW | AI

• MASLOW: Manrope, weight 800, letter-spacing 0.02em
• |: Vertical bar separator
• AI: Manrope, weight 300 (light)

Semantic Color Mapping

Service Lines

Colored Keyword Headlines

<h2>
  <span style="color: #EE7BB3">Strategic</span> navigation,
  flawless execution
</h2>

<h2>
  <span style="color: #6DC4AD">Technology</span> savvy,
  usability geniuses
</h2>

<h2>
  <span style="color: #A070A6">Design</span> expertise,
  user empathetic
</h2>

Accent Lines

Thin horizontal lines (2-3px) in brand colors are a signature design element.

.accent-line {
  height: 3px;
  width: 60px;
  background-color: var(--maslow-teal);
}

.accent-line-full {
  height: 3px;
  width: 100%;
  background-color: var(--maslow-pink);
}

Interaction States

Selection & Hover

Use light teal background with teal left border for selected/hover states on list items.

.list-item:hover {
  background-color: #EBF7F4;
}
.list-item.selected {
  background-color: #EBF7F4;
  border-left: 3px solid #6DC4AD;
}

Focus States

Use brand colors for focus rings, not browser defaults.

:focus-visible {
  outline: 2px solid #6DC4AD;
  outline-offset: 2px;
}

Content-Type Badges

Assign badge colors by content type for consistency across the site.

.badge-case-study { background: #401877; color: #FFFFFF; }
.badge-article { background: #E19379; color: #FFFFFF; }
.badge-insight { background: #6DC4AD; color: #333333; }
.badge-news { background: #F3A326; color: #333333; }

Button Hierarchy

.btn-primary { background: #333333; color: #FFFFFF; }
.btn-accent { background: #6DC4AD; color: #FFFFFF; }
.btn-submit { background: #E19379; color: #FFFFFF; }
.btn-ghost { background: transparent; color: #333333; border: 2px solid #D0D5E0; }

Action Links

Use Orange for action text links.

.action-link {
  color: #F3A326;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

Examples: "READ ARTICLE →", "VIEW CASE STUDY →", "LEARN MORE →"

Text Emphasis

On Dark Backgrounds

Use Yellow/Orange for highlighting keywords on dark backgrounds or hero images.

.hero-text .highlight {
  color: #F3A326;
}

Example: "At Maslow, we build web applications that delight users."

On Light Backgrounds

Use brand colors (Teal, Pink, Purple) for emphasis per semantic meaning.

Callouts & Quotes

Use Teal quotation mark with light teal background.

.callout {
  background: #EBF7F4;
  padding: 24px;
  border-radius: 8px;
}
.callout-icon {
  color: #6DC4AD;
  font-size: 48px;
}

Gradients

/* Logo gradient */
linear-gradient(135deg, #EE7BB3, #A070A6, #6DC4AD)

/* Hero gradient (dark) */
linear-gradient(135deg, #401877 0%, #121D35 100%)

/* Teal to Purple */
linear-gradient(135deg, #6DC4AD, #401877)

/* Warm gradient */
linear-gradient(135deg, #F3A326, #EE7BB3)

Spacing Scale

Base unit: 4px

Border Radius

Brand Guidelines

✅ DO

• Use Teal #6DC4AD for primary CTAs
• Use Pink #EE7BB3 for Strategy-related content
• Use Purple #401877 for premium/hero moments
• Use Dark Blue #121D35 for dark bands within light pages
• Use Manrope for headings, Graphik for body
• Include accent lines as visual separators
• Map service colors consistently (Strategy=Pink, Tech=Teal, Design=Purple)

❌ DON'T

• Use generic AI purple (#a855f7, #8b5cf6) — use #401877
• Use pure black (#000000) — use #333333
• Use cyan (#06b6d4) — use #469DBB
• Mix more than 2 fonts
• Use the logo colors outside logo context without purpose
• Put light text on Pink or Teal backgrounds (use dark text)

Text Contrast

CSS Custom Properties

:root {
  /* Primary */
  --maslow-teal: #6DC4AD;
  --maslow-pink: #EE7BB3;
  --maslow-purple: #401877;
  
  /* Secondary */
  --maslow-blue: #469DBB;
  --maslow-orange: #F3A326;
  --maslow-purple-light: #A070A6;
  
  /* Teal Variants */
  --teal-primary: #6DC4AD;
  --teal-light: #73C1AE;
  --teal-alt: #60C3AE;
  
  /* Pink Variants */
  --pink-primary: #EE7BB3;
  --pink-muted: #DA85B2;
  
  /* Purple Variants */
  --purple-primary: #401877;
  --purple-magenta: #9D4B8E;
  --purple-light: #A070A6;
  --purple-alt: #A56FA8;
  
  /* Orange/Warm Variants */
  --orange-primary: #F3A326;
  --orange-soft: #EBA93D;
  --yellow: #FFF860;
  --red: #D52C2C;
  --coral: #E19379;
  
  /* Status */
  --status-success: #2CD552;
  --status-error: #D52C2C;
  --status-warning: #F3A326;
  --status-info: #469DBB;
  
  /* Interaction States */
  --state-hover-bg: #EBF7F4;
  --state-selected-bg: #EBF7F4;
  --state-selected-border: #6DC4AD;
  --state-focus-ring: #6DC4AD;
  
  /* Content Badges */
  --badge-case-study: #401877;
  --badge-article: #E19379;
  --badge-insight: #6DC4AD;
  --badge-news: #F3A326;
  
  /* Neutrals */
  --black: #333333;
  --gray: #A5A5A5;
  --silver-bg: #E6EAF3;
  --light-gray: #EEEEEE;
  --white: #FFFFFF;
  --dark-blue: #121D35;
  
  /* Light Mode */
  --light-background: #E6EAF3;
  --light-surface: #FFFFFF;
  --light-surface-alt: #EEEEEE;
  --light-text-primary: #333333;
  --light-text-secondary: #A5A5A5;
  --light-border: #D0D5E0;
  
  /* Dark Mode */
  --dark-background: #121D35;
  --dark-surface: #1A2847;
  --dark-surface-alt: #243356;
  --dark-text-primary: #FFFFFF;
  --dark-text-secondary: #B8C4D9;
  --dark-border: #3A4A6B;
  
  /* Typography */
  --font-primary: 'Manrope', system-ui, sans-serif;
  --font-secondary: 'Graphik', system-ui, sans-serif;
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  
  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
}

Tailwind Config Extension

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        maslow: {
          teal: '#6DC4AD',
          pink: '#EE7BB3',
          purple: '#401877',
          blue: '#469DBB',
          orange: '#F3A326',
          'purple-light': '#A070A6',
        },
        brand: {
          'teal-light': '#73C1AE',
          'teal-alt': '#60C3AE',
          'pink-muted': '#DA85B2',
          'purple-magenta': '#9D4B8E',
          'purple-alt': '#A56FA8',
          'orange-soft': '#EBA93D',
          yellow: '#FFF860',
          red: '#D52C2C',
          coral: '#E19379',
          green: '#2CD552',
        },
        neutral: {
          black: '#333333',
          gray: '#A5A5A5',
          silver: '#E6EAF3',
          'light-gray': '#EEEEEE',
        },
        dark: {
          blue: '#121D35',
          surface: '#1A2847',
          'surface-alt': '#243356',
          border: '#3A4A6B',
          text: '#B8C4D9',
        },
        state: {
          hover: '#EBF7F4',
          selected: '#EBF7F4',
          'selected-border': '#6DC4AD',
          focus: '#6DC4AD',
        },
        badge: {
          'case-study': '#401877',
          article: '#E19379',
          insight: '#6DC4AD',
          news: '#F3A326',
        },
      },
      fontFamily: {
        display: ['Manrope', 'system-ui', 'sans-serif'],
        body: ['Graphik', 'system-ui', 'sans-serif'],
      },
    },
  },
}

Quick Reference Card