Foundation
Colors
The Clinic Admin color system is built around Clinic Teal as the primary action color, with supporting neutrals, status colors, and semantic tokens.
Brand Palette
Clinic Teal
#70C4CA · Primary
Soft Sage
#C3D9DA · Secondary
Blush Pink
#F7A9AA · Destructive
Cool Grey
#C4D0DB · Borders
Light Surface
#F3F4F6 · Surfaces
Heading
#353D4A · Headings
Body
#657486 · Body text
Primary shades
Lighter and darker variants of the primary color for backgrounds, hovers, and emphasis.
Primary 50
#E8F6F7
Lightest tint, subtle backgrounds
Primary 100
#C8EBEE
Light backgrounds, hover states
Primary 200
#A8E0E4
Soft fills, disabled backgrounds
Primary 300
#88D5DA
Borders, dividers
Primary 400
#70C4CA
Base primary (actions, links)
Primary 500
#5BA8AD
Hover on primary buttons
Primary 600
#468C90
Active primary states
Primary 700
#317073
Pressed, focus rings
Primary 800
#255A5D
Dark accents
Primary 900
#1A4547
Darkest primary, text on light
Gray shades (backgrounds & borders)
Neutral grays for page and surface backgrounds, borders, and dividers.
Gray 50
#F9FAFB
Page background, cards
Gray 100
#F3F4F6
Surface background, muted areas
Gray 200
#E5E7EB
Borders, dividers, inputs
Gray 300
#D1D5DB
Border default, disabled
Gray 400
#9CA3AF
Placeholder, icons
Gray 500
#6B7280
Secondary text, borders
Gray 600
#657486
Supporting text (body)
Gray 700
#4B5563
Emphasis text
Gray 800
#353D4A
Heading text, dark borders
Gray 900
#1F2937
Darkest text, strong contrast
Status Colors
Semantic colors for badges, labels, and status communication across the system.
Success
Success
BG #EAF8EF · Text #186B36
Completed, confirmed
Warning
Warning
BG #FFF5DE · Text #8A5A00
Needs attention
Error
Error
BG #FDEFEF · Text #8A2A2E
Failed, cancelled
Info
Info
BG #EAF7F8 · Text #2F6F73
Informational, in progress
Pending
Pending
BG #F3F4F6 · Text #4B5563
Awaiting action