Chrome primitives
22 chrome variants for the Oak Flats Mufflermen design system — five headers, five footers, four floating docks, four mobile slide-ups and four sidebars. Each variant carries the real brand and is composable inside the showcase shell.
Chrome primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Chrome primitives: 22 chrome variants for the Oak Flats Mufflermen design system — five headers, five footers, four floating docks, four mobile slide-ups and four sidebars. Each variant carries the real brand and is composable inside the showcase shell.
Compose any header + footer + dock + sidebar around mock workshop content — a single switchable showroom for every chrome variant.
Site headers
Five distinct top-of-shell variants — from a cinematic full-width bar to a floating magnetic island.
Cinematic bar
Full-width sticky header with logo, centered pill nav and a red primary CTA cluster.
Pinstripe bar
Thin mono-typed bar with brand chip, breadcrumb crumbs and a search shortcut.
Stacked grand
Utility bar over a grand wordmark hero with metric tiles and a primary CTA.
Mobile condensed
Mobile-first header with center logo, hamburger left and cart right — shrinks on scroll.
Floating island
Rounded glass capsule centered with magnetic hover nav and a red CTA pill.
Site footers
Five distinct bottom-of-shell variants — from a five-column megamap to a thermal-paper receipt.
Megamap grand
Five-column sitemap with brand lockup, newsletter capture, social row and legal fineprint.
Cinematic
Full-bleed cover image footer with grand wordmark, tagline, three columns and bottom bar.
Compact strip
One-line shell footer with brand chip, four divided links, theme toggle and copyright.
Receipt style
Thermal-roll receipt with mono details, ABN, acknowledgement of country and a barcode.
Marquee band
Stacked KPI tiles, looping marquee of brand words and a brand-row legal strip.
Floating docks
Four distinct overlay dock variants — bottom glass, side magnetic, corner quick, and an app tab rail.
Bottom glass
Bottom-center glass dock with 5 primary actions and tooltip labels on hover.
Side magnetic
Right-side vertical dock with magnetic hover lift and label tooltips.
Corner quick
Bottom-right composer FAB with chat, back-to-top and theme satellite buttons.
Tab rail
App-scoped bottom tab rail with an animated active indicator pill.
Mobile slide-ups
Four distinct bottom-sheet variants — iOS action sheet, full takeover, detail card, and multi-step wizard.
Action sheet
iOS-style action sheet with grouped actions, descriptions and a cancel pill.
Full takeover
Edge-to-edge takeover with header, breadcrumb body and footer slot.
Detail card
Half-sheet quote summary with stat tiles, status chips and primary/secondary actions.
Multi-step
Three-step wizard with stepper chips, body, and a progress-bar foot row.
Sidebars
Four distinct side-rail variants — cinematic vertical, glass compact icon rail, mega anchored explorer, and right-side context rail.
Cinematic vertical
Narrow cinematic sidebar with vertical wordmark and per-item active state.
Glass compact
Floating glass icon-only sidebar with hover label tooltips and an avatar foot.
Mega anchored
Full sidebar with brand lockup, search shortcut and collapsible group sections.
Context rail
Right-side metadata rail with stat tiles, related items and action buttons.