Persona System

Core Personas

The founding team of AI companions, each with distinct expertise.

F

Ferni

Chief of Staff & Coordinator

The warm, grounding presence who orchestrates your team. Forest green represents growth, stability, and natural wisdom.

--persona-ferni: #4a6741
--persona-ferni-glow: rgba(74, 103, 65, 0.28)

P

Peter

Research & Strategy

Deep-thinking analyst with a knack for pattern recognition. Teal represents depth, clarity, and analytical precision.

--persona-peter: #3a6b73
--persona-peter-glow: rgba(58, 107, 115, 0.28)

M

Maya

Coaching & Habits

Compassionate habit coach using behavioral science. Warm terracotta represents nurturing energy and grounded support.

--persona-maya: #a67a6a
--persona-maya-glow: rgba(166, 122, 106, 0.28)

A

Alex

Communication & Writing

Articulate wordsmith for emails, messages, and presentations. Steel blue represents clarity, professionalism, and precision.

--persona-alex: #5a6b8a
--persona-alex-glow: rgba(90, 107, 138, 0.28)

J

Jordan

Planning & Goals

Strategic planner who helps you achieve milestones. Warm coral represents energy, ambition, and forward momentum.

--persona-jordan: #c4856a
--persona-jordan-glow: rgba(196, 133, 106, 0.28)

N

Nayan

Wisdom & Reflection

Philosophical guide for life's deeper questions. Warm gold represents wisdom, warmth, and timeless perspective.

--persona-nayan: #b8956a
--persona-nayan-glow: rgba(184, 149, 106, 0.28)

Color Philosophy

Warm, Organic Tones

All persona colors share a warm undertone that feels approachable and human. We avoid cold, clinical colors that create distance.

Distinct Yet Harmonious

Each persona is immediately recognizable by color, yet all colors work together in the same interface without clashing.

WCAG Compliant

All persona colors meet WCAG AA contrast requirements when used as text on both light and dark backgrounds. We provide textOnDark variants for dark themes.

Usage Patterns

Avatar Colors

.avatar--ferni { background: var(--persona-ferni); }
.avatar--peter { background: var(--persona-peter); }
.avatar--maya { background: var(--persona-maya); }
/* ... */

Accent Borders

.message--from-ferni {
  border-left: 3px solid var(--persona-ferni);
}

.card--maya-highlight {
  border: 1px solid var(--persona-maya);
}

Glow Effects

.avatar--ferni.speaking {
  box-shadow: 0 0 20px var(--persona-ferni-glow);
}

.badge--peter {
  background: var(--persona-peter-glow);
  color: var(--persona-peter);
}

Theme-Aware Text

/* Light theme - use primary color */
.persona-label { color: var(--persona-ferni); }

/* Dark theme - use textOnDark variant */
[data-theme="dark"] .persona-label {
  color: var(--persona-ferni-text);
}

All Tokens

/* Core Personas */
--persona-ferni: #4a6741;
--persona-ferni-glow: rgba(74, 103, 65, 0.28);

--persona-peter: #3a6b73;
--persona-peter-glow: rgba(58, 107, 115, 0.28);

--persona-maya: #a67a6a;
--persona-maya-glow: rgba(166, 122, 106, 0.28);

--persona-alex: #5a6b8a;
--persona-alex-glow: rgba(90, 107, 138, 0.28);

--persona-jordan: #c4856a;
--persona-jordan-glow: rgba(196, 133, 106, 0.28);

--persona-nayan: #b8956a;
--persona-nayan-glow: rgba(184, 149, 106, 0.28);

Theme Comparison