CruxMD Design System
Colors, typography, and components for the CruxMD clinical intelligence platform.
Design Philosophy
Natural & Professional
The palette uses organic greens, teals, and golds balanced with neutral ivories, creating an approachable yet trustworthy aesthetic for clinical contexts.
Clinical Clarity
Information hierarchy is paramount. Color-coded insight cards communicate urgency at a glance: blue for info, yellow for warning, red for critical, green for positive.
Accessible by Default
All color combinations meet WCAG contrast requirements. Dark mode is fully supported with carefully tuned values for each semantic token.
Component-First
Built on shadcn/ui primitives with Radix UI accessibility. Components are composable, theme-aware, and designed for consistency across the platform.
Explore
Brand
Brand identity, voice, principles, and visual guidelines
Assets
Logos, wordmarks, and downloadable brand assets
Colors
Brand palette, semantic tokens, and clinical insight colors
Typography
Geist font family, heading scale, and body text styles
Layout
Spacing scale, grid system, and content width guidelines
Components
Buttons, cards, tables, charts, and interactive elements
Icons
Lucide icon set used throughout the application