Oak Flats UI Primitives Catalogue

Workhorse flag list row. Each card shows the flag key, tone-coded environment chips with status dots (Development teal, Staging amber, Production red), an on/off toggle backed by role=switch + aria-checked, optional variant chips for A/B/C splits and a last-modified strip.

Production answer

Flag card is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Flag card states

Generative search brief

Flag card: Workhorse flag list row. Each card shows the flag key, tone-coded environment chips with status dots (Development teal, Staging amber, Production red), an on/off toggle backed by role=switch + aria-checked, optional variant chips for A/B/C splits and a last-modified strip.

Live primitive · two cards · toggle interaction

Instant pricing on quotes

quote-instant-pricing

When on, the quote builder calls the pricing engine on each line edit instead of waiting for save.

DEVDevelopment
STGStaging
PRDProduction

Control50%
Live preview50%

3D parts viewer

parts-3d-viewer

Switches the parts detail surface from the flat carousel to the new GLB / WebGL viewer.

DEVDevelopment
STGStaging
PRDProduction