Design System — Seer Agent Engine

Cohesive styling patterns shared between MkDocs documentation and skill-map app.

Color Palette

All colors are defined as CSS variables. Never hardcode hex values outside :root.

Primary Colors

Variable	Value	Usage
--seer-pink	#FC0A5E	Primary CTA, active states, errors
--seer-orange	#FF9033	Links, accents, hover states
--seer-purple-deep	#343456	Headers, footers, backgrounds
--seer-purple-electric	#5050BC	Secondary buttons, borders, info

Secondary Colors

Variable	Value	Usage
--seer-cyan	#54DEDB	Success, code highlights, tips
--seer-purple-bright	#BA38FF	Innovation, spec indicators

Division Colors

Division	Variable	Value
SEO	--color-seo	var(--seer-pink)
Analytics	--color-analytics	var(--seer-cyan)
PDM	--color-pdm	var(--seer-orange)
Creative	--color-creative	var(--seer-purple-bright)
Operations	--color-ops	var(--seer-purple-electric)
Innovation	--color-innovation	var(--seer-purple-deep)

Gradients

--gradient-title: linear-gradient(135deg, #FC0A5E 0%, #FF9033 100%);
--gradient-card: linear-gradient(135deg, #343456 0%, #5050BC 100%);
--gradient-accent: linear-gradient(135deg, #FC0A5E 0%, #BA38FF 100%);

Typography

Font Stack

/* Body text */
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

/* Code */
font-family: 'Source Code Pro', 'SF Mono', Monaco, monospace;

Heading Sizes (MkDocs)

Element	Size	Weight
h1	1.6rem	700
h2	1.25rem	600
h3	1rem	600

Card Patterns

Interactive Cards (Hover Effects)

All interactive cards share these hover patterns:

/* Standard card hover */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(80, 80, 188, 0.15);
  border-color: rgba(80, 80, 188, 0.3);
}

/* Small card hover (skill cards) */
.small-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(80, 80, 188, 0.12);
}

Division Cards

Division cards have a colored top border that expands on hover:

.division-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--division-color);
  transition: height 0.25s ease;
}

.division-card:hover::before {
  height: 6px;
}

Buttons

Primary Button

.btn-primary {
  background: var(--seer-purple-electric);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: #6060CC;  /* Lighter purple for hover */
  box-shadow: 0 4px 12px rgba(80, 80, 188, 0.3);
}

Secondary Button

.btn-secondary {
  background: transparent;
  color: var(--seer-purple-electric);
  border: 1px solid var(--seer-purple-electric);
  border-radius: 6px;
}

.btn-secondary:hover {
  background: rgba(80, 80, 188, 0.1);
}

Success State (Copied)

.btn.copied {
  background: var(--seer-cyan);
  color: var(--bg-primary);
  border-color: var(--seer-cyan);
}

Dark/Light Mode

Dark Mode (Slate)

--bg-primary: #0d0d0d;
--bg-secondary: #1a1a2e;
--bg-card: #232538;
--text-primary: #f0f0f5;
--text-secondary: #a0a0b8;
--border: #2a2a45;

Light Mode

--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--bg-card: #ffffff;
--text-primary: #343456;
--text-secondary: #707089;
--border: #e9e9ef;

Component Patterns

Trigger Chips (Tags)

.trigger-chip {
  background: rgba(84, 222, 219, 0.15);
  color: var(--seer-cyan);
  border: 1px solid rgba(84, 222, 219, 0.3);
  border-radius: 100px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}

Code Blocks

/* Inline code */
code {
  background: rgba(80, 80, 188, 0.15);
  border: 1px solid rgba(80, 80, 188, 0.25);
  padding: 0.1em 0.4em;
  color: var(--seer-cyan);
}

Admonitions

Type	Border Color	Background
tip	--seer-cyan	rgba(84, 222, 219, 0.1)
info	--seer-purple-electric	rgba(80, 80, 188, 0.1)
warning	--seer-orange	rgba(255, 144, 51, 0.1)
danger	--seer-pink	rgba(252, 10, 94, 0.1)

Spacing & Borders

Border Radius

--radius: 8px;      /* Standard elements */
--radius-lg: 12px;  /* Cards */
--radius-xl: 16px;  /* Large containers */

Shadows

--shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
--shadow-md: 0 4px 12px rgba(0,0,0,0.3);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.4);

/* Purple-tinted hover shadow */
box-shadow: 0 12px 32px rgba(80, 80, 188, 0.15);

Files

File	Purpose
docs/wiki/stylesheets/seer-theme.css	MkDocs Material theme overrides
apps/skill-map/src/style.css	Skill-map app styles

Both files share the same :root color variables to ensure consistency.

Anti-Patterns

❌ Never hardcode hex colors outside :root declarations ❌ Never use MkDocs Material defaults for primary UI elements
❌ Never use green for success states (use --seer-cyan) ❌ Never use blue for links (use --seer-orange)

✅ Always use CSS variables for colors ✅ Always include hover states for interactive elements ✅ Always maintain purple-tinted shadows for depth ✅ Always test in both dark and light modes