Owl component library

Every primitive from the locked design system (ADR-007), rendered with working interactions. Flip the theme toggle to verify light + dark. This page is the living integration test — if a primitive is off-system, it shows here.

Foundations

Color tokens (each maps to a CSS variable in globals.css)

--color-bg

--color-surface

--color-sunken

--color-border

--color-text

--color-muted

--color-accent

--color-success

--color-warning

--color-danger

Type scale (Geist + Geist Mono)

displayGive clinicians

h1Heading one

h2Heading two

h3Heading three

bodyBody copy — 16px, generous line-height for clinical reading.

smallSmall — 14px, helper and metadata text.

monoGeist Mono · 04:12 · BCS 5.5/9

Brand marks

owlowl

Buttons

Variants

Sizes

Icon-only · with trailing icon · loading · disabled

Form inputs

Patient name

As it appears in your PIMS.

Enter a valid email address.

Clinical notes

Auto-resizes as you type.

PIMS

Checkbox · Radio · Toggle

Include vitals in the SOAP note

Dog Cat

Send Pet Parent Report

Search · Number (BCS half-steps) · Date

BCS

/ 9

Overlays

Modal · Drawer · Popover · Tooltip

Toasts

SOAP note copied

Formatted for ezyVet.

Capture paused

Microphone access was interrupted.

Sync failed

We couldn’t reach the server.

Draft saved

Data display

Table (sortable, checkbox column, status badge, row menu)

		Status
	Bella · Feline wellness	Synced
	Rocky · Lameness recheck	Needs review
	Maple · Dental cleaning	Draft

List rows (inbox)

Bella · Feline wellness

SOAP note ready · 3 keyframes

09:14

Rocky · Lameness recheck

Needs review

Review

Cards

Default card — surface, hairline border, no chrome.

Visit summary

Header + content + footer composition.

Badges

NeutralTealSuccessWarningDangerSoft

Avatars

IFMKDRAB

Stat blocks

Visits today14+3 vs avg

Avg time to note42s-14% w/w

Needs review2steady

Feedback

Loading skeletons (card · row · text)

Empty state

Inbox zero

Your visits will appear here when you finish a visit with your glasses.

Error states (connection · 404 · 500)

OFFLINE

Connection lost

We’ll keep retrying in the background.

404

Page not found

That visit doesn’t exist.

500

Something broke

Our team has been notified.

Inline alerts (info · warning · danger)

Heads up

Owl nulls vitals it didn’t hear, then flags them for your review.

Unconfirmed vital

HR was stated as a range (90–95). Enter a single value to chart it.

Copy failed

Clipboard access was blocked by the browser.

Specialized

Command palette (⌘K)

Keyboard hints

⌘ Kesc↵GI

Recording indicator (ready · recording · paused · syncing · synced)

READY

REC· 04:12

PAUSED· 04:12

SYNCING

SYNCED· just now

Status dots (connected · warning · disconnected · danger)

ConnectedDegradedOfflineError