Help center, tours, articles, references
Every surface the Mufflermen workshop uses to onboard staff, document the platform, walk a customer through a feature, or announce a release. Each primitive lives on its own route with a focused demo.
Help center, tours, articles, references is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Help center, tours, articles, references: Every surface the Mufflermen workshop uses to onboard staff, document the platform, walk a customer through a feature, or announce a release. Each primitive lives on its own route with a focused demo.
Pick a surface
Every route opens the primitive in isolation with a workshop-flavoured demo. The full article scene composes the docs primitives end to end.
Spotlight cutout
Full-screen SVG mask that dims everything except a rectangular cutout aligned to the target.
Inspect primitive states 02Coach mark
Floating pointer with title, body, and Next / Skip actions. Composes the rich popover primitive.
Inspect primitive states 03Tour controller
Orchestrates a multi-step guided tour by walking through ordered targets with cutout + coach mark.
Inspect primitive states 04Help center landing
Help-center hero with search bar, categorised topic cards, popular articles, and contact-support.
Inspect primitive states 05Article surface
Long-form article wrapper with byline, table-of-contents aside, prose body, and feedback row.
Inspect primitive states 06Callouts
Info / warning / tip / danger callouts. Each has its own inline SVG icon, tone, title, and body.
Inspect primitive states 07Table of contents
Sticky right aside that highlights the currently visible heading via IntersectionObserver.
Inspect primitive states 08Doc breadcrumb
Breadcrumb tuned for docs — reuses the breadcrumb primitive with context-style separators.
Inspect primitive states 09Doc sidebar
Left-side nav with collapsible sections, nested links, and active highlight.
Inspect primitive states 10Doc search bar
Docs-specific search with `/` to focus, recent searches, popular suggestions, and filters.
Inspect primitive states 11API reference card
Method + path + description + parameter table + request / response examples in one block.
Inspect primitive states 12Code playground
Side-by-side editor + preview with an Open in StackBlitz CTA. Editor uses the code-block primitive.
Inspect primitive states 13Release notes entry
Timeline entry with version badge, date, summary, categorised change chips, and read-more link.
Inspect primitive states 14Keyboard shortcuts overlay
Overlay showing every shortcut grouped by section. Uses the existing Kbd primitive.
Inspect primitive states 15Full article scene
Composition scene putting sidebar, breadcrumb, article, table-of-contents, and callouts together.
Inspect primitive states