NeuronaHealth Design System

A comprehensive design system for healthcare applications. Built with accessibility, consistency, and scalability in mind.

Components

175+

Design Tokens

Themes (Light/Dark)

Healthcare Colors

Packages

Package	Version	Description
`@neuronahealth/design-tokens`	1.0.0	Brand design tokens — colors, typography, spacing, shadows, animations
`@neuronahealth/ui-components`	2.0.0	46 React components built on Radix UI primitives

Key Features

Emergency Status

Urgent Status

Routine Status

AI Triage

Healthcare-specific semantic tokens for emergency, urgent, routine, and AI triage contexts.

Colors

The NeuronaHealth color system includes brand colors, semantic healthcare colors, UI semantic colors, and chart colors. All colors support both light and dark themes.

Brand Colors

Primary

Orange

#FF6B35

Orange Soft

#FFE6D8

Secondary

Blue

#2E5BFF

Blue Soft

#DDE5FF

Success

Green

#22C55E

Green Soft

#D6F5E2

Accent Colors

Purple

#8B5CF6

Purple Soft

#ECE3FE

Cyan

#7DD3FC

Coral

#FB7185

Amber

#F59E0B

Healthcare Semantic Colors

Purpose-built colors for healthcare contexts: emergency, urgent, routine, and AI triage statuses.

Emergency

emergency

#EF4444

emergency-muted

#FEE2E2

⚠

Urgent

urgent

#F59E0B

urgent-muted

#FEF3C7

✓

Routine

routine

#22C55E

routine-muted

#DCFCE7

AI Triage

ai-triage

#8B5CF6

ai-triage-muted

#EDE9FE

UI Semantic Colors

Core UI colors for backgrounds, foregrounds, borders, and interactive states. Toggle the theme to see dark mode values.

Background & Foreground

background

#FFFFFF

foreground

#0F1117

card

#FFFFFF

primary

#2E5BFF

secondary

#FAF8F5

muted

#F1F3F7

accent

#FF6B35

border

#ECECEC

Chart Colors

Chart 1

#2E5BFF

Chart 2

#FF6B35

Chart 3

#22C55E

Chart 4

#8B5CF6

Chart 5

#F59E0B

Status Colors

Status indicators for user presence and availability states.

online

#22C55E

busy

#F59E0B

offline

#94A3B8

Gradients

Brand gradients for text and decorative elements.

text-gradient-warm

Healthcare Made Simple

text-gradient-care

AI-Powered Care

Typography

NeuronaHealth uses Inter for body text and Sora for display/heading text. JetBrains Mono is available for code.

Font Families

Sans (Body)

Inter — The quick brown fox jumps over the lazy dog

Display (Headings)

Sora — The quick brown fox jumps over the lazy dog

Mono (Code)

JetBrains Mono — const hello = "world";

Font Sizes

2xs

0.625rem / 10px

Sample text

0.75rem / 12px

Sample text

0.875rem / 14px

Sample text

base

1rem / 16px

Sample text

1.125rem / 18px

Sample text

1.25rem / 20px

Sample text

2xl

1.5rem / 24px

Sample

3xl

1.875rem / 30px

Sample

4xl

2.25rem / 36px

Sample

5xl

3rem / 48px

Sample

6xl

3.75rem / 60px

Sample

7xl

4.5rem / 72px

Sample

Font Weights

Thin (100) — The quick brown fox

Extra Light (200) — The quick brown fox

Light (300) — The quick brown fox

Normal (400) — The quick brown fox

Medium (500) — The quick brown fox

Semibold (600) — The quick brown fox

Bold (700) — The quick brown fox

Extra Bold (800) — The quick brown fox

Black (900) — The quick brown fox

Line Heights

none (1)

Tight line height for headings

tight (1.25)

Compact line height for titles

snug (1.375)

Comfortable for short text

normal (1.5)

Default for body text content

relaxed (1.625)

Comfortable for longer paragraphs

loose (2)

Spacious for extended reading

Letter Spacing

tighter (-0.05em)

