Brand & Design Guidelines

Brand Identity

Growth Experts is an all-you-can-eat growth marketing agency for B2B companies. We position as a strategic partner, not a task-based vendor.

Brand Personality

Brand Promise

"The last time you'll worry about who's handling your marketing."

Color Palette

Five primary brand colors, an extended purple spectrum, neutrals, tint backgrounds, and semantic colors.

Primary Brand Colors

Extended Purple Spectrum

Neutrals

Accent Tint Backgrounds

Semantic Colors

Color on Dark Backgrounds

Spacing System

Built on a 8px base unit. Most values are multiples of 8. The root font-size of 10px makes 1rem = 10px for easy calculation.

Spacing Scale

Section Vertical Padding

Page Margin (Horizontal)

Shadows & Elevation

Shadows are intentionally very subtle. The brand aesthetic is clean and flat with just enough elevation to create hierarchy.

Inset Border Shadows

Used instead of border for cleaner rendering on interactive elements like outline buttons.

Layout & Grid

Single breakpoint at 1100px. No separate tablet layout. The site primarily uses flexbox.

Breakpoints

Container Widths

Page Layout Pattern

┌───────────────────────────────────────────┐
│ Header (fixed, pill-shaped, z-index: 20)  │
├───────────────────────────────────────────┤
│ Hero Section                              │
│   max-width: 1280px                       │
│   Two columns: text (520px) + media       │
├───────────────────────────────────────────┤
│ Section (bg: #F8F9FB or white)            │
│   Inner: max-width 1026px                 │
│   Padding: 184px top / 120px bottom       │
├───────────────────────────────────────────┤
│ CTA Section                               │
│   Card: max-width 1128px, bg: #FEC23A     │
├───────────────────────────────────────────┤
│ Footer Subscribe + Footer                 │
│   bg: #F8F9FB                             │
└───────────────────────────────────────────┘

Mobile Behavior

• All multi-column layouts stack to single column
• Horizontal padding reduces from 40px to 16px
• Section vertical padding reduces proportionally
• Text alignment often shifts to center
• Images fill full width with reduced border radius

Imagery & Media

Images use 16:9 aspect ratio, 12px border radius, object-fit cover, and a subtle zoom effect on hover.

Decorative Elements

• Colored squares: Solid bg blocks (e.g. #6C30A1) with 12px radius, positioned behind content for depth
• Scribble SVGs: Hand-drawn line art, positioned absolutely, adding personality to CTA sections

Brand Voice & Tone

Direct, conversational, confident, warm, and willing to challenge. We write like we're talking to a smart friend over coffee.

Voice Attributes

Tone by Context

Signature Patterns

• "Let's be honest." — Challenge the status quo directly
• "It doesn't work." — Blunt assessment, then the better way
• "Just gets it done." — Action over theory
• "There is a better way." — Aspirational pivot after naming the pain
• Emoji: Sparingly. One in an FAQ answer is fine. Storms are not.
• Bold for emphasis via <strong> — not ALL CAPS, not underline
• Short paragraphs: 1–3 sentences max. White space is your friend.

CSS Custom Properties

Ready-to-paste :root block for new pages. These aren't on the production site yet but should be adopted for all new work.

:root {
  /* ——— Base ——— */
  --font-family: 'Circular Std', sans-serif;
  --font-base: 10px;

  /* ——— Brand Colors ——— */
  --color-purple: #C379F7;
  --color-yellow: #FEC23A;
  --color-blue: #006EF3;
  --color-green: #6BE568;
  --color-red: #FF6363;

  /* ——— Purple Spectrum ——— */
  --color-deep-purple: #231451;
  --color-purple-700: #6C30A1;
  --color-purple-500: #9E68CF;
  --color-lavender-400: #D498FF;
  --color-lavender-300: #E5C5FB;
  --color-lavender-200: #F9F2FE;

  /* ——— Neutrals ——— */
  --color-near-black: #1B1B1D;
  --color-dark-gray: #383B3E;
  --color-gray: #676B73;
  --color-medium-gray: #A1A5AE;
  --color-light-gray: #D2D5DF;
  --color-lighter-gray: #E5E7EE;
  --color-off-white: #F8F9FB;
  --color-white: #FFFFFF;

  /* ——— Spacing ——— */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.2rem;
  --space-7: 4rem;
  --space-8: 4.8rem;
  --space-9: 6.4rem;
  --space-10: 8rem;

  /* ——— Border Radius ——— */
  --radius-sm: 0.8rem;
  --radius-lg: 1.2rem;
  --radius-2xl: 2.4rem;
  --radius-pill: 8rem;

  /* ——— Shadows ——— */
  --shadow-subtle: 0 0.2rem 1rem rgba(27,27,29,0.08);
  --shadow-card: 0 0.4rem 0.8rem hsla(0,0%,8%,0.06);

  /* ——— Motion ——— */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-normal: 0.25s;
  --duration-medium: 0.4s;

  /* ——— Layout ——— */
  --container-standard: 128rem;
  --container-narrow: 102.6rem;
  --breakpoint-desktop: 1100px;
}

Checklist for New Pages

Verify every item before shipping.