Skip to content

Design System

Jump to bottom
harshcode1 edited this page Jun 20, 2026 · 1 revision

Design System

BetterMind underwent a full redesign from a dark "glassmorphism" theme to a calming light design system. The driver was color psychology: for a mental-health audience, dark/high-contrast neon interfaces can feel anxiety-inducing, while soft light surfaces, generous whitespace, and a restrained palette read as calm, safe, and trustworthy.

Palette

Defined as Tailwind theme extensions and CSS custom properties.

Token Role Value
surface-1 App background #fafbff (near-white, faint blue)
surface-2 Subtle panels light grey-blue
surface-border Hairline borders #e8edf5
brand Primary (indigo) #6366f1 family — trust, focus
mint Success / positive #10b981 family — growth, calm
calm Secondary accent violet family
warm / amber / rose Status & alerts warning / error
ink-1…ink-5 Text hierarchy dark → light grey

CSS variables (--bg, --surface, --brand, --text-1, …) mirror these for non-Tailwind contexts.

Component classes (globals.css)

Reusable, semantic component classes keep markup clean and consistent:

  • Surfaces: .card, .stat-card, .section, .page-header
  • Buttons: .btn-primary, .btn-secondary, .btn-soft, .btn-mint
  • Inputs: .input
  • Badges: .badge + variants badge-brand|mint|calm|warm|rose|amber|slate
  • Icon containers: .icon-box + variants icon-box-brand|mint|calm|warm|rose|amber
  • Navigation: .tab-bar, .tab-item, .chip (+ .chip.active)
  • States: .skeleton, .empty-state, .empty-state-icon
  • Decorative: .blob (+ blob-brand|mint|calm|warm), .gradient-text, bg-gradient-brand, bg-gradient-hero

Legacy compatibility aliases

To migrate page-by-page without breakage, the old dark-theme class names alias to the new ones:

.glass        → .card
.btn-gradient → .btn-primary
.input-dark   → .input

Motion

framer-motion provides the micro-interactions:

  • Entrance animations (initial/animate) on cards and lists with small staggered delays.
  • AnimatePresence for mounting/unmounting (modals, route content, list reordering with popLayout).
  • A shared-layout (layoutId="nav-active") pill that glides between active nav links.
  • whileHover / whileTap on interactive elements.

Animation timings are tuned to feel gentle ("therapeutic") rather than snappy.

Data visualization theme

Recharts components share a light theme: #f1f5f9 gridlines, #94a3b8 axis text, white tooltips with soft shadows, and brand-indigo series with subtle gradient fills (neon glows from the old theme were removed).

Typography

  • Display: Space Grotesk (headings)
  • Body: Inter
  • Mono: JetBrains Mono (codes, secrets)

Accessibility notes

  • High text-contrast ratios against light surfaces.
  • Focus rings preserved on inputs and buttons.
  • Color is never the only signal — icons + text accompany status badges.

Related

BetterMind Wiki

Repository ↗

Clone this wiki locally