Design Context / Style Guide

Tokens

The Style Guide branch now owns token reference, templates, and design-system management under Design. This surface is focused on the token layer only.

Token Map

Source: app/jsonm/baselines/apollo-v0.1.0.jsonm · Base-8 geometry · ✓ base-8 ~ half-step exempt

color.semantic

TokenValueSwatch
bg#ffffff
surface#ffffff
surfaceAlt#f6f7f8
text#111111
textMuted#444444
border#d0d4d8
borderStrong#a7adb4
focus#1a73e8
link#1a73e8
linkHover#1558b0
accent#111111
accentText#ffffff
danger#b00020
dangerText#ffffff
success#0a7a3a
successText#ffffff
warning#8a5b00
warningText#ffffff

typography.fontSizePx exempt from geom.base8

xs · 12px · regular The quick brown fox jumps over the lazy dog
sm · 14px · regular The quick brown fox jumps over the lazy dog
md · 16px · regular The quick brown fox jumps over the lazy dog
lg · 18px · medium The quick brown fox jumps over the lazy dog
xl · 20px · semibold The quick brown fox jumps
2xl · 24px · bold The quick brown fox
3xl · 32px · bold The quick brown fox

typography.fontFamily

sans AaBbCcDd 0123456789 !@#$
mono AaBbCcDd 0123456789 !@#$

space.scalePx geom.base8 enforced

Key px Geom Bar
s00 ✓ zero
s0_54 ~ half
s18 ✓
s1_512 ~ half
s216 ✓
s324 ✓
s432 ✓
s540 ✓
s648 ✓
s756 ✓
s864 ✓
s972 ✓
s1080 ✓
s1296 ✓

size — control heights & icons base-8

TokenpxGeomBar
controlHeightsPx.sm32✓
controlHeightsPx.md40✓
controlHeightsPx.lg48✓
iconPx.sm16✓
iconPx.md20~
iconPx.lg24✓
hitTargetMinPx40✓

radius.scalePx geom.halfStepOnly enforced

r0 · 0px ✓ zero
r0_5 · 4px ~ half-step
r1 · 8px ✓ base-8
r2 · 16px ✓ base-8

shadow

none
sm
md

motion

duration.none0ms
duration.fast120ms
duration.normal180ms
easing.standardcubic-bezier(0.2, 0, 0, 1)

focus

ringWidthPx2px
ringOffsetPx2px
outlineStylesolid
Focus ring preview

zIndex

base0
dropdown10
overlay20
modal30
toast40

States

Source: myron.tokens.states.v1.json5 v1.0.0 · 5 canonical state packs. Components reference these packs instead of defining their own behavior.

hover

Pointer hover state.

Token Deltas
color.semantic.linkHover → primitive.link
live: Hover over this link
active

Pressed/active state.

Token Deltas
— baseline empty; theme/recipe defined —
live:
focus

Keyboard focus state (must be visible).

Token Deltas
color.semantic.focus → button, input, link
focus.ringWidthPx → button, input, link
focus.ringOffsetPx → button, input, link
  • Focus must remain visible.
  • Focus must not rely on color alone if outline is removed.
live:
disabled

Disabled state for controls and disabled-like surfaces.

Token Deltas
color.semantic.textMuted → button, input
live:
invalid

Invalid/error state for inputs.

Token Deltas
color.semantic.danger → input, textarea, select
  • Must be conveyed with aria-invalid plus an error message surface.
  • Do not rely on color alone.
live:

Primitives

Atomic elements. Compile to semantic HTML. All styles source from token hooks.

primitive.text span

Default / as variants / muted

Default text · Strong · Emphasis · Small · Mark · Muted

primitive.paragraph p

tone: default / muted

The system compiles structured rules into reproducible output. Designers mutate rules. Content managers assemble screens. AI proposes structured changes.

Muted tone: used for supporting copy, metadata, or secondary descriptive text that should recede visually.

primitive.heading h1–h6

level 1–6

Heading Level 1 — 32px bold

Heading Level 2 — 24px bold

Heading Level 3 — 20px bold

Heading Level 4 — 18px bold

Heading Level 5 — 16px semibold
Heading Level 6 — 14px semibold wide

primitive.link a

appearance: inline / standalone / disabled

This sentence contains an inline link that flows with body text.

Standalone link →

Disabled link

primitive.inlineCode code

Inline within body text

Use --myron-color-text for primary text and --myron-color-text-muted for secondary text.

primitive.list ul / ol

style-bulleted · density-md (default)
  • First item in the list
  • Second item with more content
  • Third item to show spacing
style-numbered · density-sm
  1. Ordered first step
  2. Ordered second step
  3. Ordered third step
style-none · density-lg
  • No marker, large density
  • Useful for nav or card lists

primitive.quote blockquote

tone-default
Good design is as little design as possible. Dieter Rams
tone-muted
Simplicity is the ultimate sophistication. Leonardo da Vinci

