Apollo v0.18.0
Design
Style Guide
Content
Administration
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

Token | Value | Swatch
--- | --- | ---
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
--- | --- | --- | ---
s0 | 0 | ✓ zero |
s0_5 | 4 | ~ half |
s1 | 8 | ✓ |
s1_5 | 12 | ~ half |
s2 | 16 | ✓ |
s3 | 24 | ✓ |
s4 | 32 | ✓ |
s5 | 40 | ✓ |
s6 | 48 | ✓ |
s7 | 56 | ✓ |
s8 | 64 | ✓ |
s9 | 72 | ✓ |
s10 | 80 | ✓ |
s12 | 96 | ✓ |

## size — control heights & icons base-8

Token | px | Geom | Bar
--- | --- | --- | ---
controlHeightsPx.sm | 32 | ✓ |
controlHeightsPx.md | 40 | ✓ |
controlHeightsPx.lg | 48 | ✓ |
iconPx.sm | 16 | ✓ |
iconPx.md | 20 | ~ |
iconPx.lg | 24 | ✓ |
hitTargetMinPx | 40 | ✓ |

## 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.none 0ms
duration.fast 120ms
duration.normal 180ms
easing.standard cubic-bezier(0.2, 0, 0, 1)

## focus

ringWidthPx 2px
ringOffsetPx 2px
outlineStyle solid
Focus ring preview

## zIndex

base 0
dropdown 10
overlay 20
modal 30
toast 40

# 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
radius-md
radius-lg
primitive.figure — alignment-center with figcaption
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 Disabled content
invalid (aria-invalid) Bad input value

## 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
Unchecked (sm) Checked (md) Disabled Checked + disabled
Radio — grouped · checked · disabled
Option A (checked) Option B Disabled

## composite.formField div

layout-stacked — label · control · helpText · errorText
Email address*

We'll never share your email.

Username

Username may only contain letters and numbers.

layout-inline — label · control
Full name
Role

# 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)

prop | type | values | default
--- | --- | --- | ---
`url` | string | — | —
`provider` | enum | generic · youtube · vimeo · x · instagram · tiktok · spotify · soundcloud · reddit · other | generic
`title` | string | — | —
`aspect` | enum | auto · 16:9 · 4:3 · 1:1 | auto

## 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]

prop | type | values | default
--- | --- | --- | ---
`source` | enum | posts · pages · products · custom | posts
`limit` | integer | — | 10
`order` | enum | asc · desc | desc
`orderBy` | enum | date · title · custom | date

## 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 / variant | type | values | default
--- | --- | --- | ---
`sticky` | boolean | — | false
`layout` | variant | centered · 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."

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

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

# 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.

Security panel.
Billing panel.

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

Information

Your changes have been saved automatically.

Success

Profile updated successfully.

Warning

Your session expires in 5 minutes.

Error

Unable to save changes. Please try again.

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

- Edit
- Duplicate
- Delete

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

Sign in

Email address
Password

## 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
Owner Admin Editor Viewer
Manage users
Owner Admin Editor Viewer

## 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
Email address
Role

## 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
Owner Editor Viewer

## 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
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

Type image/png
Size 248 KB
Dimensions 1920 × 1080
Uploaded Mar 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 Doe Owner

## pattern.pageAttributesPanel

pattern layout: stacked form Token hooks: space.*, border.widthPx.*, radius.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.pageAttributesPanel · slug, status, visibility, publish date
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
Meta title 37 / 60 characters
Meta description Learn how to set up and launch your first site with MyronCMS in under 10 minutes. 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 Mar 8, 2026 at 10:00
2. MK
   Mark Kim
   edited the hero section Mar 7, 2026 at 15:30

## 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 Mar 8, 2026
SY
Sara Y.
left a comment Mar 7, 2026

# 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

## 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)
Your Cart (2)
Classic Linen Tee M · Stone
$38.00

## pattern.productFilters

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

## pattern.productSortControl

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

## 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
Canvas Shorts
Merino Sweater

## 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
First name
Last name
Address
City
Postcode

## pattern.shippingMethodSelector

pattern layout: stacked Token hooks: space.*, typography.*, color.semantic.*, focus.* Forbidden: shadow.*
pattern.shippingMethodSelector · 3 options · Standard selected
Choose a shipping method
Standard Shipping 5–7 business days $5.00
Express Shipping 2–3 business days $12.00
Overnight Next business day $24.00

## 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
Card number
Expiry
CVV
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.

Email
Password

Must be at least 8 characters.

I agree to the Terms of Service

## 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.

Email

## 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.

New password

Must be at least 8 characters.

Confirm password

# 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
MyronCMS
Apollo
Myron mark only

## 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
Notifications Publishing enabled
Searchable combobox
No matching templates.
Datepicker
Layer-2 calendar shell
Timepicker
Layer-2 time list shell
Datetime Picker
Layer-2 combined date + time shell

## overlay + navigation atoms

dialog · drawer · dropdown-menu

### Default Dialog

Focus trap and Escape-to-dismiss are handled by the shared runtime.

Use this for neutral disclosures, editorial context, or lightweight detail views.

### Delete this file?

Confirmation variant for destructive actions.

### Generic Drawer

Use this side panel as the generic base for page, file, or user management sheets.

## 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