Dumpert Design System

Lean back, never wait

It's a 10-foot couch experience. Loading is a threshold, not a wait — the loading screen is gone the instant data is ready. Skeletons mirror real layout so nothing jumps.

The content is the hero

Pure-black canvas, immersive blurred backdrops, chrome that recedes. Thumbnails are face-centered and upgrade themselves to the best frame. Green appears only to mean something.

Focus must be obvious

From across the room you must always know where the Siri Remote is. Focus = scale-up, white border, and a green glow. Ambiguity is a bug.

Native first, brand always

Follow Apple TV conventions and SF Symbols, adopt Liquid Glass where it lands — but the green, the voice and the wordmark are unmistakably Dumpert.

Accessible by construction

VoiceOver labels, Reduce Motion alternatives and Dynamic Type aren't a pass at the end — they live in the component. A card without its accessibility label is unfinished.

Focus treatment

Scale

1.08 (cards via .card), pressed 0.96

Border

3 pt solid white (capsule controls)

Glow — card

dumpiGreen @ 30% · radius 15

Glow — control

white @ 25% · radius 14

Thumbnail

brightness +0.05 · saturation 1.15

Animation

spring(0.25–0.35, bounce 0.2)

Translucency tiers

Instead of shadows, overlapping content separates with material:

Glass effects always ship with a pre-26 fallback — see Platform.

Loading

Launch shows the animated logo screen (a threshold, not a timer — gone the instant data is ready, with a 0.6s floor). In-content loads use shimmer skeletons that match the final layout. A "skip" hint only appears if a load is genuinely slow (3s+).

Empty & error

One component (EmptyStateView) serves no-content, first-run and error, always with a recovery action. Errors name cause + fix, never "Something went wrong".

Offline

A network monitor surfaces a floating red banner; cached content stays browsable. ETag caching and exponential-backoff retry keep things resilient.

Search

Recent searches, a horizontal filter bar (type · period · kudos · duration), live results, and an empty-result state. Filters use the Menu chip so every option is visible.

Playback

Autoplay + preload-next, playback speed, a resume overlay for partially-watched videos, an Up-Next overlay, a top-comment overlay, and Now Playing on the remote/Control Center.

Settings & sync

Grouped list with toggles, navigation pickers and a tile-size preview. Watch progress, settings, curation and search history sync via CloudKit across Apple TVs.

Focus engine

Every interactive element must show focus (scale, border, glow). Cards use the system .card button style for parallax + lift; custom controls use FocusableCapsuleButtonStyle. Swipe gestures on the remote skip previous/next.

Liquid Glass + fallbacks

On tvOS 26+ pills/badges/toasts use .glassEffect; every use ships a graceful fallback (ultraThinMaterial or a black-75% pill) so older tvOS still looks right.

if #available(tvOS 26, *) {
  content.glassEffect(in: RoundedRectangle(cornerRadius: 4))
} else {
  content.background(.black.opacity(0.75)).cornerRadius(4)
}

Safe areas & layout

Content honors the 50pt horizontal / 30pt vertical screen margins. Top Shelf integration surfaces fresh content above the app icon. Immersive blurred backdrops sit behind the TabView.

Architecture

SwiftUI + @Observable with Environment injection; an actor-based API client; a single VideoRepository source of truth. 122+ tests guard behavior.

Single source

Tokens live in Swift (Color+Dumpert, Animation+Dumpert, asset catalog). This page is generated from that reality — no parallel definitions to drift.

Reuse over redo

Shared primitives (DurationFormatter, GlassPillModifier, badges) are extracted, not re-implemented. New UI should ask "which pattern applies?" first.

Quality gates

122+ tests, accessibility labels per view, and Reduce-Motion/fallback paths are part of "done" — not follow-ups.