primitive.codeBlock pre

density-md (default) 
/* Token hook enforcement */
.myron-button {
  background-color: var(--myron-color-accent);
  color: var(--myron-color-accent-text);
  border-radius: var(--myron-radius-sm);
}
density-sm 
const greeting = "Hello, MyronCMS";

primitive.table table

borders-rows · density-md
Component token hook coverage
Component Level Allowed hooks
primitive.text primitive typography.*, color.semantic.*
control.button control space.*, radius.*, color.semantic.*, focus.*
composite.card composite space.*, radius.*, border.*, color.semantic.*
borders-all · density-sm
Token Value Alias
space.s1 8px sm
space.s2 16px md
borders-none · density-lg
Name Role
MyronCMS CMS Platform
Apollo Codename

primitive.image + primitive.figure img / figure

radius-none image
radius-md image
radius-lg image
primitive.figure — alignment-center with figcaption
figure
Figure 1 — A centered layout with a descriptive caption below.

Layout

Layout primitives and spacing utilities. Token hooks: space and layout only. No color or typography hooks.

structure.container

maxWidth: sm / md / lg — shown at reduced scale
container · max-sm · 720px
container · max-md · 960px
container · max-lg · 1120px

structure.stack

gap: xs / md / xl · align: start / stretch
gap-xs
Item A
Item B
Item C
gap-md (default)
Item A
Item B
Item C
gap-xl
Item A
Item B
Item C

structure.grid

cols-3 · gap-md (default auto-fill behavior)
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6

structure.columns

count-2 / count-3 · gap-md
count-2
Column A
Column B
count-3
Column A
Column B
Column C

structure.spacer div

All 6 size variants — vertical height
size-xs · 4px
size-sm · 8px
size-md · 16px
size-lg · 24px
size-xl · 32px
size-2xl · 48px

structure.separator hr

tone-default and tone-strong

Content above separator — tone: default

Content between separators

Content below separator — tone: strong

Controls

Interactive elements. Token hooks: size, space, radius, border, typography, color, focus, motion. shadow.level.md is forbidden on button.

control.button

intent: neutral · appearance: solid / outline / ghost · size: sm / md / lg
neutral · solid
neutral · outline
neutral · ghost
intent: accent · appearance: solid / outline / ghost
intent: danger · appearance: solid / outline / ghost
States: disabled (all intents)

control.input

size: sm / md / lg
size-sm · 32px
size-md · 40px (default)
size-lg · 48px
States: default / focus (tab to see) / disabled / invalid · tone: default / muted
default
tone: muted
disabled
invalid (aria-invalid)

control.textarea textarea

size sm · md · lg + tone-muted + disabled + invalid
size-sm
size-md (default)
size-lg
tone-muted
disabled
invalid (aria-invalid)

control.select select

size sm · md · lg + disabled + invalid
size-sm
size-md (default)
size-lg
disabled
invalid

control.checkbox + control.radio input

Checkbox — size sm · md · checked · disabled
Radio — grouped · checked · disabled

composite.formField div

layout-stacked — label · control · helpText · errorText

We'll never share your email.

layout-inline — label · control

Composites

Composed from primitives and structure. Token hooks: space, radius, border, surface colors only. motion.* is forbidden.

composite.card

tone: default / alt · border: none / thin · padding: sm / md / lg

Default · No Border

tone-default, border-none, padding-md

Default · Thin Border

tone-default, border-thin, padding-md

Alt · Thin Border

tone-alt, border-thin, padding-md

Padding SM

padding-sm · 8px

Padding MD

padding-md · 16px

Padding LG

padding-lg · 24px

All 3 slots: header · body · footer

Card Header

Card body content. This slot accepts any governed components and structured content.

CMS Primitives

Source: myron.component-surface.cms-primitives.v1.json5 · 8 components. Portable CMS output primitives. Token hooks: space, radius, border, typography, color.semantic. shadow.* forbidden on all.

cms.embed

primitive html: div > iframe Allowed: space.*, radius.*, border.widthPx.*, color.semantic.border Forbidden: shadow.*
aspect: auto · 16:9 · 4:3 · 1:1
aspect-auto
embed · aspect-auto
aspect-16-9
16:9 · 56.25%
aspect-4-3
4:3 · 75%
aspect-1-1
1:1 · 100%
props: provider enum · title (a11y)
proptypevaluesdefault
urlstring——
providerenumgeneric · youtube · vimeo · x · instagram · tiktok · spotify · soundcloud · reddit · othergeneric
titlestring——
aspectenumauto · 16:9 · 4:3 · 1:1auto

cms.collectionQuery

