Extracted from the prototype's CSS custom properties and visual patterns.
Color Tokens
Primary Palette
| Token | Value | Usage |
|---|
--sp-navy | #245C7B | Primary brand color, sidebar, headers |
--sp-blue | #245C7B | Alias for navy |
--sp-sky | #3A7FA3 | Secondary blue, links, highlights |
--sp-gold | #BB9973 | Accent color, warnings, gold badges |
--sp-gold-rich | #9E7D58 | Deeper gold for emphasis |
--sp-mint | #4D8E7F | Success states, positive indicators |
--sp-rose | #B0616F | Danger/error states, urgent badges |
Neutral Palette
| Token | Value | Usage |
|---|
--sp-bg | #F4EEEA | Page background (warm cream) |
--sp-card | #ffffff | Card/panel backgrounds |
--sp-text | #2C2421 | Primary text (warm dark brown) |
--sp-muted | #7D6E66 | Secondary/muted text |
--sp-border | #E5DBD6 | Borders and dividers |
--sp-silver | #BFBBBD | Disabled states |
--sp-warm | #EAE3DF | Warm gray backgrounds |
--sp-cream | #F4EEEA | Alias for bg |
Semantic Colors
| Token | Value | Usage |
|---|
--sp-success | #4D8E7F | Same as mint — success states |
--sp-warning | #BB9973 | Same as gold — warning states |
--sp-danger | #B0616F | Same as rose — error/urgent states |
Tier Badge Colors
| Tier | Color | Style |
|---|
| Orion | Navy/Gold gradient | Premium feel for newborn tier |
| Lyra | Sky blue | Growth and harmony |
| Sirius | Mint/teal | Bright and energetic |
| Pegasus | Gold | Strength and imagination |
| Polaris | Silver/muted | Transitional/young adult |
Layout & Spacing
| Token | Value |
|---|
--radius | 14px |
--shadow | 0 1px 3px rgba(36,92,123,0.04), 0 4px 16px rgba(36,92,123,0.06) |
--shadow-lg | 0 4px 12px rgba(36,92,123,0.06), 0 16px 40px rgba(36,92,123,0.10) |
Layout Structure
- Fixed left sidebar, ~220px wide
- Brand logo + practice name at top
- Navigation items with emoji icons and optional badges (counts)
- Active item highlighted with navy/sky background
- Footer shows practitioner name and date
Main Content Area
- Fluid width, padded from sidebar
- Card-based layouts with
--shadow elevation
- Consistent 14px border radius on cards
- Warm cream background behind white cards
KPI Cards
- Row of metric cards at top of pages (Dashboard, Revenue, Billing)
- Large number + label + subtitle pattern
- Sometimes with colored accent borders
Tables
- Full-width within cards
- Sortable column headers (click to sort)
- Alternating row hover states
- Action buttons (Edit, Delete) right-aligned
- Status dots (colored circles) for payment/tier indicators
Modals
- Centered overlay with semi-transparent backdrop
- White card with 14px radius
- Header with title + close button
- Form fields with consistent padding
- Footer with Cancel + Primary action buttons
Typography
The prototype uses system fonts. Key patterns:
- Headers: Bold,
--sp-navy color
- Body text: Regular weight,
--sp-text color
- Muted text:
--sp-muted color, smaller size
- Numbers/metrics: Large, bold, navy
- Badges: Small caps, colored backgrounds, rounded
Component Patterns
Action Cards
- Icon (emoji) + title + description + urgency badge + date + action button
- Urgency levels: Red (urgent), Orange (soon/upcoming), Gray (scheduled)
- Navy background, white text
- Calendar emoji prefix
- Compact size for inline use
Status Indicators
- Colored dots: Green (paid/complete), Red (unpaid/overdue), Orange (upcoming)
- Text badges with background colors for tiers and stages
Pipeline Board
- Horizontal Kanban layout
- Cards within stage columns
- Stage advancement buttons between columns
- KPI summary row above the board
Design Philosophy
The design uses a warm, pediatric-friendly palette (creams, golds, soft blues) rather than clinical whites. The constellation-themed tier names (Orion, Lyra, Sirius, Pegasus, Polaris) carry through the entire brand identity. The UI prioritizes:
- Action-orientation — Every page surfaces what needs to be done next
- At-a-glance metrics — KPI cards on every major page
- Warmth over clinical — Emojis, rounded corners, warm colors
- Simplicity — No complex nested navigation, flat page structure