Buttons
01Make the next action feel obvious.
PRIMARY / SECONDARY / TEXT / DISABLED
THE OUTPATIENT DESIGN LANGUAGE
Readiness in
every detail.
The Outpatient App brand, brought together.
Identity, color, type, and interfaces for medical readiness.
NAVY. CORAL. MONTSERRAT.
Built for the mission.
Built for the mission.
THE OUTPATIENT APP IDENTITYReadiness in
OP / 01Readiness in
Motion
Guiding service members. Coordinating care.
Giving leaders operational clarity.
01 — IDENTITYThe original Outpatient mark
02 — FOUNDATIONNavy grounded. Coral forward.
03 — EXPERIENCEMedical readiness in motion
02 / BRAND IDENTITY
The original. Unmistakably Outpatient.
The website’s original symbol and white uppercase name.
Matching its sizing, letter spacing, and proportions.
WEBSITE LOCKUP · NAVY BACKGROUND
BRAND SYMBOL · NAVY BACKGROUNDSVG: scalable vector artwork with outlined lettering. PNG: full logo at 2400 × 640 px; symbol at 1024 × 1024 px. Choose navy or transparent backgrounds. Transparent files retain the white lettering and white symbol details for use on dark backgrounds.
↗ Website lockup: 59.5px symbol, 12px gap, and 18px Montserrat Bold lettering with 0.18em letter spacing. Scale the full lockup together to preserve these proportions.
OUTPATIENT AI
The intelligence behind the experience.
The website’s original AI symbol and gradient treatment, paired with a matching uppercase wordmark.
OUTPATIENT AI · FULL LOGO
OUTPATIENT AI · BRAND SYMBOLSVG lettering is outlined. PNG: full logo at 2400 × 640 px; symbol at 1024 × 1024 px. Transparent versions remove the navy background and retain the gradient circle and white artwork.
03 / COLOR PALETTE
Navy foundation. Coral energy.
Core colors from the Outpatient App prototype.
Select any swatch to copy its hex value.
App blue
#2C426BApp canvas
#F8F8F8Success
#00C581Alert
#F05050Web violet
#915BCBExisting palette variations
The marketing website defines navy #142136, coral #FF705E, and cyan #12A7D2. Additional brand treatments use navy #142238 and coral #FF7962. Keep each palette consistent within its application.
For small text on coral or cyan, use navy. Bright success and alert colors need dark labels and a supporting icon; color alone should never communicate status.
04 / TYPOGRAPHY
Clear words. Strong character.
A confident headline. An effortless read.
A hierarchy that makes the next step obvious.
OUR TYPEFACE
Aa.
Montserrat
The typeface for the Outpatient brand.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*
Medium 500Semibold 600Bold 700
Display
56 / 1.1 / 700Readiness.
Heading
32 / 1.2 / 600Built for the mission.
Subheading
20 / 1.4 / 600Medical readiness, simplified.
Body
16 / 1.6 / 500Help people move through their day with confidence. Keep language simple, useful, and human.
Label
11 / 1.4 / 600OUTPATIENT APP · MEDICAL READINESS
Montserrat throughout: headings, body text, navigation, and controls. Bold, tightly spaced headlines pair with coral emphasis and uppercase, widely spaced labels.
05 / COMPONENTS
Familiar. Flexible. Functional.
Small building blocks, thoughtfully connected.
Try the controls below.
Form essentials
02CLEAR LABELS / VISIBLE FOCUS / SIMPLE CHOICES
Status & feedback
03● Complete◷ Pending! Action needed
✓
Everything is up to date
Your team has the latest information.
PAIR COLOR WITH A LABEL AND AN ICON
Connected care card
04ILLUSTRATIVE APPOINTMENT
PHA assessment
Oct 12 · 9:30 AM · Main clinic
✓ Confirmed
Demo appointment · Arrive 15 minutes early and bring your appointment confirmation.
INFORMATION FIRST / ONE CLEAR NEXT STEP
FROM THE OUTPATIENT APP
Patterns for the work that matters.
Readiness, scheduling, and coordination. Interactive examples adapted from the app, using fictional demo data.
Readiness table & member lookup
05| Rank | Requirements | Medical clearance | Action |
|---|
SEARCH / FILTER / SORT / PAGINATION / REQUIREMENT STATES
Scheduling & availability
06December 2026 Sample availability
Fly CMR · December 10 · Select a time
SEGMENTED CHOICE / SELECTED DATE / AVAILABLE & FULL
Status vocabulary
07Preserve the app’s distinct status meanings.
MEDICAL CLEARANCE
ClearedNot ClearedDisqualified
ASSESSMENT PROGRESS
CompletedDue SoonOverdue
RISK LEVEL
LowModerateHigh
EXPLICIT LABELS / CONSISTENT SEMANTICS / APP COLORS
Warrior Messaging
08AC
Alex CarterCare coordination · Demo conversation
1Your appointment time is confirmed.
Thank you. I’ll be there.
CONVERSATION / UNREAD / ATTACHMENT / LOCAL PREVIEW ONLY
Guided workflows & notifications
09Keep a complex task focused on the next step.
- 1Patient info
- 2Consult details
- 3Notes
Consult request
A short, guided flow with clear progress and a review step.
STEP PROGRESS / MODAL / NOTIFICATION DRAWER
06 / ICONS
Familiar signs. Clear destinations.
The 15 navigation icons from Outpatient App.
Original vector artwork, ready to reuse.
Scheduling
SVG ↓
CMR
SVG ↓
Dental
SVG ↓
OHE
SVG ↓
Unit Summary
SVG ↓
PHA/MHA Admin
SVG ↓
Messages
SVG ↓
AI Assist
SVG ↓
Reports
SVG ↓
Service Members
SVG ↓
Staff
SVG ↓
IMR
SVG ↓
Consults
SVG ↓
On-Call
SVG ↓
Calendar
SVG ↓
20px in the app
Keep a consistent 20 × 20px icon box. The gallery enlarges artwork to 32px for inspection.
One inherited color
SVGs use currentColor and preserve the app’s subtle fills. Set color on inline SVGs to match their context.
Always give context
Pair navigation icons with visible labels. Give icon-only controls an accessible name.
07 / GRAPHICS
Show the product. Tell the story.
Purposeful illustrations for the Outpatient platform.
Clear interfaces. Focused details. Recognizable moments.
Readiness Scheduling
Self-scheduling, confirmations, and coordinated readiness events.
Download HTML ↓PHA & MHA
Conversational assessments, adaptive follow-up, and provider review.
Download HTML ↓Individual Medical Readiness
One view of requirements, clearance status, and next actions.
Download HTML ↓Dental Compliance
Track classifications, identify gaps, and coordinate care.
Download HTML ↓Warrior Messaging
Secure outreach, reminders, and clear next steps for members.
Download HTML ↓On-Call Management
Coordinate on-call schedules, coverage, and team contacts.
Download HTML ↓Focus on one capability
Show a recognizable task with just enough detail to explain it. Keep the illustration easy to scan.
Frame with navy
Use a light interface within a dark frame, with coral emphasis and restrained color accents.
Scale as a whole
Keep proportions intact. These illustrations communicate product capabilities; they are not interactive app controls.
HTML downloads include the illustration, typography, and artwork in one file.
08 / SPACING & LAYOUT
Room to breathe.
Working layout guidance for this page.
Let the existing interface define its own density.
Structure that adapts.
Pill-shaped marketing actions, compact app controls, and generous section spacing. This guide uses fluid columns that stack on small screens.
09 / DESIGN PRINCIPLES
Good design takes care.
Lead with clarity.
Remove the unnecessary. Make the important easy to find and the next step easy to take.
Keep it human.
Use familiar language, thoughtful space, and reassuring feedback. Design for real people.
Build for everyone.
Support keyboard navigation, readable contrast, and reduced motion. Never rely on color alone.