PulsePoint

PulsePoint mockup preview
Click to expand

Clinical, precise, data-driven — every pixel accountable to patient safety.

Primary Navy#1E3A5F
Secondary Red#E63946
Tertiary Steel#8D99AE
Neutral Slate#64748B
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayRed Hat Display · 36px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headlineRed Hat Display · 28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

subheadRed Hat Display · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyLargeInter · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyInter · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodySmallInter · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

captionInter · 11px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

overlineInter · 10px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

codeJetBrains Mono · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

Clinical, precise, data-driven — every pixel accountable to patient safety.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

filterstatusCriticalstatusWarningstatusNormalstatusInfo

Elevation & Depth

subtle
medium
large
overlay
alert

Do's & Don'ts

Do

Establish a clear alert hierarchy: Critical (red #E63946), Warning (amber #F59E0B), Info (blue #3B82F6), Normal (green #22C55E).
Give vital data (heart rate, SpO2, BP) the highest visual prominence with large mono numerals.
Design for real-time update patterns with smooth value transitions, not jarring number jumps.
Ensure all text meets WCAG AAA contrast (7:1) against the dark background for clinical readability.
Provide compact, data-dense layouts that minimize scrolling during time-sensitive workflows.
Design clear scan-zone layouts so clinicians can read vitals in a predictable left-to-right, top-to-bottom sweep.

Don't

Use red for anything other than critical/destructive states; reserve it so it always commands attention.
Use decorative animations in monitoring views; motion should only communicate data changes.
Hide critical information behind hover states or expandable sections in monitoring dashboards.
Rely on color alone for alerts; always pair with iconography, labels, and optional audible indicators.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 7.0 KB
Downloads 0
clean dark dashboard healthcare professional

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/pulsepoint and implement it in my code

Don't have the MCP? Install it here