Skip to the collection
Trova
Browse Dynamic Island / Pill Morphing UICompare with another family →

Style sheet · 4 references

Dynamic Island / Pill Morphing UI

Fluid black pill container expanding and contracting dynamically to hold context-sensitive alerts, media, and actions.

Copy CSS :root tokens

Synthesized CSS custom properties derived from this family's dominant surface polarity, highest-contrast WCAG pair, and open-source font stand-ins.

/* Synthesized from Trova family: Dynamic Island / Pill Morphing UI (dynamic-island-morph) */
/* Evidence base: 4 curated reference(s) · Primary contrast 21:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #ffffff;
  --surface-elevated: #30d158;
  --text-primary: #000000;
  --accent-primary: #1c1c1e;
  --border-hairline: color-mix(in srgb, #000000 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "JetBrains Mono", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}
Copy as DESIGN.md

The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.

# Dynamic Island / Pill Morphing UI — style sheet

> Fluid black pill container expanding and contracting dynamically to hold context-sensitive alerts, media, and actions.

Derived from 4 curated reference(s) in the `dynamic-island-morph` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- SF Mono — 3/4
- SF Pro Display — 2/4
- JetBrains Mono — 1/4
- SF Pro Rounded — 1/4
- Uber Move — 1/4

## Color

- `#000000` dark neutral — 4/4
- `#1c1c1e` dark neutral — 4/4
- `#ffffff` light neutral — 4/4
- `#30d158` chromatic — 2/4
- `#276ef1` chromatic — 1/4
- `#05944f` chromatic — 1/4
- `#0a84ff` chromatic — 1/4
- `#22c55e` chromatic — 1/4
- `#ff9f0a` chromatic — 1/4
- `#eab308` chromatic — 1/4

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#000000` / `#ffffff` — 21:1
- `#1c1c1e` / `#ffffff` — 17:1
- `#000000` / `#30d158` — 10.4:1
- `#1c1c1e` / `#30d158` — 8.4:1

## Moves

### grid/layout

- Split the 36pt hardware cutout capsule into two asymmetric wings: a 24pt leading icon badge anchored flush-left and a tabular-nums countdown (`04:18`) anchored flush-right with 12pt internal clearance around the camera sensor. — 165-apple-ios-live-activities-compact-capsule-dual-sensor-readout
- Pack four flight telemetry variables (Origin, Destination, Gate, Seat) into a 160pt expanded island by using a 1px `#27272a` horizontal rule to separate route progress from boarding credentials. — 168-flighty-ios-live-activity-gate-delay-telemetry-in-36pt-cutout

### component pattern

- Limit expanded island actions to at most two 44pt pill buttons in the bottom row so thumb taps never accidentally trigger the underlying status bar. — 166-apple-ios-dynamic-island-fluid-spring-long-press-expanded-card
- Render the vehicle license plate inside a high-contrast `#1f1f24` monospace badge (`14pt bold`) paired with a 6pt continuous progress track that advances a miniature vehicle glyph toward the pickup pin. — 167-uber-ios-live-activity-real-time-eta-progress-bar-license-plate-pill

### color

- Use pure `#000000` OLED black as the capsule ground so the hardware cutout disappears completely, pairing a single semantic accent (`#30d158` active green or `#ff9f0a` timer amber) for instant peripheral legibility. — 165-apple-ios-live-activities-compact-capsule-dual-sensor-readout

### motion/interaction

- Long-pressing the compact pill morphs the container from `height: 36pt; border-radius: 18pt` to `height: 168pt; border-radius: 44pt` using a critically damped spring (`damping: 0.82, response: 0.38s`) while keeping the leading icon pinned to its top-left origin. — 166-apple-ios-dynamic-island-fluid-spring-long-press-expanded-card

### copywriting

- Replace verbose status sentences with a single two-word verb phrase (`Arriving now · 2 min`) so the entire lock-screen banner reads in under 300ms. — 167-uber-ios-live-activity-real-time-eta-progress-bar-license-plate-pill

### typography

- Airport IATA codes (`SFO → LHR`) and gate badges (`B14`) use split-flap inspired `tabular-nums` monospace with `#eab308` amber highlights whenever a gate or boarding time mutates. — 168-flighty-ios-live-activity-gate-delay-telemetry-in-36pt-cutout

## References

- 165-apple-ios-live-activities-compact-capsule-dual-sensor-readout — Apple iOS Live Activities — Compact Capsule Dual-Sensor Readout (exemplar)
- 166-apple-ios-dynamic-island-fluid-spring-long-press-expanded-card — Apple iOS Dynamic Island — Fluid Spring Long-Press Expanded Card
- 167-uber-ios-live-activity-real-time-eta-progress-bar-license-plate-pill — Uber iOS Live Activity — Real-Time ETA Progress Bar & License Plate Pill
- 168-flighty-ios-live-activity-gate-delay-telemetry-in-36pt-cutout — Flighty iOS Live Activity — Gate & Delay Telemetry in 36pt Cutout

Type

Loadable Open-Source Stand-Ins

  • SF Mono (macOS only) → JetBrains Mono
  • SF Pro Display (macOS only) → Inter Tight

Color

Pairs that read

  • Steal this.#000000 on #ffffff · 21:1
  • Steal this.#1c1c1e on #ffffff · 17:1
  • Steal this.#000000 on #30d158 · 10.4:1
  • Steal this.#1c1c1e on #30d158 · 8.4:1

Moves

grid/layout

component pattern

color

motion/interaction

copywriting

typography

References