Skip to content

Campaign Brain Style Guide

Visual design guidelines for Campaign Brain.

Brand Colors

Primary Palette

Color Hex Usage
Navy Blue #1E3A5F Primary actions, headers
Gold #F1C613 Accents, highlights
White #FFFFFF Backgrounds, text on dark

Extended Palette

Color Hex Usage
Success #10B981 Success states
Warning #F59E0B Warnings
Error #EF4444 Errors
Text #374151 Body text
Sidebar #F8FAFC Sidebar background

Typography

Font Stack

  • Headings: Libre Baskerville
  • Body: Source Sans 3
  • Code: Roboto Mono

Sizes

Element Size Weight
H1 2.25rem Bold
H2 1.875rem Bold
H3 1.5rem Semibold
Body 1rem Regular
Small 0.875rem Regular

Components

Buttons

<!-- Primary -->
<button class="btn-primary">Save</button>

<!-- Secondary -->
<button class="btn-secondary">Cancel</button>

<!-- Danger -->
<button class="btn-danger">Delete</button>

Cards

<div class="bg-white rounded-lg shadow-md p-6">
  <h3 class="text-lg font-semibold">Card Title</h3>
  <p class="text-gray-600">Card content...</p>
</div>

Forms

<div class="mb-4">
  <label class="block text-sm font-medium text-gray-700 mb-2">
    Field Label
  </label>
  <input type="text" class="w-full p-3 border border-gray-300 rounded-md">
</div>

Icons

Using Lucide Icons:

<i data-lucide="user" class="w-5 h-5"></i>
<i data-lucide="settings" class="w-5 h-5"></i>
<i data-lucide="calendar" class="w-5 h-5"></i>

Common icons:

Icon Name Usage
👤 user Users, profiles
⚙️ settings Settings
📅 calendar Events
📊 bar-chart-2 Reports
🏷️ tag Tags
📁 folder Segments

Layout

  • Navy background (#1E3A5F)
  • White text
  • Logo left, nav center, user right
  • Height: 64px
  • Light gray background (#F8FAFC)
  • Width: 256px (16rem)
  • Fixed position
  • Collapsible on mobile

Main Content

  • White background
  • Max width: 1280px
  • Padding: 24px (1.5rem)

Responsive Breakpoints

Breakpoint Width Description
sm 640px Small devices
md 768px Tablets
lg 1024px Laptops
xl 1280px Desktops

See Also