OwnaMed

Component Kitchen Sink

A public development page for reviewing the OwnaMed interface system. It mixes current patterns with proposed components so the team can evaluate structure, density, states, and highlights before promoting anything into production workflows.

Neutral firstHighlight optionsDanger states

01

Foundation

The default interface should feel black, white, and calm. Semantic color is reserved for moments where the user must notice status, risk, or completion.

Brand logos

Full wordmark

OwnaMed

Compact mark

OwnaMed OM

The full logo is preferred in expanded layouts. The compact OM mark is reserved for collapsed navigation, favicons, and tight spaces.

Neutral palette

Ink
Charcoal
Line
Canvas

Typography scale

Eyebrow Label

Patient overview

Readable body copy for clinical and administrative context.

Encounter #1024 - queued - consent complete

02

Color Scheme

Theme colors used by the interface, including their Tailwind token names, hex values, visual swatches, and intended usage.

Neutral Interface

Primary palette for the black and white OwnaMed interface.

Canvas

neutral-50#fafafa

Page backgrounds and subtle panels

Surface

white#ffffff

Cards, inputs, table bodies

Soft Border

neutral-200#e5e5e5

Default borders and dividers

Muted Text

neutral-500#737373

Secondary labels and helper text

Body Text

neutral-600#525252

Body copy when not fully black

Primary Ink

neutral-950#0a0a0a

Primary text, active nav, primary buttons

Dark Interface

Used when the theme switch is set to Dark or System follows dark mode.

Dark Canvas

neutral-950#0a0a0a

Dark page backgrounds

Dark Panel

neutral-900#171717

Raised dark panels and muted fills

Dark Border

neutral-800#262626

Borders and dividers on dark surfaces

Dark Muted Text

neutral-400#a3a3a3

Secondary text in dark mode

Dark Heading

neutral-50#fafafa

Primary text in dark mode

Inverted Action

neutral-100#f5f5f5

Primary buttons on dark backgrounds

Approved Highlight Borders

Color is primarily used as a boundary signal: left rails, rings, dots, and danger marks.

Danger Rail

red-500#ef4444

Identity mismatch, revoke, destructive boundary

Danger Fill

red-50#fef2f2

Soft danger backgrounds when color fill is needed

Warning Rail

amber-500#f59e0b

Consent pending, waiting too long, review needed

Warning Ring

amber-100#fef3c7

Quiet halo around review-needed cards

Success Rail

emerald-500#10b981

Ready, complete, verified states

Info Rail

blue-500#3b82f6

Shared externally, transcript available, informational state

Status Text and Dots

Used sparingly for badges, alert dots, and compact status labels.

Info Text

blue-800#1e40af

Informational badge text

Success Text

emerald-800#065f46

Successful or complete badge text

Warning Text

amber-800#92400e

Needs attention but not destructive

Danger Text

red-800#991b1b

Destructive or failed states

Critical Dot

red-600#dc2626

High-priority dots and lock state signals

Neutral Dot

neutral-900#171717

Default status dot

04

Actions

Button styles should make the primary action clear while preserving an understated monochrome interface.

Button variants

Destructive actions

05

Forms

Inputs, consent controls, and verification fields used across intake, clinical documentation, and record sharing.

Patient identity form

Consent controls

06

Feedback

Alerts and banners use subtle fills, clear labels, and selective color. Color should support meaning, not decorate the whole product.

Draft saved

Your note is saved locally and can still be edited before signing.

Transcript available

A transcript is available for AI-assisted SOAP drafting.

Consent complete

Required consent evidence has been captured for this encounter.

Patient waiting

This patient has been queued for 42 minutes.

Access revoked

The recipient can no longer view this shared record bundle.

Clinical note signed

Signed notes are locked. Add an amendment instead of editing the original.

07

Highlights

Approved emphasis patterns for a black and white interface: colored left rails for list-like items, and border rings or corner marks when an entire card needs attention.

Colored left rails

Proposed

Identity mismatch

Date of birth does not match the selected patient record.

Consent pending

Telemedicine consent still needs patient confirmation.

Ready for doctor

Vitals, consent, and service selection are complete.

Shared externally

This record bundle has active external access.

Border rings and corner marks

Proposed

Needs clinician review

A quiet color halo works when the entire card needs attention.

Danger boundary

A red marker plus border is stronger than red text alone.

08

Cards

Cards are useful when a workflow needs grouped context but should not become visual clutter.

Patient summary

Jamie Appleseed

DOB: 1984-03-12 - Returning patient

AdultConsent current

Metric card

Proposed

14

Patients in queue today

Risk summary

Proposed
IdentityVerified
ConsentMissing recording
Record accessRestricted

09

Data Display

Dense lists and reports should retain the SimplePractice-inspired structure without losing OwnaMed's neutral visual language.

Report table with filters

PatientTypeStatusClinicianNext visitAction
Jamie AppleseedAdultQueuedClaire W.Today 10:30 AMOpen
Morgan StoneAdultConsent dueUnassignedNo visitReview
Taylor GreenMinorScheduledDr. SinghJun 04Open

10

Clinical States

Clinical status components must distinguish workflow state from clinical judgment. These examples are operational labels, not diagnosis tools.

Encounter state stack

IntakeComplete
VitalsNeeds blood pressure
ConsentTelemedicine complete
AssignmentUnassigned
BillingPayment pending

Clinical document states

Proposed
Draft noteAI suggestionSigned noteShared externallyRevoked share

11

Workflow Patterns

Reusable candidates pulled from current production interfaces. These represent common workflow shapes that should be standardized before they spread further.

Document upload gate

Used during intake before showing the upload form.

Proposed

Does the patient have any medical records to upload?

Appointment cancellation boundary

Destructive subflows should use the approved danger boundary pattern.

Proposed

Cancel appointment

Queue claim prompt

Operational choice panel used when a clinician claims a queued patient.

Proposed

How would you like to see Jamie?

Or pick a slot from your schedule

Record sharing bundle

Sharing and revocation workflows need clear status and danger affordances.

Proposed

Shared externally

This record bundle has active external access.
Share code activeExpires in 7 days

12

Timeline

Timeline patterns for patient history, access ledgers, audit events, and encounter activity.

Patient record timeline

10:42 AM

Access grant created

Shared lab document and signed note with external physician.

10:18 AM

SOAP note signed

Dr. Williams signed the consultation note.

09:54 AM

Vitals captured

Blood pressure, pulse, temperature, and symptoms recorded.

09:40 AM

Consent witnessed

Staff-witnessed telemedicine consent captured.

13

Overlays

Static overlay previews for confirmations, review drawers, and side panels.

Danger confirmation modal

Proposed
Destructive action

Revoke shared access?

This recipient will immediately lose access to the selected patient record bundle. The audit ledger will retain the event.

Right-side review panel

Proposed

Review panel

Before signing

Required fieldsComplete
AI contentReview needed
Amendment chainNone

14

Empty and Loading

Quiet states that explain what is happening and point users to a next action.

Empty state

No appointments today

When visits are scheduled, they will appear here with patient status and clinician assignment.

Loading skeleton

15

Suggestion Pads

Use these static prompts while reviewing the page. They are intentionally not saved, but they make it easy to think by category.

Navigation ideas

Proposed

Clinical workflow ideas

Proposed

Danger and warning ideas

Proposed

Data table ideas

Proposed

Mobile ideas

Proposed

New component ideas

Proposed