structure html: div Allowed: space.* Forbidden: shadow.*
structure-only · slot: template → cms.collectionTemplate
cms.collectionQuery · source:posts · limit:10 · orderBy:date · order:desc
cms.collectionTemplate · slot: item → [any]
item[0] — composed from cms.content* primitives
item[1]
item[2]
proptypevaluesdefault
sourceenumposts · pages · products · customposts
limitinteger—10
orderenumasc · descdesc
orderByenumdate · title · customdate

cms.collectionPagination

structure html: nav Allowed: space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
mode: numbers
mode: prevNext
mode: both

cms.contentTitle

primitive html: h2 (level-bound) Allowed: typography.*, space.*, color.semantic.text Forbidden: shadow.*
level: 1 → 4 (compiles to primitive.heading)

Content Title — Level 1

Content Title — Level 2

Content Title — Level 3

Content Title — Level 4

cms.contentBody

primitive html: div · slot: [any governed] Allowed: space.*, typography.*, color.semantic.*
flow-spaced content container · > * + * gap applies

Post Heading H3

This is the first paragraph of the content body. The cms.contentBody wrapper applies flow spacing between all direct children via margin-top on adjacent siblings.

A second paragraph. All content is sanitized into governed Myron components — no raw HTML injection. The flow gap is controlled by --myron-space-md.

  • First governed list item
  • Second governed list item
  • Third governed list item

A final paragraph after the list, demonstrating that flow spacing continues across all child types.

cms.contentExcerpt

primitive html: p Allowed: typography.*, space.*, color.semantic.textMuted
muted excerpt paragraph · compiles to primitive.paragraph

This is the content excerpt — a short summary of the post or article rendered in muted text. It is used in collection templates, card bodies, and search result snippets to give readers a preview without loading the full content body.

cms.contentFeaturedMedia

primitive html: div (aspect-ratio wrapper) Allowed: space.*, radius.*, border.widthPx.*, color.semantic.border Forbidden: shadow.*
aspect: auto · 16:9 · 4:3 · 1:1
aspect-auto
featured image · auto
aspect-16-9
16:9
aspect-4-3
4:3
aspect-1-1
1:1

Patterns

Source: myron.component-surface.patterns.v1.json5 · 9 patterns. Composed from primitives and structure. shadow.* forbidden on all patterns.

pattern.headerSystem

pattern html: header slots: brand · nav · actions Allowed: space.*, layout.gutterPx.*, color.semantic.*, border.widthPx.* Forbidden: shadow.*
layout: split (default) · slots: brand, nav, actions
MyronCMS
layout: centered · sticky: true
Brand
props · variants
prop / varianttypevaluesdefault
stickyboolean—false
layoutvariantcentered · split · stacked—

pattern.footerSystem

pattern html: footer slots: columns · meta Allowed: space.*, color.semantic.*, border.widthPx.* Forbidden: shadow.*
layout: minimal
layout: multi-column

pattern.heroSimple

pattern html: section slots: headline · subhead · media Allowed: space.*, layout.containerMaxWidthPx.*, layout.gutterPx.*, color.semantic.*, typography.* Forbidden: shadow.*
layout: centered

Build faster with Myron

The governed design system for modern CMS products. Token-enforced, accessible by default.

layout: split (headline + media)

Split hero layout

Content on the left, media on the right. Reverses on mobile.

primitive.image slot

pattern.heroWithCta

pattern html: section slots: headline · subhead · actions · media Allowed: space.*, layout.*, color.semantic.*, typography.*, focus.* Forbidden: shadow.*
layout: centered · actions slot populated

The CMS for modern teams

Ship governed, accessible interfaces without sacrificing speed.

pattern.ctaBand

pattern html: section slots: headline · body · actions Allowed: space.*, color.semantic.*, typography.*, layout.*, focus.* Forbidden: shadow.*
tone: default · layout: centered

Ready to get started?

Join thousands of teams already shipping with Myron.

tone: alt · layout: split

Start your free trial

No credit card required. Cancel anytime.

pattern.featureGrid

pattern html: section slots: title · items (composite.card) Allowed: space.*, layout.*, typography.*, color.semantic.* Forbidden: shadow.*
density: md · 3 columns (default)

Everything you need

Token-enforced

Every component declares allowed and forbidden token hooks at the spec level.

Accessible by default

A11y rules defined at component level — focus, aria, heading hierarchy.

Governed patterns

Patterns compose from governed primitives — no unconstrained HTML.

density: sm / md / lg gap comparison
density-sm

gap-sm

gap-sm

gap-sm

density-md

gap-md

gap-md

gap-md

density-lg

gap-xl

gap-xl

gap-xl

pattern.pricingTable

pattern html: section slots: title · tiers (composite.card) Allowed: space.*, layout.*, typography.*, color.semantic.* Forbidden: shadow.*
emphasis: middle · 3 tiers

Simple pricing

Starter

$0

per month

  • 3 projects
  • 1 GB storage
  • Community support

Pro

$29

