Display and headings inherit
--primitive-font-displayfoundation familyAtomic type roles from Foundations
A production typography board for Oak Flats Mufflermen: display, heading, body, mono, label, caption, numeric, control, dense table, and motion-safe kinetic text roles that downstream sections inherit.
Production answer
Atomic type roles from Foundations is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Atomic type roles from Foundations states
Generative search brief
Atomic type roles from Foundations: A production typography board for Oak Flats Mufflermen: display, heading, body, mono, label, caption, numeric, control, dense table, and motion-safe kinetic text roles that downstream sections inherit.
Type roles consume Foundation tokens
Typography does not invent local scales. It maps readable atomic roles to Foundation font, text-size, line-height, weight, and tracking tokens, then passes those roles to Surfaces and every downstream primitive.
Body, label, control inherit
--primitive-font-bodyfoundation familyCode, numeric, table inherit
--primitive-font-monofoundation family2xs through 3xl
--primitive-text-*role sizesReadable rhythm gates
--primitive-leading-*none to relaxedHierarchy without decoration
--primitive-weight-*regular to boldLabels and captions
--primitive-tracking-*normal to widestMotion-safe readable text
prefers-reduced-motionstatic fallbackEighteen production font voices
The board now exposes the full type menu as real Next font variables: original Mufflermen faces plus eight additional display, condensed, serif, technical, and mono options for production surfaces.
Performance Built Properly
Antonstatic family
var(--ff-ts-anton)Built On The Coast Road
Big Shoulders Inlinestatic family
var(--ff-ts-bigshoulders)Mufflermen Workshop Floor
Bebas Neuestatic family
var(--ff-ts-bebas)Diagnostic ready, idle stable
Space Groteskstatic family
var(--ff-ts-space-grotesk)Craft, restored
Fraunceswght · opsz · italic
var(--ff-ts-fraunces)vin: 2hg-cg-1657
Major Mono Displaystatic family
var(--ff-ts-major-mono)Coastal precision engineering
Bricolage Grotesquewdth · opsz
var(--ff-ts-bricolage)uptime: 99.94% / 0xMUFF
IBM Plex Monostatic family
var(--ff-ts-ibm-mono)Tuned For The Road Ahead
Inter Tightstatic family
var(--ff-ts-inter-tight)Heritage, in motion
Cormorant Garamondstatic family
var(--ff-ts-cormorant)Heavy Duty Headers
Archivo Blackstatic family
var(--ff-ts-archivo-black)Service bay schedule
Barlow Condensed300 -> 800
var(--ff-ts-barlow-condensed)Dyno Pull Ready
Tekovariable weight
var(--ff-ts-teko)Sensor bus aligned
Chakra Petch300 -> 700
var(--ff-ts-chakra-petch)Workshop control lane
Saira Condensed300 -> 900
var(--ff-ts-saira-condensed)Craft Notes
DM Serif Displayroman + italic
var(--ff-ts-dm-serif-display)job_id=OFM-418
Kode Monovariable weight
var(--ff-ts-kode-mono)torque_map.status = pass
Source Code Provariable weight + italic
var(--ff-ts-source-code-pro)Display, H1, H2, H3, H4, H5, H6
Every heading tier is now represented by its own production component file, with token, rhythm, intended usage, and source filename visible on the board.
Display
Built For The Road
Hero mastheads, signage panels, campaign leads.
Heading 1
Performance Exhaust Systems
Primary page titles and full-screen workflow headers.
Heading 2
Workshop Control
Major section headers and dashboard surface titles.
Heading 3
Bay Status
Panel groups, card clusters, and sub-route titles.
Heading 4
Quote Review
Compact card titles and toolbar section labels.
Heading 5
Fitment Notes
Small card headers, list groups, and dense inspectors.
Heading 6
Line Item
Micro-section headers and repeated table group titles.
Body, caption, label, mono, numeric, control, dense table, kinetic
Interface copy roles now have the same production treatment as headings, including controls, tabular numeric text, dense table rows, mono diagnostics, and bounded kinetic text for workshop systems.
Body lead
Every vehicle gets a clear service story before it reaches the bay.
Intro paragraphs and explanatory copy above a workflow.
Body base
The exhaust quote is linked to parts, labour, photos, and approval state.
Default product UI copy, forms, cards, and content blocks.
Body small
Updated 4 minutes ago by the front counter.
Secondary descriptions, table helper copy, and dense cards.
Caption
Photo proof - rear muffler install
Media captions, metadata, timestamps, and tiny helper copy.
Eyebrow
Small uppercase section labels and production board markers.
Label
Control labels, chips, badges, and filter names.
Mono
job.ofm.418.status = ready
Codes, logs, routes, diagnostics, and technical readouts.
Numeric
$1,284.00 / 98.7% / 0142
Counters, prices, percentages, odometer values, and KPIs.
Control
Buttons, segmented controls, toggles, tabs, and command labels.
Dense table
OFM-418 | Cat-back install | $1,284.00 | Ready
Data grids, service rows, invoice lines, and compact telemetry tables.
Motion-safe kinetic text
bounded motion
Bounded animated words that keep readable text available and settle under reduced motion.
Many sizes, one visible scale
The type-size board shows every heading and UI text token from Foundations together so agents can choose the right size without guessing from isolated component examples.
DISPLAY
--primitive-displayfluid 48-120pxHeading one
--primitive-h1fluid 36-64pxHeading two
--primitive-h2fluid 26-40pxHeading three
--primitive-h3fluid 21-28pxHeading four
--primitive-h420pxHeading five
--primitive-h517pxHeading six
--primitive-h615pxMicro label
--primitive-text-2xs10pxCaption text
--primitive-text-xs12pxSmall body
--primitive-text-sm13pxDefault body
--primitive-text-base15pxMedium body
--primitive-text-md16pxLead body
--primitive-text-lg18pxLarge title
--primitive-text-xl22pxSection title
--primitive-text-2xl28pxHero support
--primitive-text-3xl36pxLeading, tracking, paragraph rhythm
Foundation line-height, tracking, and spacing tokens are shown as applied typography so heading, paragraph, label, and dense UI rhythm can be compared in one pass.
Line height
Single-line counters and chips
--primitive-leading-none / 1Compressed display headlines
--primitive-leading-tight / 0.95Stacked headings and compact cards
--primitive-leading-snug / 1.15Default readable interface copy
--primitive-leading-normal / 1.5Long form notes and service guidance
--primitive-leading-relaxed / 1.7Letter spacing
Wide display copy
--primitive-tracking-tight / 0Body and forms
--primitive-tracking-normal / 0Label text
--primitive-tracking-wide / 0.08emPanel metadata
--primitive-tracking-wider / 0.16emSECTION EYEBROW
--primitive-tracking-widest / 0.22emParagraph spacing
Dense inspector metadata
Used when text blocks need 8px of vertical rhythm.
--primitive-space-2 / 8pxForm labels, helper text, fields
Used when text blocks need 16px of vertical rhythm.
--primitive-space-4 / 16pxParagraph groups and documentation
Used when text blocks need 24px of vertical rhythm.
--primitive-space-6 / 24pxMajor board sections
Used when text blocks need 48px of vertical rhythm.
--primitive-space-10 / 48pxIndividual typography files
Each role below has a dedicated TSX component and CSS module under the typography component package, making the typography system bootstrappable from individual files.
components/typography/role-display.tsxcomponents/typography/role-display.module.cssHero mastheads, signage panels, campaign leads.
components/typography/role-h1.tsxcomponents/typography/role-h1.module.cssPrimary page titles and full-screen workflow headers.
components/typography/role-h2.tsxcomponents/typography/role-h2.module.cssMajor section headers and dashboard surface titles.
components/typography/role-h3.tsxcomponents/typography/role-h3.module.cssPanel groups, card clusters, and sub-route titles.
components/typography/role-h4.tsxcomponents/typography/role-h4.module.cssCompact card titles and toolbar section labels.
components/typography/role-h5.tsxcomponents/typography/role-h5.module.cssSmall card headers, list groups, and dense inspectors.
components/typography/role-h6.tsxcomponents/typography/role-h6.module.cssMicro-section headers and repeated table group titles.
components/typography/role-body-lead.tsxcomponents/typography/role-body-lead.module.cssIntro paragraphs and explanatory copy above a workflow.
components/typography/role-body-base.tsxcomponents/typography/role-body-base.module.cssDefault product UI copy, forms, cards, and content blocks.
components/typography/role-body-small.tsxcomponents/typography/role-body-small.module.cssSecondary descriptions, table helper copy, and dense cards.
components/typography/role-caption.tsxcomponents/typography/role-caption.module.cssMedia captions, metadata, timestamps, and tiny helper copy.
components/typography/role-eyebrow.tsxcomponents/typography/role-eyebrow.module.cssSmall uppercase section labels and production board markers.
components/typography/role-label.tsxcomponents/typography/role-label.module.cssControl labels, chips, badges, and filter names.
components/typography/role-mono.tsxcomponents/typography/role-mono.module.cssCodes, logs, routes, diagnostics, and technical readouts.
components/typography/role-numeric.tsxcomponents/typography/role-numeric.module.cssCounters, prices, percentages, odometer values, and KPIs.
components/typography/role-control.tsxcomponents/typography/role-control.module.cssButtons, segmented controls, toggles, tabs, and command labels.
components/typography/role-dense-table.tsxcomponents/typography/role-dense-table.module.cssData grids, service rows, invoice lines, and compact telemetry tables.
components/typography/role-kinetic-safe.tsxcomponents/typography/role-kinetic-safe.module.cssBounded animated words that keep readable text available and settle under reduced motion.
Anton
Industrial single-cut display. Letter-stagger rise resolves the headline a glyph at a time so it reads on the workshop hero.
Anton
Display · Single cutAnton carries marquee weight in a single cut. We use it for hero callouts where every glyph has to clear a fifty-foot read distance through workshop glass.
Bay 04 — final road test
Regular 400 — only cut
+ letter-spacing 0.04em
+ uppercase + tabular
Big Shoulders Inline
Heavy inline display with a printed coach-line. Gradient sweeps fill the outline left-to-right for livery and signage callouts.
Big Shoulders Inline
Display · Inline ruleBuilt On The Coast Road
Big Shoulders Inline frames our headline gallery work. The inline rule reads as a coach-line — perfect for chrome callouts and printed window decals.
Signage · livery · poster
Regular 400
Bold 700
Black 900
Bebas Neue
Condensed marquee cut. Runs as a horizontal banner ticker — perfect for live status rails and bay announcements.
Bebas Neue
Display · CondensedBebas Neue runs along the workshop banner — a single condensed cap that holds the eye at any speed. We use it for live status bars and rolling marquee notices.
Marquee · ticker · banner rail
Regular 400 — only cut
+ letter-spacing 0.06em
+ marquee 28s loop
Space Grotesk
Tightened grotesque for body, telemetry, and UI labels. Typewriter caret reveal reinforces the diagnostic / terminal voice.
Space Grotesk
Sans · 300 → 700Space Grotesk is our day-to-day workhorse. Slightly tightened tracking, generous x-height, and consistent rhythm down to body sizes — it sits clean over diagrams, charts, and live data.
Body · UI · telemetry
Light 300
Regular 400
Medium 500
SemiBold 600
Bold 700
Fraunces
Variable serif with weight, optical-size, soft, and wonk axes. Morph cycle showcases the full expressive range in one mark.
Fraunces
Serif · Variable axesCraft, restored
Fraunces is a variable serif with theatrical range. We push the weight axis from a hairline 200 up to 900, and the optical-size axis from caption to display, so a single family covers everything from invoice notes to gallery posters.
Editorial · long-form · invoices
wght 200 / opsz 9
wght 400 / opsz 14
wght 600 / opsz 48
wght 900 / opsz 144
Major Mono Display
All-lowercase decorative mono. Client-side cipher scramble resolves left-to-right and aria-label keeps the spoken text stable.
Major Mono Display
Mono display · ciphermajor mono display is reserved for vehicle identifiers, cipher reveals, and forensic markers. the lowercase cap height + decorative inline rule reads as machine output.
cipher · vin · serial
regular 400 — only cut
tracked +0.06em
lowercase only
Bricolage Grotesque
Variable grotesque sweeping the width axis 75 to 125 and optical size 12 to 96. One family for tight chips and wide headlines.
Bricolage Grotesque
Grotesque · wdth · opszCoastal precision engineering
Bricolage Grotesque has a width axis from 75 to 125 and an optical-size axis up to 96. We use the narrow cut in tight metadata strips and the widest cut for hero headlines that need to anchor a full row.
Variable wdth · opsz
wdth 75 / opsz 12
wdth 100 / opsz 24
wdth 110 / opsz 48
wdth 125 / opsz 96
IBM Plex Mono
Engineering-grade monospace. Vertical scanline overlay sweeps across the heading to read as a live telemetry stream.
IBM Plex Mono
Mono · 400 / 600IBM Plex Mono is the canonical pick for code, telemetry, and event logs. We pair the 400 cut with 600 for emphasis, and let the scanline wipe across the heading to signal that a stream is live.
Code · logs · diagnostics
Regular 400
SemiBold 600
Inter Tight
Tightened Inter for modern product callouts. Four-stop gradient sweep paints the whole brand palette across the heading.
Inter Tight
Sans · Variable wghtTuned For The Road Ahead
Inter Tight tightens the metrics of Inter so headlines sit closer without losing rhythm. We let the gradient sweep wash through the heading colour-by-colour to mark dynamic product callouts.
Product · marketing · hero
Light 300
Regular 400
Medium 500
Bold 700
Black 900
Cormorant Garamond
Most romantic Garamond revival. Fades up from below while resolving italic to roman — a flourish reserved for heritage copy.
Cormorant Garamond
Serif · 400 / 700 · italicsHeritage, in motion
Cormorant Garamond is the most romantic of the Garamond revivals — long ascenders, swept terminals, and a confident italic. We use it on heritage stories, certificate copy, and longform editorial pages that anchor the brand.
Heritage · editorial · invitations
Regular 400
Regular Italic
Bold 700
Bold Italic
Typography moves with the rest of the kit
These combinations reuse the shared Reveal, StaggerList, GradientTrail, and MorphText primitives so type, material, and brand feedback land as one system instead of separate effects.
Brand lockup choreography
Built for signs
Material spark, glyph flicker, and trail draw share the same amber/red heat.
A reveal wrapper lands the bay phrase while the material pulse confirms state.
Signal-mark motion, mono scanline text, and a trace path read as one live bus.
The approval material mark, morph copy, and soft neon wordmark stay readable in light mode.
More type animations for real primitives
Focused KineticText presets are mapped to material marks, status chips, keyboard tags, stat tiles, and progress rails so product screens can reuse them without inventing one-off motion.
Gauge-style material pulse and underline ramp share the same red/amber climb.
Glyphs compress then release for launch-status labels without blurring the word.
Redline spool styling pairs with compact performance cards.
A short red flash for checks, warnings, and stop-state microcopy.
Livery-color sweep for banners that need to feel tied to brand assets.
Dashed path underline works with location, delivery, and service-radius views.
Hard-edged stamp treatment for paid, approved, and collected states.
Per-glyph ignition flicker borrows the heat, bevel, and spark styling.
Subtle vertical lift gives service-bay labels a mechanical raise cycle.
A compact sweep marker for dashboards and tune-progress readouts.
Scanline typography stays legible for diagnostic panels and system rails.
Finish-flag energy for completion surfaces without losing word shape.
Drafting-grid texture ties type to service plans, diagrams, and route overlays.
A controlled paint-marker pass gives labels the same warm accent as brand chips.
Stepped underline progress reads with stat tiles, segmented bars, and tuning states.
Hard offset shadows create a dark-mode display hit without blurring the letterform.
A diagonal scan slice connects live bus labels to signal marks and telemetry rails.
Bracketed motion frames short state copy for chips, approvals, and handoff rows.
Kinetic type plugs into primitive tokens
New local KineticText motions are shown as reusable recipes: each one binds a font, a material mark, a tone chip, a stat tile, a keyboard tag, and a progress rail.
The motion recipes stay bounded inside the typography primitive, then borrow the surrounding system tokens for tone, glow, rails, and state feedback.
8
6
Ecosystem recipe coverage92%
Glyph lift follows a cam rhythm and lands beside material controls, stat tiles, and timing chips.
12
Cam timing ecosystem sync
The bead underline shares heat tokens with welded material styling and keeps the word itself readable.
04
Weld bead ecosystem sync
Conic type shimmer, cooling material mark, and redline progress form one primitive story.
82
Cooling balance ecosystem sync
Segmented charge type pairs with status material marks and progress rails without needing a bespoke component.
14.2
Charge rail ecosystem sync
Per-glyph pressure motion links boost, dyno, and telemetry copy to the same pulse cadence.
18
Pressure wave ecosystem sync
Bracket motion frames command text so keyboard tags and state chips feel mechanically connected.
H
Shift gate ecosystem sync
A supplier glow treatment ties partner marks, price tags, and approval copy to the brand palette.
7
Supplier lock ecosystem sync
A stepped telemetry ribbon gives mono labels the same segmented rhythm as diagnostic progress.
CAN
Data ribbon ecosystem sync
Mix any font with any motion
The KineticText primitive accepts a fontId, a motion id, and a Foundation size role. Each cell below renders a contained, reduced-motion-safe pairing so callers can wire the right effect without creating overflow or unreadable text.
antonletter-rise
antonstamp-pop
antonheat-shimmer
antonweld-flicker
antonredline-ramp
bigshouldersoutline-fill
bigshouldersarc-flash
bigshouldersgrid-lock
bigshoulderspaint-mask
inter-tightcolor-sweep
inter-tightchrome-glint
inter-tightroad-blur
inter-tightoil-slick
inter-tightturbo-spool
bebasmarquee
bebasspark-trail
bebaslane-split
bebasbay-door-reveal
bebasdyno-pull
bebaschecker-wave
bebasbrake-pulse
frauncesweight-morph
frauncesitalic-shift
frauncesexhaust-wave
frauncesreceipt-stamp
ibm-monoscanline-wipe
ibm-monosignal-bounce
ibm-monogauge-sweep
ibm-monovalve-tick
ibm-monoroute-draw
ibm-monotacho-needle
space-grotesktype-on
space-grotesktorque-tilt
space-groteskboost-squeeze
space-groteskpiston-stroke
space-groteskrelay-pulse
space-groteskcircuit-trace
space-groteskclutch-drop
space-groteskvisor-scan
major-monoscramble
major-monospark-plug-fire
bricolageaxis-swing
bricolagerubber-burn
bricolageneon-idle
bricolagehoist-lift
cormorantchrome-glint
ibm-monoblueprint-pan
bigshouldersmarker-swipe
space-groteskmeter-step
antonimpact-stack
inter-tightsignal-cut
bricolagestatus-latch
space-groteskcam-sync
antonbead-run
bricolagefan-balance
ibm-monobattery-charge
bebaspressure-wave
bigshouldersshift-gate
inter-tightsupplier-glow
major-monodata-ribbon