Phone primitives for the workshop floor
Every surface a mechanic touches on the tablet bracket above the bay — status bar, top app bar, drawer, sheets, FAB, swipe rows. Each primitive lives inside a 390×844 viewport simulator so the rhythm matches the real device.
Phone primitives for the workshop floor is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Phone primitives for the workshop floor: Every surface a mechanic touches on the tablet bracket above the bay — status bar, top app bar, drawer, sheets, FAB, swipe rows. Each primitive lives inside a 390×844 viewport simulator so the rhythm matches the real device.
Pick a surface
Every primitive ships with reduced-motion overrides and proper aria semantics so the workshop tablet stays usable in bright bay lighting and dark after-hours mode.
Mobile viewport
Phone simulator frame at 390×844 with bezel, notch, speaker grille and home indicator. Wraps every other mobile primitive in a believable surface.
Inspect primitive states 02Top app bar
Sticky bar with title, back chevron, leading slot, trailing chips. Solid and transparent variants for hero pages.
Inspect primitive states 03Bottom nav bar
Persistent 4 to 5 tab nav with shared layout sliding pill or underline. Active dot, badge counter, aria-current.
Inspect primitive states 04Tab indicator strip
Horizontally scrollable topical tabs with sliding underline. Different rhythm from the bottom nav.
Inspect primitive states 05Mobile drawer
Side drawer that slides from the left. Dimmed backdrop, swipe-left to dismiss, Esc support.
Inspect primitive states 06Action sheet
iOS-style sectioned actions. Optional title, destructive tone, separate cancel button card.
Inspect primitive states 07Pull to refresh
Pull indicator with arrow that rotates and locks into a spinner. Reduced-motion shows a static icon.
Inspect primitive states 08Mobile toast
Top-of-screen toast with tone-tinted icon and aria-live announcement. Different from the desktop tray.
Inspect primitive states 09Loading bar
Top hairline bar with indeterminate shimmer and a determinate fill. Tone variants for red, amber and teal flows.
Inspect primitive states 10Modal sheet
Bottom-rounded modal with drag handle and peek / half / full snap presets. Body scrolls, title and footer stay.
Inspect primitive states 11Status bar
Simulated iOS-style status bar with time, signal, carrier and battery rendered as SVG. Light or dark tone.
Inspect primitive states 12Floating action button
Icon-only and extended FABs. Press-down state, hover lift, four tones, three corner positions.
Inspect primitive states 13Segmented (iOS)
iOS-style segmented control with shared layout sliding pill. Radio semantics, keyboard accessible.
Inspect primitive states 14Chip filter row
Horizontally scrollable filter chips with count badge and a deselect-all chip when any are active.
Inspect primitive states 15Swipe action row
List row with leading and trailing action lanes. Visual swipe revealed via CSS animation demos.
Inspect primitive states 16Full mobile app
Bonus composition: a working Mufflermen workshop app stack — status bar, top app bar, content, FAB, bottom nav, drawer overlay.
Review full composition