per month

  • Unlimited projects
  • 50 GB storage
  • Priority support

Enterprise

Custom

 

  • Custom volume
  • SLA + compliance
  • Dedicated support

pattern.faqList

pattern html: section · native <details>/<summary> behavior: disclosure (CSS-only, no JS) Allowed: space.*, typography.*, color.semantic.*, border.widthPx.*, radius.*, focus.* Forbidden: shadow.*
behavior: disclosure · CSS-only · +/− chevron via ::after pseudo-element

Frequently asked questions

What is Myron and who is it for?

Myron is a governed design system for modern CMS products. It's built for product teams that need consistent, accessible interfaces without sacrificing developer velocity.

What does "token-enforced" mean?

Every component declares allowed and forbidden token hooks in its spec. CSS only references tokens from the allowed list, preventing style drift and side-channel overrides.

How does the disclosure behavior work?

The FAQ disclosure uses the native HTML <details> and <summary> elements — no JavaScript required. The +/− toggle is rendered via a ::after pseudo-element on summary.

Is this accessible?

Yes. Native <details> is keyboard accessible. Focus ring is provided via focus-visible with Myron focus tokens. Screen readers announce the expanded/collapsed state natively.

pattern.testimonialGrid

pattern html: section slots: title · items (composite.card) Allowed: space.*, layout.*, typography.*, color.semantic.* Forbidden: shadow.*
3-column grid · items composed from composite.card

What teams are saying

"Myron cut our design debt in half. Token enforcement means even junior devs stay on-brand."

Alex K.

Lead Engineer, Acme Corp

"The MCD process keeps our sprint work aligned with what's actually in scope. No more scope creep."

Priya M.

Product Manager, Studio Labs

"We shipped the entire marketing site in 3 days using only Myron patterns. Incredible velocity."

Sam T.

Founder, Buildfast

SaaS Pack

Source: myron.component-surface.saas-pack.v1.json5 · 29 components (4 primitives, 13 composites, 8 patterns, 4 templates). Foundational pack — badge, chip, progressBar, pagination, emptyState, alert, and tableToolbar are consumed by all other extension packs. shadow.* forbidden on all.

primitive.badge

primitive inline variants: default · success · warning · danger · info sizes: sm · md Allowed: color.semantic.*, typography.*, space.*, radius.*, border.* Forbidden: shadow.*
primitive.badge · all tones · all sizes
Default Success Warning Danger Info | Default sm Success sm Danger sm

Token hooks: color.semantic.* via color-mix() for tinted backgrounds · typography.size.xs · radius.sm · border.hairline

primitive.chip

primitive inline · dismissible appearances: default · outlined · tinted Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*, motion.* Forbidden: shadow.*
primitive.chip · all appearances · with dismiss
Default Outlined Tinted Label only

Token hooks: space.xs / sm · radius.md · border.hairline · dismiss uses motion.duration.fast

primitive.progressBar

primitive tones: default · success · warning · danger indeterminate state Allowed: color.semantic.*, space.*, radius.*, motion.* Forbidden: shadow.*
primitive.progressBar · tones + indeterminate

default · 60%

success · 80%

warning · 45%

danger · 25%

indeterminate · animated

Token hooks: color.semantic.* · radius.md · motion.duration.normal + easing.standard for track transition

primitive.skeletonBlock

primitive shapes: rect · circle · text animated shimmer Allowed: color.semantic.*, space.*, radius.*, motion.* Forbidden: shadow.*
primitive.skeletonBlock · rect · circle · text · card skeleton

Token hooks: color.surface-alt / border as shimmer gradient stops · shimmer keyframe uses 1.5s ease-in-out infinite

composite.breadcrumbs + composite.breadcrumbItem

composite nav landmark Allowed: color.semantic.*, typography.*, space.*, radius.* Forbidden: shadow.*
composite.breadcrumbs · ARIA nav pattern

a11y: aria-label="Breadcrumb" on nav · aria-current="page" on current item · separators get aria-hidden="true"

composite.tabs + composite.tabList + composite.tab + composite.tabPanel

composite ARIA tabs pattern Allowed: color.semantic.*, typography.*, space.*, border.*, motion.* Forbidden: shadow.*
composite.tabs · role=tablist / tab / tabpanel · aria-selected · aria-controls

Profile settings panel content.

a11y: role="tablist" on wrapper · role="tab" on each trigger · aria-selected="true/false" · aria-controls → panel id · role="tabpanel" · inactive panels get hidden

composite.pagination

composite prev · numbered · next Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*, motion.* Forbidden: shadow.*
composite.pagination · aria-label="Pagination" · aria-current="page" on active page

Token hooks: accent on current page · border.hairline on hover · motion.duration.fast on transitions

composite.emptyState

composite illustration slot · heading · body · actions Allowed: color.semantic.*, typography.*, space.* Forbidden: shadow.*
composite.emptyState

No results found

