Brand Guidelines

Apply professional brand colors and typography to artifacts and documents.

Core Brand System

Primary Colors

:root {
  /* Primary */
  --brand-primary: #2563eb;        /* Main brand color */
  --brand-primary-dark: #1d4ed8;   /* Hover/active states */
  --brand-primary-light: #3b82f6;  /* Lighter variant */

  /* Secondary */
  --brand-secondary: #64748b;      /* Supporting color */
  --brand-secondary-dark: #475569;
  --brand-secondary-light: #94a3b8;

  /* Accent */
  --brand-accent: #f59e0b;         /* Call-to-action, highlights */
  --brand-accent-dark: #d97706;
}

Neutral Colors

:root {
  /* Backgrounds */
  --neutral-white: #ffffff;
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;

  /* Text */
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
}

Semantic Colors

:root {
  --success: #22c55e;
  --success-light: #dcfce7;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --error: #ef4444;
  --error-light: #fee2e2;
  --info: #3b82f6;
  --info-light: #dbeafe;
}

Typography

Font Stack

:root {
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

Type Scale

/* Headings */
.h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.h2 { font-size: 2rem; font-weight: 600; line-height: 1.25; }
.h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
.h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; }

/* Body */
.body-large { font-size: 1.125rem; line-height: 1.6; }
.body { font-size: 1rem; line-height: 1.6; }
.body-small { font-size: 0.875rem; line-height: 1.5; }
.caption { font-size: 0.75rem; line-height: 1.4; }

Spacing System

/* 4px base unit */
--space-1: 0.25rem;  /* 4px */
--space-2: 0.5rem;   /* 8px */
--space-3: 0.75rem;  /* 12px */
--space-4: 1rem;     /* 16px */
--space-5: 1.25rem;  /* 20px */
--space-6: 1.5rem;   /* 24px */
--space-8: 2rem;     /* 32px */
--space-10: 2.5rem;  /* 40px */
--space-12: 3rem;    /* 48px */
--space-16: 4rem;    /* 64px */

Component Styles

Buttons

.btn-primary {
  background: var(--brand-primary);
  color: white;
  padding: var(--space-3) var(--space-6);
  border-radius: 0.5rem;
  font-weight: 500;
}

.btn-primary:hover {
  background: var(--brand-primary-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  padding: var(--space-3) var(--space-6);
  border-radius: 0.5rem;
}

Cards

.card {
  background: var(--neutral-white);
  border: 1px solid var(--neutral-200);
  border-radius: 0.75rem;
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Forms

.input {
  border: 1px solid var(--neutral-200);
  border-radius: 0.5rem;
  padding: var(--space-3) var(--space-4);
  font-size: 1rem;
}

.input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-light);
}

Document Styles

Word/PDF Headers

header_style = {
    'font': 'Inter',
    'size': 28,
    'color': '#1e293b',
    'weight': 'bold',
    'margin_bottom': 16
}

body_style = {
    'font': 'Inter',
    'size': 11,
    'color': '#334155',
    'line_height': 1.6
}

Presentation Slides

slide_theme = {
    'title_font': 'Inter',
    'title_size': 44,
    'title_color': '#0f172a',

    'body_font': 'Inter',
    'body_size': 24,
    'body_color': '#334155',

    'accent_color': '#2563eb',
    'background': '#ffffff',
    'slide_number_color': '#64748b'
}

Usage Guidelines

Do's

• Use primary color for main CTAs and key elements
• Maintain consistent spacing using the scale
• Use semantic colors for status indicators
• Ensure sufficient contrast (4.5:1 for text)

Don'ts

• Don't use brand colors for error states
• Don't mix multiple accent colors
• Don't use light text on light backgrounds
• Don't deviate from the type scale

Accessibility

• Minimum contrast ratio: 4.5:1 for normal text
• Minimum contrast ratio: 3:1 for large text
• Don't rely solely on color for information
• Ensure interactive elements are clearly visible

Color Combinations

Recommended Pairs

Avoid