Sermona

Forms, buttons & CTAs ​

Interactive surfaces stay dark-first: charcoal fields, hairline borders, and gold only for primary actions and focus. One primary button per view; everything else is secondary, ghost, or plain links.

Buttons ​

ClassUse
.sermona-btn sermona-btn--primaryMain action (submit, pay, continue).
.sermona-btn sermona-btn--secondaryAlternate solid control (e.g. Save draft) — not competing with primary on the same row.
.sermona-btn sermona-btn--ghostLow-emphasis actions, nav-style actions in bands.

Use <a> or <button> with the same classes. min-height: 44px keeps tap targets comfortable. :focus-visible uses the accent outline; disabled and aria-disabled="true" dim and block clicks.

Live row:

Copy for labels: see Voice & copy → Buttons & links.

Form stack ​

.sermona-form — vertical stack with a readable max width (about 32rem).

.sermona-field wraps a .sermona-label, control, and optional .sermona-field__hint or .sermona-field__error. Add .sermona-field--invalid when server or client validation fails.

Controls: .sermona-input, .sermona-textarea, .sermona-select. Pair every label with for / id.

We’ll only use this for the trial workspace.

Pick a range from the list so we can route you.

File inputs ​

Use .sermona-input on input type="file". The ::file-selector-button block is styled like a secondary control; the filename line stays meta-sized.

Keep accept, multiple, and max-size rules in validation — don’t rely on the picker alone.

Up to 10 MB for this demo.

Checkboxes & radios ​

.sermona-choice on a <label> that wraps the input and a .sermona-choice__text block. Use .sermona-choice__label + optional .sermona-choice__hint.

Native controls use accent-color (gold). For groups of radios, share a name and paste a fieldset / legend in production for screen readers.

CTA strip ​

.sermona-cta is a flex band: copy on the left (first child), .sermona-cta__actions on the right with buttons. On narrow screens it stacks and buttons go full width (see Services).

Reserve primary for the one decisive action. Secondary story belongs in meta under the heading.

Brief the studio

Attach a deck or Notion link — we reply within two business days.

Start a briefWriting guide

Accessibility checklist ​

  1. Visible focus — Don’t remove outlines; Sermona uses accent focus-visible on buttons and fields.
  2. Names — Every input has an associated label (visible or aria-label when space is tight).
  3. Errors — Tie messages with aria-describedby; set aria-invalid when showing .sermona-field__error.
  4. Files — Announce constraints (“PDF, max 10 MB”) in hint text or errors, not only in accept.
  5. Primary overload — If two actions feel equal, reconsider copy or use ghost + link instead of two primaries.

See also ​