Try adjusting your filters or search terms to find what you're looking for.

composite.statsTile

composite label · value · trend indicator Allowed: color.semantic.*, typography.*, space.*, radius.*, border.* Forbidden: shadow.*
composite.statsTile · trend up · trend down · no trend
Total Users 12,483 ↑ 8.2% this month
Bounce Rate 34.1% ↓ 2.4% this month
Active Sessions 847

Token hooks: color.success for trend-up · color.danger for trend-down · border.hairline + radius.md on card

composite.alert

composite role="alert" tones: info · success · warning · danger dismissible Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*, motion.* Forbidden: shadow.*
composite.alert · role="alert" · all tones · dismissible

a11y: role="alert" announces to screen readers on mount · dismiss button requires aria-label

composite.toast

composite role="status" positions: top-right · bottom-right · top-left · bottom-left tones: default · success · warning · danger Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*, z-index (--myron-z-toast) Forbidden: shadow.*
composite.toast · role="status" · static specimens (live region would be position:fixed via .myron-toast-region)

Link copied

The share link has been copied to clipboard.

File uploaded

report-q4.pdf was uploaded successfully.

Storage nearly full

You are using 90% of your storage quota.

Upload failed

Connection lost. Please retry.

z-index: --myron-z-toast (40) on .myron-toast-region · role="status" for polite announcements

composite.tooltip

composite role="tooltip" trigger: hover + focus Allowed: color.semantic.*, typography.*, space.*, radius.*, z-index (--myron-z-dropdown), motion.* Forbidden: shadow.*
composite.tooltip · hover or focus to reveal
Opens the settings panel Keyboard shortcut: ⌘K

a11y: trigger element has aria-describedby pointing to tooltip id · z-index: --myron-z-dropdown (10)

composite.popover

composite aria-expanded · focus trap when open Allowed: color.semantic.*, space.*, radius.*, border.*, z-index (--myron-z-overlay) Forbidden: shadow.*
composite.popover · aria-expanded="true" state

a11y: trigger uses aria-expanded + aria-controls · focus must be trapped inside open popover · z-index: --myron-z-overlay (20)

pattern.sidebarNav

pattern vertical nav · active state · expandable groups Allowed: color.semantic.*, typography.*, space.*, radius.*, border.*, motion.* Forbidden: shadow.*
pattern.sidebarNav · grouped · active item · nested sub-items

a11y: aria-current="page" on active item · group labels provide context for screen readers

pattern.subNavBar

pattern horizontal sub-navigation Allowed: color.semantic.*, typography.*, space.*, border.*, motion.* Forbidden: shadow.*
pattern.subNavBar · active item · overflow scrolls horizontally

pattern.dataTable

pattern sortable headers (aria-sort) · row selection Allowed: color.semantic.*, typography.*, space.*, radius.*, border.* Forbidden: shadow.*
pattern.dataTable · aria-sort on sortable columns · aria-selected on selected row
Name ↑ Role Status Actions
Alice Martin Admin Active Edit
Bob Chen Editor Active Edit
Carol Davis Viewer Invited Edit

a11y: aria-sort="ascending|descending|none" on sortable th · aria-selected="true" on selected tr · scope="col" on all header cells

pattern.tableToolbar

pattern search · bulk actions · column controls · count Allowed: color.semantic.*, space.*, border.*, typography.* Forbidden: shadow.*
pattern.tableToolbar · above dataTable
128 users

pattern.banner

pattern full-width · tones: info · success · warning · danger dismissible Allowed: color.semantic.*, typography.*, space.*, border.*, motion.* Forbidden: shadow.*
pattern.banner · all tones
📢 New features available. Check out the latest updates to your dashboard.
✅ Payment processed. Your subscription has been renewed.
⚠️ Card expiring soon. Update your payment method before Dec 31.
🚨 Account suspended. Contact support to restore access.

pattern.signInForm

pattern email · password · submit · validation Allowed: color.semantic.*, space.*, typography.*, radius.*, border.* Forbidden: shadow.*
pattern.signInForm

pattern.profilePanel

pattern avatar · name · metadata · actions Allowed: color.semantic.*, space.*, typography.*, radius.*, border.* Forbidden: shadow.*
pattern.profilePanel
AJ

Alice Johnson

alice@example.com · Admin · Joined Jan 2024

pattern.settingsLayout

pattern two-column: nav sidebar + content area Allowed: color.semantic.*, space.*, layout.*, border.* Forbidden: shadow.*
pattern.settingsLayout · truncated preview

Profile settings

Manage your name, email, and profile picture.

Collapses to single column on viewports ≤ 640px · nav moves above content area

User & Admin Pack

Source: myron.component-surface.user-admin-pack.v1.json5 · 11 components (2 primitives, 5 composites, 4 patterns). Requires saas-pack badge. shadow.* forbidden on all.

Primitives

