[Design systems](/design-systems/) / Winspire RCM # Winspire RCM design system winspirercm.com Read from Winspire RCM's public website by Clinical Terminal. Not reviewed by Winspire RCM. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Winspire RCM homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100111.jpg?alt=media) ## Palette - Ground \#000000 \--color-black - Ink \#FFFFFF - Accent on the ground \#CBD5E1 - Primary \#CBD5E1 - On primary \#1A1A1A \--color-text - Secondary accent \#083151 - Dark \#090E19 - Site background \#000000 \--color-black ## Color ramps Color Sky 400 \#00BCFE 500 \#00A5EF 600 \#0084CC Color Blue 200 \#BEDBFF 300 \#90C5FF 400 \#54A2FF 500 \#3080FF 600 \#155DFC Color Indigo 300 \#A4B3FF 400 \#7D87FF 500 \#625FFF 950 \#1E1A4D Color Slate 50 \#F8FAFC 100 \#F1F5F9 200 \#E2E8F0 300 \#CAD5E2 400 \#90A1B9 500 \#62748E 600 \#45556C 700 \#314158 800 \#1D293D 900 \#0F172B 950 \#020618 Color Gray 50 \#F9FAFB 100 \#F3F4F6 200 \#E5E7EB 300 \#D1D5DC 400 \#99A1AF 500 \#6A7282 600 \#4A5565 800 \#1E2939 900 \#101828 Color Neutral 100 \#F5F5F5 200 \#E5E5E5 300 \#D4D4D4 700 \#404040 900 \#171717 ## Other named colors - \--color-black #000000 - \--color-white #FFFFFF - \--sb-track-color #232E33 - \--sb-thumb-color #FFFFFF - \--color-background #FFFFFF - \--color-text #1A1A1A - \--color-yellow-500 #EDB200 - \--color-emerald-500 #00BB7F - \--color-cyan-400 #00D2EF - \--color-purple-500 #AC4BFF - \--color-rose-500 #FF2357 - \--color-zinc-900 #18181B - \--color-zinc-950 #09090B ## Type Headings Outfit Winspire RCM at a glance Body Outfit Clear, readable paragraphs for clinicians, buyers and patients alike. - 3rem · 48pxWinspire RCM - 2.5rem · 40pxWinspire RCM - 2rem · 32pxWinspire RCM - 1.5rem · 24pxWinspire RCM - 1.25rem · 20pxWinspire RCM - 1.125rem · 18pxWinspire RCM - 1.1rem · 17.6pxWinspire RCM - 1rem · 16pxWinspire RCM ## Shape & depth Cards and panels: 20px corners · buttons and chips: 100px. ### Corner radii - 50% used in 57 rules - 24px used in 38 rules - 16px used in 32 rules - 12px used in 30 rules - 20px used in 28 rules - 999px used in 15 rules - 100px used in 12 rules - 8px used in 11 rules - 1.5rem used in 10 rules - 2rem used in 8 rules ### Shadows - 0 1px 2px #0000000d used in 4 rules - 0 20px 40px #0003 used in 3 rules - 0 10px 30px #0000001a used in 3 rules - 0 10px 30px #0000000d used in 3 rules - 0 20px 40px #0000004d used in 3 rules - 0 4px 30px #0000001a used in 2 rules ### Gradients - linear-gradient(#fff 0 0) used in 4 rules - linear-gradient(135deg,#4f9cf9,#8b5cf6) used in 4 rules - linear-gradient(135deg,#3b82f6 0%,#2563eb 100%) used in 3 rules - linear-gradient(135deg,#0d1f47 0%,#264792 50%,#4073bf 100%) used in 3 rules - linear-gradient(90deg,#264792,#4073bf) used in 3 rules - linear-gradient(90deg,#4073bf,#264792) used in 3 rules Breakpoints: 480px · 640px · 700px · 768px · 769px · 860px · 900px · 992px · 1024px · 1025px · 1100px · 1200px ## Voice Tone: professional. Energy: low. Written for patients and healthcare professionals. ## DESIGN.md The file Copy design system puts on your clipboard. [Open the raw file](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100111.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Winspire RCM" domain: "winspirercm.com" colors: primary: "#CBD5E1" onPrimary: "#1A1A1A" dark: "#090E19" accent: "#083151" background: "#000000" ground: mode: dark hex: "#000000" ink: "#FFFFFF" accent: "#CBD5E1" fonts: heading: "Outfit" body: "Outfit" radius: card: "20px" button: "100px" --- # Design System — Winspire RCM > Read from Winspire RCM's public website (winspirercm.com) by Clinical Terminal. Not reviewed by Winspire RCM. > Use it as inspiration: borrow the ideas, not Winspire RCM's name, logo or identity. ## Ground - **Dark ground** (#000000), from Winspire RCM's site background #000000. Pages and panels sit on it. - Main text: #FFFFFF (21:1 on the ground). - Secondary text is white at 88% / 76% / 60%; hairlines and plate borders white at 16%. ## Color - **Accent on the ground: #CBD5E1** (14.14:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #CBD5E1** for filled shapes (buttons, chips, bars), with #1A1A1A text on it (11.72:1). - Secondary accent #083151: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Outfit**. Body: **Outfit**. Both on Google Fonts. ## Shape - Cards and panels: 20px corners. Buttons and chips: 100px. ## Voice - Tone: professional. Energy: low. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Color Sky** (`--color-sky-N`): 400 `#00BCFE` · 500 `#00A5EF` · 600 `#0084CC` - **Color Blue** (`--color-blue-N`): 200 `#BEDBFF` · 300 `#90C5FF` · 400 `#54A2FF` · 500 `#3080FF` · 600 `#155DFC` - **Color Indigo** (`--color-indigo-N`): 300 `#A4B3FF` · 400 `#7D87FF` · 500 `#625FFF` · 950 `#1E1A4D` - **Color Slate** (`--color-slate-N`): 50 `#F8FAFC` · 100 `#F1F5F9` · 200 `#E2E8F0` · 300 `#CAD5E2` · 400 `#90A1B9` · 500 `#62748E` · 600 `#45556C` · 700 `#314158` · 800 `#1D293D` · 900 `#0F172B` · 950 `#020618` - **Color Gray** (`--color-gray-N`): 50 `#F9FAFB` · 100 `#F3F4F6` · 200 `#E5E7EB` · 300 `#D1D5DC` · 400 `#99A1AF` · 500 `#6A7282` · 600 `#4A5565` · 800 `#1E2939` · 900 `#101828` - **Color Neutral** (`--color-neutral-N`): 100 `#F5F5F5` · 200 `#E5E5E5` · 300 `#D4D4D4` · 700 `#404040` · 900 `#171717` ### Other named colors - `--color-black`: `#000000` - `--color-white`: `#FFFFFF` - `--sb-track-color`: `#232E33` - `--sb-thumb-color`: `#FFFFFF` - `--color-background`: `#FFFFFF` - `--color-text`: `#1A1A1A` - `--color-yellow-500`: `#EDB200` - `--color-emerald-500`: `#00BB7F` - `--color-cyan-400`: `#00D2EF` - `--color-purple-500`: `#AC4BFF` - `--color-rose-500`: `#FF2357` - `--color-zinc-900`: `#18181B` - `--color-zinc-950`: `#09090B` ### Typefaces - Outfit — on Google Fonts - Inter — on Google Fonts - Poppins — on Google Fonts ### Type scale (most-used sizes) `3rem` · `2.5rem` · `2rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1.1rem` · `1rem` · `.95rem` · `.9rem` · `.85rem` · `.75rem` ### Letter-spacing `.1em` (21) · `.05em` (16) · `.02em` (13) · `-.02em` (13) · `.15em` (10) · `-.03em` (8) ### Corner radii (most-used) `50%` · `24px` · `16px` · `12px` · `20px` · `999px` · `100px` · `8px` · `1.5rem` · `2rem` ### Shadows - `0 1px 2px #0000000d` - `0 20px 40px #0003` - `0 10px 30px #0000001a` - `0 10px 30px #0000000d` - `0 20px 40px #0000004d` - `0 4px 30px #0000001a` ### Gradients - `linear-gradient(#fff 0 0)` - `linear-gradient(135deg,#4f9cf9,#8b5cf6)` - `linear-gradient(135deg,#3b82f6 0%,#2563eb 100%)` - `linear-gradient(135deg,#0d1f47 0%,#264792 50%,#4073bf 100%)` - `linear-gradient(90deg,#264792,#4073bf)` - `linear-gradient(90deg,#4073bf,#264792)` ### Breakpoints 480px · 640px · 700px · 768px · 769px · 860px · 900px · 992px · 1024px · 1025px · 1100px · 1200px · 1280px · 1400px · 1440px ```