Tightly spaced for large headlines

tight (-0.02em)

Slightly condensed for headings

normal (0em)

Default spacing for body text

wide (0.025em)

Expanded for small text or labels

wider (0.05em)

Wide spacing for buttons or badges

widest (0.1em)

Very wide for decorative purposes

Spacing

A consistent spacing scale based on 4px increments. Used for margins, padding, and gaps.

0.5

0.125rem / 2px

0.25rem / 4px

0.5rem / 8px

0.75rem / 12px

1rem / 16px

1.5rem / 24px

2rem / 32px

3rem / 48px

4rem / 64px

5rem / 80px

6rem / 96px

8rem / 128px

Border Radius

Border radius tokens for consistent corner rounding across the design system.

none

0.125rem

default

0.25rem

0.375rem

0.5rem

0.75rem

2xl

1rem

3xl

1.5rem

full

9999px

Shadows

Elevation and shadow tokens for creating visual hierarchy and depth.

default

2xl

card

soft

glow-primary

Animations

Animation durations, easings, and keyframe presets for consistent motion design.

Durations

75ms

duration-75

150ms

duration-150

200ms

duration-200

300ms

duration-300

500ms

duration-500

Animation Presets

fade-in

Fade In Animation

slide-in-up

Slide In Up Animation

shimmer (loading state)

Breakpoints

Responsive breakpoint tokens for layout adaptation across device sizes.

Name	Min Width	Typical Device
`xs`	320px	Small phones
`sm`	480px	Large phones
`md`	768px	Tablets
`lg`	992px	Small laptops
`xl`	1280px	Desktops
`2xl`	1536px	Large desktops
`3xl`	1920px	4K screens

Z-Index

Z-index scale for consistent layering and stacking contexts.

Name	Value	Usage
`hide`	-1	Hidden behind base layer
`base`	0	Default layer
`dropdown`	10	Dropdown menus
`sticky`	20	Sticky headers
`fixed`	30	Fixed position elements
`modal-backdrop`	40	Modal overlay backgrounds
`modal`	50	Modal dialogs
`popover`	60	Popover menus
`tooltip`	70	Tooltips
`toast`	80	Toast notifications
`top`	90	Highest priority UI
`max`	999	Absolute maximum

Button

46 components

Buttons trigger actions. Use variants to indicate different types of actions.

Variants

Sizes

States

With Icons

Loading State

Full Width

Button Group

Badge

Badges display short status descriptors.

Variants

Default Secondary Destructive Outline

Sizes

Small Default Large

With Dot Indicator

New Alert Active

Removable

Tag Filter

Healthcare Status Badges

Specialized badges for healthcare contexts indicating patient urgency levels.

Status Variants

Emergency Urgent Routine AI Triage

Input

Text inputs allow users to enter and edit text.

Default

States

Validation States

This field is required

Looks good!

With Labels

Email Address

We'll never share your email.

Password *

Sizes

Textarea

Multi-line text input for longer content.

Default

States

Card

Cards group related content and actions.

Default

Card Title

Card description text

This is the card content area. Cards can contain any type of content including text, images, and actions.

Interactive Card

Hoverable Card

Hover to see the interaction

This card has a hover effect that lifts it slightly.

Card with Header Only

Simple Header Card

Alert

Alerts display important messages to users.

Variants

Default Alert

This is a default alert message.

✓ Success

Your changes have been saved successfully.

⚠ Warning

This action cannot be undone.

ℹ Information

A new version is available for download.

✕ Error

Something went wrong. Please try again.

With Close Button

Dismissible Alert

Click the X to dismiss this alert.

Avatar

Avatars represent users or entities.

Sizes

With Status Indicator

Avatar Group

Checkbox

Checkboxes allow users to select multiple options.

Default

Checked option

Unchecked option

Switch

Switches toggle the state of a single setting.

Default

Toggle setting

Progress

Progress bars show completion status.

Default

25%

50%

75%

Colors

Primary

Success

Warning

Danger

Sizes

Small

Default

Large

Indeterminate

