2ndBrain Design System

A cognitive color palette designed for extended thinking. Built with P3 wide-gamut colors for displays that can render the full spectrum of human thought.

Design Philosophy

Cognitive Comfort

Colors that support extended focus without fatigue. Deep blues for concentration, light cyans for clarity.

Adaptive Spectrum

From night-mode indigos to day-mode cyans, our palette breathes with your circadian rhythm.

P3 Wide Gamut

25% more colors than sRGB. Your thoughts deserve the full spectrum.

Primary · Deep Cognition

Our foundation. The depth of thought, from midnight contemplation to dawn clarity.

Indigo 950

#1e1b4b

Indigo 900

#312e81

Indigo 800

#3730a3

Indigo 700

#4338ca

Indigo 600

#4f46e5

Indigo 500

#6366f1

Secondary · Neural Activity

The spark of synapses. Electric blues that represent active thinking and processing.

Blue 600

#2563eb

Blue 500

#3b82f6

Sky 500

#0ea5e9

Sky 400

#38bdf8

Cyan 400

#22d3ee

Cyan 300

#67e8f9

Tertiary · Wisdom Accent

The purple of insight. Reserved for moments of breakthrough and discovery.

Purple 700

#6b21a8

Purple 600

#7c3aed

Purple 500

#a855f7

Violet 500

#8b5cf6

Fuchsia 500

#d946ef

Pink 400

#f472b6

Quaternary · Energy States

Action and urgency. From calm success to critical alerts.

Emerald 500

#10b981

Amber 500

#f59e0b

Orange 500

#f97316

Rose 500

#f43f5e

Red 600

#dc2626

Gray 500

#6b7280

Typography

Display Heading

text-5xl font-bold

Section Heading

text-3xl font-semibold

Subsection

text-xl

Body text for extended reading. Optimized for clarity and comfort during long thinking sessions.

text-base text-slate-300

Supporting text and metadata

text-sm text-slate-400

Component Patterns

Call to Action

Status Indicators

Active · Processing

Pending · Waiting

Critical · Attention

Inactive · Archived

Card Styles

Neural Card

For cognitive content

Insight Card

For discoveries

Signature Gradients

Usage Guidelines

Do's

Use indigo-blue gradient for primary actions
Apply P3 colors on supported displays
Maintain 4.5:1 contrast ratio for text
Use purple accents for AI/insight features

Don'ts

×Don't use more than 3 colors in one component
×Avoid pure white on dark backgrounds
×Don't mix warm and cool CTAs
×Never use red except for critical alerts

Accessibility

Contrast Ratios

White on Indigo-6007.5:1 ✓

Slate-300 on Slate-9509.2:1 ✓

Indigo-400 on White4.8:1 ✓

Color Blind Safe

Our palette is tested for deuteranopia, protanopia, and tritanopia. Critical information never relies on color alone.

WCAG AAA

P3 Compatible

Dark Mode First

Spark

Our mascot is the synapse moment — you and your spare brain, connected by a poppy-yellow spark. The green heart is a thought worth keeping. Use pair for story moments; solo for badges and tight spaces.

Pair · full story

Onboarding, footer hero, extension welcome

Solo · mark

Nav, legal bar, favicon, chips

Assets: packages/brand/spark-mascot.svg · spark-solo.svg · <Spark variant="pair|solo" />

The cast

Spark is the synapse — smart, abstract, the second brain. Sidekicks are cuddly field agents (Fig-the-fox energy). Drop different ones on different surfaces and see who sticks.

Scout

Sniffs out saves worth keeping

Ferret field agent — hoards shiny tabs, never met a link he didn’t want to boop.

sidebar · tag step · search

Pip

Peep-peeps your first win

Round chick cheerleader — soft, loud, celebrates before you do.

landing · onboarding · how-it-works

Mote

Catches thoughts mid-float

Fluffy idea-dust — drifts through loading states and suggestion feeds.

dots panel · empty states · thinking

2ndBrain Design System v1.0 · Optimized for cognition · 2026