CSS primitives

Import after tokens:

@import "@sermona/tokens/css";
@import "@sermona/tokens/components.css";

Fonts & icons: override --sermona-font-family-sans, --sermona-font-family-display, --sermona-font-family-mono, and optionally --sermona-icon-font-* on :root after import — see Tokens and Iconography.

Editorial layout (dark)

Two different patterns on this page:

1. Shadow stack (below): .sermona-editorial-stack intentionally puts two different words in the same spot — the back layer uses --sermona-color-text-subtle (muted) and a small offset; the front layer is the solid primary title. It is supposed to read as a deliberate echo, not a rendering bug.
2. Full band further down: a .sermona-display-hero with .sermona-display-hero__line spans (recommended in VitePress) — one headline, two lines, same color.

Dual-line display: layer .sermona-editorial-stack__layer--back then --front (order in DOM does not change paint order; z-index does). Wrap repeats in .sermona-editorial-grid + .sermona-editorial-cell (bordered tile, centered body + .sermona-link).

PoeticPermená

Mixed media editorial body copy. Links use accent gold.

PoeticCommerce

Service-led landings and pricing rails share the same token spine as long reads.

LightHeld still

Campaign heroes and full-bleed photography stay legible with scrims — never boxed-in placeholders.

Full editorial band

Single .sermona-display-hero (here a <div> with __line spans so prose styles don’t collapse the stack) — unlike the shadow stack above: different words/colors vs one title, two lines.

Stack .sermona-display-hero, meta, .sermona-card, and .sermona-quote in one bordered section when you need a long-form preview (kitchen sink).

SermonáPoetic

Mixed media editorial body copy. Links use accent gold.

---

Issue 1 · Editorial by You

Featured

Slingshot Engage

Subtitle or deck for the featured module.

“Pull quote set in medium weight with accent color.”

—Attribution

Icon-led lists

• .sermona-icon-list — bullet-style rows with .sermona-icon-list__marker + .sermona-icon-list__body (optional __title, __body--muted). Modifiers: --compact, --checks (gold marker treatment).
• .sermona-feature-list — larger tiles per row for marketing features.

See live demos on Iconography.

Forms, buttons & CTAs

• .sermona-form, .sermona-field, .sermona-label (optional .sermona-label--optional) — vertical form stack.
• .sermona-input, .sermona-textarea, .sermona-select — text-like controls; type="file" styles the file-selector button.
• .sermona-field__hint, .sermona-field__error, .sermona-field--invalid — supporting and error text.
• .sermona-choice — checkbox / radio row with .sermona-choice__text, __label, __hint.
• .sermona-btn--primary, --secondary, --ghost — actions; .sermona-form__actions for button rows (--end to align right).
• .sermona-cta + .sermona-cta__actions — headline band with primary + secondary actions.

Full guidance: Forms, buttons & CTAs.

Complex & multi-step forms

• .sermona-form--wide, --full — wider or uncapped form rail.
• .sermona-fieldset, .sermona-fieldset__legend, __stack — semantic groups.
• .sermona-form-section — visual section bands with __title, __lede, __stack.
• .sermona-field-row, --duo — multi-column short fields.
• .sermona-field__meta-row, __counter — hint + character count row.
• .sermona-form-summary — submit error summary (__title, __list).
• .sermona-form-stepper + __item (--current, --done) — wizard chrome.
• .sermona-repeatable, __row, __fields, __remove, __toolbar.
• .sermona-segmented, __btn — mutually exclusive options.
• .sermona-choice-grid, label.sermona-choice-card + sermona-sr-only radio.

Full guidance: Complex forms.

Cards & horizontal swipers

• .sermona-card — modifiers --flat, --dense, --stack, --interactive; .sermona-card__footer for pinned footers with --stack.
• .sermona-card-grid — responsive editorial card grid.
• .sermona-swiper, .sermona-swiper__track, .sermona-swiper__slide — scroll-snap horizontal deck; --bleed, --fade, --peek, --wide.
• .sermona-service-card--interactive, a.sermona-service-card — linked / hover service tiles.

Full guidance: Cards & horizontal swipers.

Ecommerce

• .sermona-product-grid, .sermona-product-card (__media, __body, __footer, __badge) — PLP tiles; a.sermona-product-card, --interactive.
• .sermona-product-badge — --sale (gold fill + on-accent text), --neutral.
• .sermona-price — __current, __was, __note; modifier --accent for promo emphasis.
• .sermona-variant-row, .sermona-variant-pill — PDP options; aria-pressed.
• .sermona-promo-banner — shipping / sale strip.
• .sermona-trust-strip — payments / policy highlights.
• .sermona-cart-line — line item; .sermona-order-summary — checkout totals.

Full guidance: Ecommerce patterns.

Modals & lightbox

• .sermona-modal, .sermona-modal__backdrop, .sermona-modal__panel, .sermona-modal__header, .sermona-modal__title, .sermona-modal__body, .sermona-modal__footer. Modifiers --wide, --narrow, --blur, --demo (docs preview only).
• .sermona-lightbox, .sermona-lightbox__backdrop, .sermona-lightbox__content, .sermona-lightbox__caption, .sermona-lightbox__close, --demo.
• .sermona-close-btn — icon-sized dismiss control (modal + lightbox; lightbox gets inverted hover).

Full guidance: Modals & lightbox.

Blog & admin

• .sermona-post, .sermona-blog-card, .sermona-tag-row, .sermona-author, .sermona-post-nav — article rails, index cards, tags, bios, prev/next.

  Full guidance: Blog patterns.

• .sermona-admin-shell (+ --demo, --force-sidebar), .sermona-admin-sidebar, .sermona-admin-nav__link (+ --mark, active flanking dots), .sermona-admin-topbar, .sermona-admin-dash — app chrome; .sermona-metric-tile, .sermona-trend, .sermona-status-badge, .sermona-chart-slot, .sermona-instrument-panel, .sermona-log-list (+ --tabular, __msg, tokens / code) — metrics, status, chart placeholder, structured logs.

  Full guidance: Admin & instrumentation.

Tables & data

• .sermona-table-wrap — horizontal scroll container; wrap .sermona-table.
• Modifiers: .sermona-table--zebra, cell helpers .sermona-table__num, .sermona-table__strong.
• .sermona-kv — definition list for key–value metadata.
• .sermona-data-pair — label + value stack inside cards or cells.

Markdown tables in VitePress are themed via @sermona/vitepress-theme. Full guidance: Data & tables.

Patterns (sections, icons, services)

• Using Sermona — handbook for teams (roles, vocabulary, adoption, quality bar).
• Section compositions — full-page image hero, hero split, two-column + quote, footer strip.
• Iconography — principles, icon lists (default / compact / checks), chips, tiles, logo row.
• Voice & copy — tone, buttons, errors, writing beside icons.
• Services & pricing — service grid, CTA strip, metrics.
• Data & tables — tabular data, Markdown vs HTML, a11y notes.
• Forms, buttons & CTAs — inputs, files, choices, button variants.
• Complex forms — sections, steppers, repeatables, validation summary.
• Cards & horizontal swipers — card grids, linked cards, snap rails.
• Ecommerce — product grid, pricing, variants, cart, promos, trust.
• Modals & lightbox — dialogs, image overlay, close control.
• Blog patterns — post layout, archive cards, tags, author, adjacent posts.
• Admin & instrumentation — dashboard shell, metrics, logs, chart slot.

Next steps for a “full” system

• React/Vue wrappers — thin components mapping class names to props.
• Markdown / MDX — map :::quote callouts to .sermona-quote.
• Figma parity — publish Library in Figma + Code Connect for your code components.