PharmFlow

PharmFlow mockup preview
Click to expand

Systematic, organized, safety-first — precision that protects patients. PharmFlow is a compact, safety-oriented design system built for pharmacy management and prescription tracking systems. Every design decision prioritizes error prevention: high-contrast drug interaction warnings, prominent dosage displays, and color-coded safety tiers. The system uses a tight 4px grid to accommodate dense pharmaceutical data without sacrificing scannability. Subtle shadows and medium radii create a clean, systematic interface that pharmacists can trust under pressure.

Primary Blue#2563EB
Secondary Green#059669
Tertiary Amber#D97706
Neutral Slate#64748B
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayWork Sans · 32px · Bold

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

HeadlineWork Sans · 24px · Bold

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

SubheadWork Sans · 18px · SemiBold

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

Body LargeInter · 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.

Body SmallInter · 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.

CodeRoboto 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

Systematic, organized, safety-first — precision that protects patients. PharmFlow is a compact, safety-oriented design system built for pharmacy management and prescription tracking systems. Every design decision prioritizes error prevention: high-contrast drug interaction warnings, prominent dosage displays, and color-coded safety tiers. The system uses a tight 4px grid to accommodate dense pharmaceutical data without sacrificing scannability. Subtle shadows and medium radii create a clean, systematic interface that pharmacists can trust under pressure.

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

FilterActive FilterStatus VerifiedStatus InteractionStatus ContraindicatedStatus Pending

Elevation & Depth

Subtle
Medium
Large
Overlay
Warning

Do's & Don'ts

Do

display drug interaction warnings with amber background (#FFFBEB) and prominent iconography immediately adjacent to medication names.
present dosage information in large, high-contrast monospaced text (Roboto Mono, 18px+, #0F172A) to minimize misreading.
provide clear, dedicated barcode/scan target areas with generous padding and high-contrast borders for handheld scanner workflows.
implement safety-critical color coding consistently: green = verified, amber = warning/interaction, red = contraindicated/critical.
use compact layouts with the 4px grid, but maintain at least 8px padding around interactive elements for reliable touch targets.
surface expiration dates with progressive urgency: 90 days = info, 30 days = amber, 7 days = red.

Don't

use red (#DC2626) for anything other than contraindications and critical safety alerts; it must never lose its urgency.
allow destructive actions (dispensing, deleting prescriptions) without a confirmation dialog that restates the action.
truncate drug names or dosage instructions; use wrapping or expandable rows instead.
auto-complete drug names without explicit user selection from a verified list to prevent prescription errors.
Download .md

License MIT
Uploaded yesterday
Version v1
File size 7.1 KB
Downloads 0

Use with MCP

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

Don't have the MCP? Install it here