primitive.avatar

primitive size: xs · sm · md · lg · xl shape: circle · rounded Token hooks: size.*, radius.*, border.widthPx.* Forbidden: shadow.*
primitive.avatar · sizes + initials fallback
AB
CD
EF
GH
IJ
RD

primitive.userHandle

primitive tone: default · muted Token hooks: typography.*, color.semantic.* Forbidden: shadow.*
primitive.userHandle · tone variants
@janedoe @janedoe

Composites

composite.userIdentity

composite size: sm · md · lg layout: inline · stacked Token hooks: space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
composite.userIdentity · inline (sm / md / lg) + stacked
JD
Jane Doe @janedoe
JD
Jane Doe @janedoe
JD
Jane Doe @janedoe

composite.roleBadge

composite extends primitive.badge role: owner · admin · editor · author · viewer · custom size: sm · md Token hooks: color.semantic.*, typography.*, space.*, radius.* Forbidden: shadow.*
composite.roleBadge · all roles
Owner Admin Editor Author Viewer Custom

composite.permissionMatrixRow

composite density: sm · md Token hooks: space.*, border.widthPx.*, color.semantic.*, typography.* Forbidden: shadow.*
composite.permissionMatrixRow · density md
Publish posts
Manage users

composite.userRow

composite density: sm · md Token hooks: space.*, border.widthPx.*, color.semantic.*, focus.* Forbidden: shadow.*
composite.userRow · density md · hover state
JD
Jane Doe@janedoe
 Editor
MK
Mark Kim@mkim
 Viewer

composite.profileSummaryCard

composite tone: default · alt Token hooks: space.*, radius.*, border.widthPx.*, color.semantic.*, typography.* Forbidden: shadow.*
composite.profileSummaryCard · tone default
JD
Jane Doe @janedoe Admin
jane@example.com Member since Jan 2024

Patterns

pattern.userList

pattern density: sm · md Token hooks: space.*, border.widthPx.*, color.semantic.* Forbidden: shadow.*
pattern.userList · density md · with empty-state slot
User Role Actions
JD
Jane Doe@janedoe
 Admin
MK
Mark Kim@mkim
 Editor

pattern.inviteUserForm

pattern layout: stacked · inline Token hooks: space.*, radius.*, border.widthPx.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.inviteUserForm · layout stacked

pattern.accessManagementPanel

pattern layout: stacked Token hooks: space.*, border.widthPx.*, color.semantic.* Forbidden: shadow.*
pattern.accessManagementPanel · userList + permissionMatrix composition

Team members

JD
Jane Doe
 Owner

Permissions

Publish posts

pattern.avatarUploadPanel

pattern layout: stacked · inline Token hooks: space.*, radius.*, border.widthPx.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.avatarUploadPanel · layout stacked · references dropzone from Content Admin pack
JD
Drop image here or browse JPG, PNG, WebP · max 2 MB · 1:1 recommended

Content Admin Pack

Source: myron.component-surface.content-admin-pack.v1.json5 · 15 components (1 primitive, 4 composites, 10 patterns). Requires saas-pack alert and tableToolbar. shadow.* forbidden on all.

Primitive

primitive.kvRow

primitive density: sm · md Token hooks: space.*, typography.*, color.semantic.*, border.widthPx.* Forbidden: shadow.*
primitive.kvRow · key + value layout · density md
File type image/png
Dimensions 1920 × 1080 px
File size 248 KB

Composites

composite.copyField

composite size: sm · md Token hooks: space.*, radius.*, border.widthPx.*, color.semantic.*, focus.* Forbidden: shadow.*
composite.copyField · size md · read-only input + copy button

composite.dropzone

composite emphasis: low · medium states: idle · hover · active · error · disabled Token hooks: space.*, radius.*, border.widthPx.*, color.semantic.*, focus.* Forbidden: shadow.*
composite.dropzone · all 4 states
idle Drop files here or browse
hover Drop files here or browse
active (drag over) Release to upload
error File type not accepted Only JPG, PNG, or WebP allowed.

composite.uploadQueueItem

composite density: sm · md status: queued · uploading · processing · done · error Token hooks: space.*, border.widthPx.*, color.semantic.*, typography.* Dependency: primitive.progressBar (saas-pack) Forbidden: shadow.*
composite.uploadQueueItem · status variants
hero-image.png
Uploading…
logo.svg Done
video.mp4 Error — file too large

composite.fileRow

composite density: sm · md Token hooks: space.*, border.widthPx.*, color.semantic.*, focus.* Forbidden: shadow.*
composite.fileRow · density md · hover + selected states
annual-report.pdf 1.2 MB Mar 6, 2026
hero-banner.png 248 KB Mar 7, 2026

Patterns

pattern.uploadPanel