Skeleton

Skeletons show placeholder content while loading.

Default

Separator

Separators divide content sections.

Default

Content above

Content below

Tabs

Tabs organize content into separate views.

Default

Tab content area

Pills Variant

Underline Variant

Table

Tables display data in rows and columns.

Default

Name	Status	Date
John Smith	Active	2024-01-15
Jane Doe	Pending	2024-01-14
Bob Wilson	Inactive	2024-01-13

Striped Rows

Patient	Department	Status
Sarah Johnson	Cardiology	Stable
Michael Chen	Emergency	Critical
Emily Davis	Orthopedics	Observation

Hoverable Rows

Medication	Dosage	Frequency
Aspirin	81mg	Once daily
Metformin	500mg	Twice daily
Lisinopril	10mg	Once daily

Dense Table

Time	Event	User
10:30 AM	Appointment created	Dr. Smith
10:15 AM	Lab results uploaded	System
09:45 AM	Patient checked in	Reception

Healthcare Examples

Real-world examples showing how components are used in healthcare contexts.

Patient Cards

Maria Johnson

ID: #4521

Critical

Department: Emergency

Room: ER-12

Thomas Chen

ID: #3892

Stable

Department: General Ward

Room: 302-A

Appointment Card

Upcoming Appointment

Tomorrow

Dr. Sarah Williams

Cardiologist

Date

June 28, 2026

Time

10:30 AM

Location

Medical Center, Floor 3

Duration

30 minutes

Status Indicators

Emergency - Critical

Urgent - Needs Attention

Routine - Normal

Medical Alert Card

ALLERGY Penicillin

Patient has a documented severe allergic reaction to penicillin and related antibiotics. Alternative medications required.

Form Example

Complete form with validation states and various input types.

Patient Registration Form

Full Name *

Email Address

Please enter a valid email address

Phone Number *

Valid phone number

Date of Birth *

Medical Notes

Optional: Add allergies, conditions, or medications

I consent to the processing of my personal health information

All Components

Complete list of 46 components in the NeuronaHealth UI system.

Component	Description	Category
Accordion	Vertically stacked interactive panels	Disclosure
Alert Dialog	Modal dialog for critical actions	Overlay
Alert	Displays important messages	Feedback
Aspect Ratio	Constrains content to a ratio	Layout
Avatar	Represents users or entities	Data Display
Badge	Short status descriptors	Data Display
Breadcrumb	Navigation path indicator	Navigation
Button	Triggers actions	Form
Calendar	Date selection widget	Form
Card	Groups related content	Layout
Carousel	Slides through content	Data Display
Chart	Data visualization	Data Display
Checkbox	Multi-select input	Form
Collapsible	Toggle content visibility	Disclosure
Command	Command palette menu	Overlay
Context Menu	Right-click menu	Overlay
Dialog	Modal dialog window	Overlay
Drawer	Side panel drawer	Overlay
Dropdown Menu	Dropdown action menu	Overlay
Form	Form handling with validation	Form
Hover Card	Card that appears on hover	Overlay
Input OTP	One-time password input	Form
Input	Text input field	Form
Label	Form field label	Form
Menubar	Horizontal menu bar	Navigation
Navigation Menu	Complex navigation	Navigation
Pagination	Page navigation	Navigation
Popover	Floating content panel	Overlay
Progress	Progress indicator	Feedback
Radio Group	Single selection group	Form
Resizable	Resizable panels	Layout
Scroll Area	Custom scrollable area	Layout
Select	Dropdown selection	Form
Separator	Visual divider	Layout
Sheet	Side panel overlay	Overlay
Sidebar	App sidebar layout	Navigation
Skeleton	Loading placeholder	Feedback
Slider	Range input slider	Form
Sonner	Toast notifications	Feedback
Switch	Toggle switch	Form
Table	Data table	Data Display
Tabs	Tabbed content	Navigation
Textarea	Multi-line text input	Form
Toggle Group	Toggle button group	Form
Toggle	Two-state button	Form
Tooltip	Hover information	Overlay