A calm app for an anxious moment.

Brand

A tilted pill capsule with soft notification rings, sitting on a cyan-teal gradient. The capsule itself — Pilpilon — is the standalone mascot used inside the product for medication tiles. The full icon adds the gradient backdrop and the ringing waves.

App icon · sizes

Pilpilon · the mascot

The pill capsule without the gradient backdrop. Used inside medication cards, empty states, and onboarding. Always sits on the primary-container mint circle when shown inline — never floating on raw white.

Color

Clinical Cyan. A Material 3 inspired palette: bright cyan-teal primary, soft mint container, six-stop washed-white surfaces, warm amber for soft attention, red kept exclusively for overdue and destructive.

Primary & containers

Surfaces — light scale

Text

Secondary, tertiary & semantic

Typography

System font (-apple-system / Roboto). The scale is deliberately wide — the countdown has to dominate.

Spacing

Standard 4-px base. Generous on the larger end — calm interfaces breathe.

Radius

Generous on purpose. Sharp corners feel clinical; round corners feel human. Every button is fully rounded.

Elevation

One real shadow — soft, large, low-opacity. Used on cards and the countdown. Press is communicated by opacity, not by shadow change.

Buttons

Six variants, all pill-shape (radius 9999), default height 48, large height 64. Primary is a teal gradient with a soft colored shadow; everything else stays flat.

Variants

Sizes

Countdown

The hero of every patient screen. 56-pt tabular numerics, weight 800, letter-spacing −3. When a dose window closes without action, the digits flip to error red and an OVERDUE pill badge appears above.

Card

White on the washed background. Radius 32, padding 24, soft shadow. The default container for every piece of grouped content.

Icons

The system uses @expo/vector-icons Ionicons, outline variant. Outline reads as calmer than filled — important for an app a user opens when they're already anxious. Stroke width 1.6 (24px viewBox), rounded line caps. Color follows the parent: primary for active, on-surface-variant for idle, error for destructive.

In production

Three Ionicons currently ship in the tab bar: medical-outline, time-outline, settings-outline.

Recommended next

When the app needs more icons (chip glyphs, button leading icons, empty-state illustrations) — reach for these from the same Ionicons-outline family so the strokes stay consistent.

Color rules

• Idle: on-surface-variant (#3f575b) — calm grey-blue.
• Active / selected: primary (#1a9fb5) + stroke bumped from 1.6 → 1.9.
• Inside a status chip: takes the chip's on-container color.
• Destructive (trash, close): error (#ba1a1a) on a error-container wash.

Tab bar

Three tabs, three Ionicons. The active tab takes the primary color and a slightly heavier stroke; the inactive tabs stay at text-muted. The bar itself is a card — white surface, radius 32, soft card shadow.

Chips

Fully-rounded status pills using Material 3 container colors — soft mint for "taken", lime for "pending", peach for "overdue".

Number stepper

Used for dose amounts and pill counts. Two 52×52 teal pill buttons flank a 24-pt tabular-numeric value on surface-high.

Progress bar

12-px tall, radius 6, track surface-container, fill primary. Sits below the countdown on the patient home to show progress through the current taper step.

Medication card

Round mint icon + name + dose + status chip. Used on the patient home list and inside the doctor's plan editor.

Home screen — assembled

Every primitive composed into the patient's daily view. Countdown on top, progress below, then the medication list, with a single primary "Take dose" CTA at the bottom.

Doing it wrong

Things that will look out of place in TaperSafe.