Sermona

Foundations ​

Sermona is a dark-first editorial surface: charcoal canvas, white primary type, gold for emphasis and interactive affordances. Everything else supports readability and rhythm.

Color roles ​

RoleVariableUse
Canvas--sermona-color-bg-pagePage background
Elevated--sermona-color-bg-elevated / bg-cardCards, chrome
Primary text--sermona-color-text-primaryBody, headings
Secondary text--sermona-color-text-mutedSupporting lines, captions
Accent--sermona-color-accent-primaryLinks, kickers, key quotes, focus
Text on gold fills--sermona-color-accent-on-accentRequired for type on solid gold (buttons, hero CTAs) — never white on #ffd600
Borders--sermona-color-border-subtle, hairline, metaSeparation without noise

Reserve gold for meaning — navigation, links, primary CTAs, and moments you want to remember. If everything is accented, nothing is.

Typography ​

The scale is built around Scto Grotesk A (license separately). Utilities include:

  • Display — .sermona-display-light, .sermona-display-hero; they clamp on small screens.
  • Section titles — .sermona-h2, .sermona-h3
  • Body — .sermona-body
  • Meta / labels — .sermona-meta, .sermona-kicker (uppercase, tracked, gold)

Pair light + bold display for contrast, or one weight for clarity — avoid three weights in one block without intent.

Space & layout ​

Spacing tokens (--sermona-space-*) mirror editorial gutters. Sections use .sermona-section (--tight, --loose) for vertical rhythm.

  • Content rail — .sermona-layout (measure for long reads)
  • Wide — .sermona-layout--wide for two-column and grids
  • Full — .sermona-layout--full for composed bands

Motion ​

Use --sermona-motion-duration-* and --sermona-motion-easing-*. Prefer short transitions on color and border; emphasis easing for large controls (e.g. play). Avoid looping motion behind text.

Icons ​

Icons are SVG, not a font. Sizes and tiles are tokenized. See Iconography and Voice & copy.

Next ​