Oak Flats UI Primitives Catalogue

The complete builder cockpit. The block palette holds the left rail, the canvas centres the active 600px column, and the inspector hugs the right edge. Above the canvas sit the preview toggle and preheader editor. Below — send test, theme picker, saved list, spam check, HTML output, and the click heatmap. The image upload modal and personalisation token overlay sit alongside, and the footer assembler closes the page.

Production answer

Full email builder scene is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Full email builder scene states

Generative search brief

Full email builder scene: The complete builder cockpit. The block palette holds the left rail, the canvas centres the active 600px column, and the inspector hugs the right edge. Above the canvas sit the preview toggle and preheader editor. Below — send test, theme picker, saved list, spam check, HTML output, and the click heatmap. The image upload modal and personalisation token overlay sit alongside, and the footer assembler closes the page.

Device

Scale

Dark mode

Subject + preheader

How your email lands in the inbox

Subject line55/72

Preheader text69/110

Email canvas · 600px column

Oak Flats Mufflermen <hello@mufflermen.com.au>

Form canvas

Winter workshop newsletter — what we shipped this month

Oak Flats Mufflermen <hello@mufflermen.com.au> · A peek at the winter parts shipment and a $20 service voucher inside.

Drop here
Hero imageWinter workshop — bay door open at first light
HeadingWinter at the workshop
Personalised greetingHi {{first_name}} — here's what's new in Oak Flats this month.
Parts feature rowMagnaflow Pro · Free fitting · 12-month warranty
Quote confidence blockYour last quote — {{quote.total}} — is still on the bench.
Book a bayBook your service
Divider—
Footer blockUnit 4 / 12 Cygnet Place · Oak Flats NSW · ABN 12 345 678 901

Spam check

Inbox deliverability

4.2/10

SubjectWinter workshop newsletter — what we shipped this month

Body excerptHi {{first_name}} — here's what's new in Oak Flats this month. Your last quote, {{quote.total}}, is still on the bench…

Image-to-text ratio above 60% — add more written content.
Hero image is missing alt text.
Unsubscribe link present.
Subject avoids ALL CAPS.
Two exclamation marks detected in preheader — consider one.

Style inspector

Book a bay

Button block

Colour

Amber--primitive-amber

Warning, attention, and hot-state accent.

Typography

Display font--primitive-font-display

The quick brown fox jumps over the lazy dog. 1234567890

Big headlines and section titles.

Padding24px

Margin8px

Alignment

Email themeA starting point for tone, typography, and accent.

Send test

Preview in a real inbox

Recipients

Test recipient list

marketing@mufflermen.com.audaniel@verridian.aiqa@mufflermen.com.au

Variant

Image block

Drop, link, or pick an asset

Drop image to uploadPNG · JPG · WebP — 1200 × 600 recommended

Browse filesPick from library

Alt text

Link target

Serve retina @2x

Personalisation

Insert a token

Type {{ to open this picker anywhere in the canvas.

Sample preview

TEXT

Hi Daniel, We've finished servicing your BFM-712.

HTML output

Live source

HTMLwinter-newsletter.html

1<!doctype html>2<html lang="en">3  <head>4    <meta charset="utf-8" />5    <title>Winter workshop newsletter</title>6    <style>7      body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; background: #f4f2ee; color: #1f2230; }8      .container { max-width: 600px; margin: 0 auto; padding: 24px; background: #ffffff; }9      h1 { font-family: Anton, "Arial Narrow", Impact, sans-serif; font-size: 32px; margin: 0 0 12px; }10      .cta { display: inline-block; padding: 12px 22px; background: #e62028; color: #fff; text-decoration: none; border-radius: 6px; }11      .footer { font-size: 12px; color: #6b7080; text-align: center; padding-top: 24px; }12    </style>13  </head>14  <body>15    <div class="container">16      <img src="/winter-hero.webp" alt="Winter workshop at sunrise" width="552" />17      <h1>Winter at the workshop</h1>18      <p>Hi {{first_name}} — here's what's new in Oak Flats this month.</p>19      <p>Your last quote, {{quote.total}}, is still on the bench in {{workshop.bay}}.</p>20      <p><a class="cta" href="https://mufflermen.com.au/book">Book your service</a></p>21      <p class="footer">Unit 4 / 12 Cygnet Place, Oak Flats NSW 2529 · ABN 12 345 678 901</p>22    </div>23  </body>24</html>

Click heatmap

Winter workshop newsletter — what we shipped this month

11%6%4%22%1%

Saved templatesAll campaign and transactional drafts

All campaign and transactional drafts
			Actions
Winter workshop newsletter	2 May 2026, 09:14	412	OpenDuplicateArchive
Quote follow-up · 48hr	30 Apr 2026, 16:02	1,289	OpenDuplicateArchive
Service due reminder	28 Apr 2026, 11:48	884	OpenDuplicateArchive
Warranty renewal nudge	22 Apr 2026, 14:20	326	OpenDuplicateArchive
Loyalty $20 voucher	16 Apr 2026, 08:01	612	OpenDuplicateArchive
Magnaflow Pro launch	11 Apr 2026, 17:34	224	OpenDuplicateArchive