Oak Flats UI Primitives Catalogue

Every interactive trigger in the system — chrome and red site buttons, icon tools, segmented controls, and stacked CTA primitives used across quoting, parts, and CMS surfaces.

01.06 / Actions

Buttons and command controls

One command grammar for app actions, site CTAs, icon tools, segmented choices, toolbar commands, and destructive states. Existing button systems stay visible as adapters, but the tokens and interaction rules come from Shared DNA.

Button primitives

Shared DNA button map

Red primary remains the approval/default CTA. Chrome, ghost, liquid, metal, icon, segmented, toolbar, and destructive variants are theme-matched alternatives that inherit the same tokens.

Foundations

Hit targets and focus

Minimum 44px controls, shared radius, token focus shadow, and reduced-motion exits are inherited before any action finish.

--primitive-btn-radius / --primitive-focus-shadow

Surfaces

Material state

Primary, chrome, liquid, and metal actions consume the carbon, red paint, chrome edge, panel, and recessed depth recipes.

--primitive-btn-primary-bg / --primitive-chrome-edge

Typography + Icons

Label and glyph rules

Mono labels, display hierarchy, icon sizes, and stroke weight remain upstream contracts, not route-local reinventions.

--primitive-font-mono / --primitive-icon-md

Theming

Token adapters

Global shadcn buttons, liquid-ui class hooks, and local action primitives are adapters over the same primitive tokens.

Button / ActionButton / LiquidButton

Site CTA adapters

Content, contact, hero, and section CTAs.

Variants: Red primary / chrome alternate / ghost tertiary
Source: CSS modules: siteButtonRed, siteButtonChrome, siteButtonGhost

ActionButton

Default product command button for app actions.

Variants: default / cool / secondary / outline / ghost / destructive / link
Source: components/actions/button-primitive.tsx

LiquidButton

Glass-style high-emphasis adapter.

Variants: default / outline / secondary / ghost / destructive / link
Source: components/actions/button-primitive.tsx

MetalButton

Tactile machined adapter for premium workshop actions.

Variants: default / primary / success / error / gold / bronze
Source: components/actions/button-primitive.tsx

Mufflermen Classicdark

Default Oak Flats palette — red / amber / teal on obsidian.

RedAltFocus

Red CTA Chrome alt

Small--primitive-size-command-sm

Dense toolbar, table, card, and filter actions. Still touch-safe at 44px.

Medium--primitive-size-command-md

Default app command, form action, dialog footer, and route-level controls.

Large--primitive-size-command-lg

Hero, conversion CTA, empty-state recovery, and high-emphasis workflow commands.

Status pill

Read-only state label for proof, audit, production, and routing status.

Ready

Filter pill

Toggleable chip for scoped search, category, vehicle, and state filters.

Stainless

CTA pill

Rounded high-emphasis command for liquid buttons, hero CTAs, and mobile bars.

Book bay

Primary commandSecondary commandIcon toolSegmented choiceToolbar actionDestructive command

Site CTA buttons

Adapter

Legacy site buttons are allowed when the destination is content or contact. They still consume primitive red, chrome, focus, radius, and motion tokens.

Call workshop Send vehicle details Output rail

App button primitive

Canonical

Use ActionButton for product commands first. It is the canonical app-level wrapper for semantic button variants.

Icon tools

44px targets

Icon-only tools always require an accessible name and tokenized focus ring. The visual glyph follows the Icon route sizing contract.

Liquid and metal finishes

Surface adapters

Liquid and metal finishes are presentation adapters for high-emphasis CTAs only. They do not replace the ActionButton state taxonomy.

Segmented command

Stateful

Segmented controls use pressed state only for mutually exclusive choices, not navigation or unrelated filter chips.

Guarded

Toolbar actions stay compact but named. Destructive commands must be visually distinct and never share the primary approval treatment.