Color Palette
The warm neumorphic canvas, text hierarchy, and brand accent colors. All defined as CSS custom properties in index.css.
Neutrals
Canvas
--bg-canvas
Surface
--bg-surface
Surface Alt
--bg-surface-alt
Text Primary
--text-primary
Text Secondary
--text-secondary
Text Muted
--text-muted
Line
--line
Brand Accents
Sage
Terracotta
Blush
Dusty Blue
Yellow
Neon
Lavender
Brown
Status Colors
Typography
DM Sans for body and headings, Archivo for brand marks and uppercase labels. Tight letter-spacing on large text; wide tracking on uppercase labels.
Body Font
DM Sans
Used for all body text, headings, and UI labels.
Brand Font
Archivo
Used for the logo, brand marks, and uppercase section labels.
Uppercase Label Pattern
Section headers use 11px, weight 600, 0.1em letter-spacing, uppercase in muted text color. This creates the quiet, architectural feel throughout the interface.
Surfaces & Shadows
The neumorphic system uses two surface tones — a warm canvas and a slightly lighter surface — paired with directional shadows. Raised elements push out; interactive pressed states sink in.
neu-raised
Large raised card
neu-inset
Large inset surface
neu-raised-sm
Small raised element
neu-inset-sm
Small inset element
sidebar-float
Floating sidebar panel
nav-active
Active nav item (inset)
Shadow Tokens
--shadow-out
Large raised shadow
--shadow-out-sm
Small raised shadow
--shadow-in
Large inset shadow
--shadow-in-sm
Small inset shadow
Form Elements
Inset inputs that appear carved into the surface. Field labels in muted text with optional hints. Segmented toggles for binary choices.
Text Input
Input with Hint
Helper text appears below the label
Select Dropdown
Textarea
Segmented Toggle
Date Input
Cards
Raised surfaces that lift on hover (floatHover). Three core patterns: stat cards with inset number wells, list items with progress, and detail cards with avatar + stats.
Stat Card
Active
Done
Blocked
List Item Card
Member Detail Card
Ada Lovelace
Lead18
Total
13
Complete
1
Paused
Progress
Three progress patterns: inset track bars, SVG progress rings, and count-up number animations. All animate smoothly on mount.
Progress Bar
75% complete
40% complete
Progress Ring
Count Up
Badges & Pips
Status pills with pip dots, role badges, and filter chips. Pips are 7px dots that signal state at a glance.
Pip Dots
Filter Chips
Modals
Overlay panels with a blurred backdrop (12px blur) and a raised surface card. A neumorphic close button sits in the top-right corner.
Animations
The motion language: fade-up entrances, float-hover lifts, letter-by-letter intros, the morphing dot logo, a live pulse, and count-up numbers. All powered by Framer Motion and requestAnimationFrame.
Fade Up
Float Hover
Letter Intro
Logo Morph
Live Pulse
Count Up
A real-time analog clock rendered with SVG, updating every 50ms. Used in the sidebar as a living design element. The cursor-following radial glow (visible across the app) is another ambient animation layered on the canvas.