Ferni Design System

A comprehensive design system for building human-centered AI experiences. Every token, component, and pattern is designed to make AI feel more human.

Philosophy

We believe in making AI human, and the decisions we make will reflect that.

The Ferni Design System embodies this philosophy through warm colors, organic animations, and thoughtful interactions that create genuine connections between people and AI.

Themes

Two carefully crafted themes for different contexts:

#584840
Cedar Night (Midnight)
Developer-focused, dark theme
#faf8f5
Zen Garden (Light)
Consumer-focused, light theme

Quick Start

Include the design tokens in your project:

<!-- CSS Variables -->
<link rel="stylesheet" href="https://design.ferni.ai/tokens.css">

<!-- Or import in your CSS -->
@import url('https://design.ferni.ai/tokens.css');

Then use the CSS variables in your styles:

.my-component {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all var(--duration-normal) var(--ease-out);
}

Core Personas

Six AI personas, each with their own color identity:

F
Ferni
Chief of Staff & Coordinator
--persona-ferni: #4a6741
P
Peter
Research & Strategy
--persona-peter: #3a6b73
M
Maya
Coaching & Habits
--persona-maya: #a67a6a
A
Alex
Communication & Writing
--persona-alex: #5a6b8a
J
Jordan
Planning & Goals
--persona-jordan: #c4856a
N
Nayan
Wisdom & Reflection
--persona-nayan: #b8956a

Key Principles

Human First

Every design decision prioritizes the human experience. Warmth over efficiency.

Organic Motion

Animations follow natural rhythms. Spring physics, breath-like pulsing, gentle easing.

Accessible by Default

WCAG 2.1 AA compliant. Every color pairing is tested for contrast.

Resources