pattern layout: stacked · dropzone + queue Token hooks: space.*, border.widthPx.*, color.semantic.* Forbidden: shadow.*
pattern.uploadPanel · dropzone + uploadQueueItem list
Drop files here or browse JPG, PNG, PDF · max 10 MB each
logo.svg Done
hero-image.png
Uploading…

pattern.fileList

pattern density: sm · md · lg Token hooks: space.*, border.widthPx.*, color.semantic.* Forbidden: shadow.*
pattern.fileList · density md · sortable + bulk actions
Name Size Modified Actions
annual-report.pdf 1.2 MB Mar 6, 2026
hero-banner.png 248 KB Mar 7, 2026

pattern.bulkActionsBar

pattern tone: default · alt Token hooks: space.*, border.widthPx.*, color.semantic.*, typography.* Forbidden: shadow.*
pattern.bulkActionsBar · 1 item selected

pattern.fileMetaPanel

pattern width: sm · md layout: aside Token hooks: space.*, border.widthPx.*, color.semantic.*, zIndex: --myron-z-overlay Forbidden: shadow.*
pattern.fileMetaPanel · width sm · kvRow grid

hero-banner.png

Typeimage/png
Size248 KB
Dimensions1920 × 1080
UploadedMar 7, 2026

pattern.sharePanel

pattern layout: stacked · link + people Token hooks: space.*, border.widthPx.*, color.semantic.* Forbidden: shadow.*
pattern.sharePanel · copyField + access controls

Shareable link

People with access

JD
Jane DoeOwner

pattern.pageAttributesPanel

pattern layout: stacked form Token hooks: space.*, border.widthPx.*, radius.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.pageAttributesPanel · slug, status, visibility, publish date

pattern.featuredMediaPicker

pattern layout: stacked · inline Token hooks: space.*, radius.*, border.widthPx.*, color.semantic.* Forbidden: shadow.*
pattern.featuredMediaPicker · stacked · dropzone or media-library select
Drop image here or browse Recommended: 1200 × 630 px

pattern.seoFieldsPanel

pattern layout: stacked fields Token hooks: space.*, border.widthPx.*, color.semantic.*, typography.*, focus.* Forbidden: shadow.*
pattern.seoFieldsPanel · meta title + meta description + SERP preview
37 / 60 characters
82 / 160 characters
https://myron.cms/docs/getting-started Getting Started Guide · MyronCMS Learn how to set up and launch your first site with MyronCMS in under 10 minutes.

pattern.revisionActivityList

pattern density: sm · md Token hooks: space.*, border.widthPx.*, color.semantic.* Forbidden: shadow.*
pattern.revisionActivityList · density md · chronological feed
  1. JD
    Jane Doe
    published this page
  2. MK
    Mark Kim
    edited the hero section

pattern.activityItem

pattern tone: default · muted Token hooks: space.*, color.semantic.*, typography.* Forbidden: shadow.*
pattern.activityItem · actor + action + timestamp
JD
Jane Doe
published this page
SY
Sara Y.
left a comment

Ecommerce Pack

Source: myron.component-surface.ecommerce-pack.v1.json5 · 32 components (8 composites, 16 patterns, 8 templates). Provider-agnostic. shadow.* forbidden on all.

Composites

composite.priceDisplay

composite size: sm · md · lg emphasis: default · strong Token hooks: typography.*, space.*, color.semantic.* Forbidden: shadow.*
composite.priceDisplay · default + on-sale variants
$ 49.00
$ 34.99 $49.00

composite.quantityStepper

composite size: sm · md states: hover · focus · disabled Token hooks: size.*, space.*, radius.*, border.*, typography.*, color.semantic.*, focus.*, motion.* Forbidden: shadow.*
composite.quantityStepper · size md · default + disabled

composite.ratingSummary

composite size: sm · md Token hooks: typography.*, space.*, color.semantic.* Forbidden: shadow.*
composite.ratingSummary · 4.6 / 5 · 128 reviews
4.6 / 5 (128 reviews)

composite.productCard

composite tone: default · alt padding: sm · md · lg Token hooks: space.*, radius.*, border.*, color.semantic.*, typography.*, focus.* Forbidden: shadow.level.md
composite.productCard · default tone
Classic Linen Tee
$ 38.00

composite.variantSelector

composite mode: select · radio layout: stacked · inline Token hooks: space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
composite.variantSelector · size options · M selected · XL disabled
Size

composite.productGallery

composite layout: stacked · side Token hooks: space.*, radius.*, border.*, color.semantic.*, focus.* Forbidden: shadow.*
composite.productGallery · main image + 3 thumbnails · first active

composite.cartLineItem

composite density: sm · md Token hooks: space.*, typography.*, color.semantic.*, border.*, radius.*, focus.* Forbidden: shadow.*
composite.cartLineItem · image + info + quantity + remove
Classic Linen Tee Size: M · Colour: Stone
$38.00

composite.orderSummary

