Skip to content

Seer Branding Guidelines

This document defines the visual identity standards for Seer Marketing Agents documentation and deliverables.

Color Palette

Primary Colors

Name Hex RGB CSS Variable Usage
Seer Pink #FC0A5E rgb(252, 10, 94) --seer-pink Primary accent, section dividers, CTAs
Seer Orange #FF9033 rgb(255, 144, 51) --seer-orange Highlighted text, key terms, links
Deep Purple #343456 rgb(52, 52, 86) --seer-purple-deep Background gradients, cards
Electric Purple #5050BC rgb(80, 80, 188) --seer-purple-electric Gradient endpoints, accents

Secondary Colors

Name Hex RGB CSS Variable Usage
Cyan #54DEDB rgb(84, 222, 219) --seer-cyan Success states, highlights
Bright Purple #BA38FF rgb(186, 56, 255) --seer-purple-bright Special callouts

Neutral Colors

Name Hex RGB CSS Variable Usage
Black #000000 rgb(0, 0, 0) --seer-black Primary backgrounds (dark mode)
White #FFFFFF rgb(255, 255, 255) --seer-white Primary text (dark mode)
Gray 100 #E9E9EF rgb(233, 233, 239) --seer-gray-100 Borders, dividers
Gray 300 #ADADBC rgb(173, 173, 188) --seer-gray-300 Secondary text
Gray 500 #707089 rgb(112, 112, 137) --seer-gray-500 Muted text

Gradients

Primary Gradients

Name CSS Usage
Title Gradient linear-gradient(135deg, #FC0A5E 0%, #FF9033 100%) Hero headings, primary CTAs
Background Gradient linear-gradient(135deg, #000000 0%, #343456 100%) Page backgrounds, hero sections
Card Gradient linear-gradient(135deg, #343456 0%, #5050BC 100%) Feature cards, highlight boxes
Accent Gradient linear-gradient(135deg, #FC0A5E 0%, #BA38FF 100%) Call-to-action boxes, alerts

CSS Implementation

:root {
  /* Primary */
  --seer-pink: #FC0A5E;
  --seer-orange: #FF9033;
  --seer-purple-deep: #343456;
  --seer-purple-electric: #5050BC;

  /* Secondary */
  --seer-cyan: #54DEDB;
  --seer-purple-bright: #BA38FF;

  /* Neutrals */
  --seer-black: #000000;
  --seer-white: #FFFFFF;
  --seer-gray-100: #E9E9EF;
  --seer-gray-300: #ADADBC;
  --seer-gray-500: #707089;

  /* Gradients */
  --gradient-title: linear-gradient(135deg, #FC0A5E 0%, #FF9033 100%);
  --gradient-background: linear-gradient(135deg, #000000 0%, #343456 100%);
  --gradient-card: linear-gradient(135deg, #343456 0%, #5050BC 100%);
  --gradient-accent: linear-gradient(135deg, #FC0A5E 0%, #BA38FF 100%);
}

Typography

Font Families

Role Font Fallback Usage
Primary Poppins sans-serif All UI text, headings, body
Monospace Source Code Pro monospace Code blocks, technical content

Font Weights

Weight Value Usage
Regular 400 Body text
Medium 500 Subheadings, emphasis
Semibold 600 Navigation, labels
Bold 700 Section headings
Extra Bold 800 Hero headings, titles

Type Scale

Element Size Weight Line Height
H1 (Hero) 72px 800 1.1
H2 (Section) 64px 800 1.2
H3 36px 700 1.3
H4 24px 600 1.4
Body 16-18px 400 1.6
Caption 14px 400 1.5

CSS Implementation

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap');

body {
  font-family: 'Poppins', sans-serif;
}

code, pre {
  font-family: 'Source Code Pro', monospace;
}

Usage in MkDocs

The documentation site uses Material for MkDocs with a custom color scheme based on these guidelines.

Theme Configuration

See mkdocs.yml for the theme configuration and docs/wiki/stylesheets/seer-theme.css for custom overrides.

Color Mappings

Material Theme Seer Color
primary Seer Pink (#FC0A5E)
accent Seer Orange (#FF9033)
background Black (#000000)

Accessibility Notes

  • Contrast Ratios: All text colors meet WCAG AA standards against their intended backgrounds
  • Pink on Black: 7.2:1 ratio
  • Orange on Black: 8.1:1 ratio
  • Gray 300 on Black: 7.8:1 ratio

Last updated: January 2026