Compare families & landscape

Dynamic Island / Pill Morphing UI

• 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 · Flighty iOS Live Activity — Gate & Delay Telemetry in 36pt Cutout

Dark Premium

• Tiempos Headline / Söhne pairing: old-money serif for claims, neutral grotesque for evidence. Finance gravitas without cliché.

  18-endex · Endex

• The upper-left brand lockup uses serif type, while each book retains its own cover typography. Keep the interface restrained when the collection already contains many visual voices.

  109-stripe-press-a-catalogue-composed-from-book-spines · Stripe Press — a catalogue composed from book spines · model draft

Dynamic Island / Pill Morphing UI

• 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 · 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 · Flighty iOS Live Activity — Gate & Delay Telemetry in 36pt Cutout

Dark Premium

• Hairline borders at 8% white opacity define all structure; no shadows anywhere in dark mode.

  16-linear · Linear

• The captured catalogue centers a vertical stack of book spines on a dark field, with generous space around the stack. The physical objects become the organizing structure rather than sitting inside a conventional product-card grid.

  109-stripe-press-a-catalogue-composed-from-book-spines · Stripe Press — a catalogue composed from book spines · model draft

Dynamic Island / Pill Morphing UI

• 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 · Apple iOS Live Activities — Compact Capsule Dual-Sensor Readout

Dark Premium

• Purple accent appears ONLY in glows and gradients, never as flat fill — light, not paint.

  16-linear · Linear

• Most of the visible color belongs to the book spines against the dark background. Let the objects supply variety while the surrounding interface stays quiet; this observation does not establish keyboard or motion behavior.

  109-stripe-press-a-catalogue-composed-from-book-spines · Stripe Press — a catalogue composed from book spines · model draft

Dynamic Island / Pill Morphing UI

• 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 · Apple iOS Dynamic Island — Fluid Spring Long-Press Expanded Card

Dark Premium

• Feature cards tilt ≤2° on hover with a 400ms ease — motion you sense rather than watch.

  16-linear · Linear

Dynamic Island / Pill Morphing UI

• 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 · 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 · Uber iOS Live Activity — Real-Time ETA Progress Bar & License Plate Pill

Dark Premium

• Pricing table where the free tier is visually equal to paid — confidence signaling that converts better than dark-patterning.

  17-raycast · Raycast

• There is no global monthly/yearly switch: a "Billed yearly" toggle appears only in the Basic and Business columns, while the same row reads "Free for everyone" under Free and "Annual billing only" under Enterprise. Steal the per-plan billing row, which places a toggle only where it changes a price and uses the slot to state terms everywhere else.

  81-linear-pricing · Linear — pricing · model draft

Dynamic Island / Pill Morphing UI

No recorded texture/material notes in this slice.

Dark Premium

• Subtle noise grain over every gradient stops the banding AND adds materiality at 2% opacity.

  17-raycast · Raycast

• The right half holds a single 3D cube of near-black facets in mixed finishes (matte, perforated, speckled), lit from above, with one pale light band sweeping diagonally across the lower third of the black ground. Steal one monochrome rendered object as the hero image, giving depth without adding a color.

  78-resend-homepage-hero · Resend — homepage hero · model draft

Dynamic Island / Pill Morphing UI

• 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 · Uber iOS Live Activity — Real-Time ETA Progress Bar & License Plate Pill

Dark Premium

• Six words on the entire first viewport. Institutional confidence = information withheld.

  18-endex · Endex