composite tone: default · alt Token hooks: space.*, typography.*, color.semantic.*, border.*, radius.*, focus.* Forbidden: shadow.level.md
composite.orderSummary · subtotal + shipping + tax + total + CTA
Order Summary
Subtotal$76.00
Shipping$5.00
Tax$7.22
Total$88.22

Patterns

pattern.cartDrawer

pattern width: sm · md Token hooks: space.*, color.semantic.*, border.*, radius.*, zIndex.*, focus.* Forbidden: shadow.level.md
pattern.cartDrawer · static layout specimen (no backdrop)

pattern.productFilters

pattern layout: sidebar · topbar Token hooks: space.*, typography.*, color.semantic.*, border.*, radius.*, focus.* Forbidden: shadow.*
pattern.productFilters · sidebar · 2 filter groups

pattern.productSortControl

pattern layout: split Token hooks: space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.productSortControl · result count + sort select
48 products

pattern.productGrid

pattern density: sm · md · lg Token hooks: space.*, layout.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.productGrid · 3-up auto-fill grid
Linen Tee
$38
Canvas Shorts
$54
Merino Sweater
$98

pattern.productDetails

pattern layout: split · stacked Token hooks: space.*, layout.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.productDetails · split · gallery + info + variant + add-to-cart

Classic Linen Tee

4.6 / 5 (128)
$ 38.00
Size

pattern.relatedProducts

pattern Token hooks: space.*, layout.*, typography.*, color.semantic.* Forbidden: shadow.*
pattern.relatedProducts · horizontal scroll · 3 cards

You Might Also Like

Canvas Shorts
Merino Sweater
Linen Overshirt

pattern.checkoutStepper

pattern style: text · pills states: hover · focus · disabled Token hooks: space.*, typography.*, color.semantic.*, border.*, radius.*, focus.* Forbidden: shadow.*
pattern.checkoutStepper · 5 steps · current: Payment (step 4)

pattern.checkoutAddressForm

pattern mode: shipping · billing · both layout: stacked · twoColumn Token hooks: space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.checkoutAddressForm · twoColumn · shipping mode

pattern.shippingMethodSelector

pattern layout: stacked Token hooks: space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.shippingMethodSelector · 3 options · Standard selected
Choose a shipping method

pattern.paymentMethodSelector

pattern layout: stacked Token hooks: space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.paymentMethodSelector · Card selected

pattern.paymentForm

pattern layout: stacked · twoColumn Token hooks: space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.paymentForm · card number + expiry + CVV · display-only specimen
This is a display-only specimen. No card data is captured.

pattern.checkoutReview

pattern Token hooks: space.*, typography.*, color.semantic.*, border.*, radius.*, focus.* Forbidden: shadow.*
pattern.checkoutReview · address + shipping + payment + place order
Shipping address
123 Main Street, Portland OR 97201
Shipping method
Standard Shipping · 5–7 days · $5.00
Payment
Card ending ···· 4242

pattern.checkoutConfirmation

pattern emphasis: low · medium Token hooks: space.*, typography.*, color.semantic.*, border.*, radius.*, focus.* Forbidden: shadow.*
pattern.checkoutConfirmation · order confirmed state

Order Confirmed!

Order number: #ORD-20260308-0042

View Order Continue Shopping

Auth Patterns

pattern.registrationForm

pattern layout: stacked · twoColumn Token hooks: space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.registrationForm · create account form

Create an account

Start shopping in seconds.

Must be at least 8 characters.

Already have an account? Sign in

pattern.passwordRecoveryRequestForm

pattern layout: stacked Token hooks: space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.passwordRecoveryRequestForm · forgot password

Forgot your password?

Enter your email and we'll send a reset link.

Back to sign in

pattern.passwordResetForm

pattern layout: stacked Token hooks: space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.passwordResetForm · new password entry

Set a new password

Choose a secure password for your account.

Must be at least 8 characters.

APO-036 Atom Foundations

Tier 1 and Tier 2 interaction atoms added to the canonical component registry and styled against the existing token vocabulary.

primitive.icon + primitive.logo

icon size sm · md · lg + logo orientation/mode

primitive.video

inline · full-bleed · background-loop
Captions slot present via track[kind=captions].

Background Loop

Layer-2 decorative playback while preserving the required captions sub-slot.

control.switch + control.combobox + picker family

switch sm/md · searchable combobox · date/time/datetime picker shells

overlay + navigation atoms

dialog · drawer · dropdown-menu

composite.carousel

slide · fade · peek

Slide Variant

Default translate-based carousel track.

Autoplay-ready

Optional Layer-2 autoplay is wired through the runtime.

Token-aligned controls

Prev/next + pagination share the same vocabulary as the rest of MyronCMS.

Fade Variant

One slide remains visually active at a time.

Crossfade

Useful for hero or testimonial transitions.

Peek 1

Peek 2

Peek 3