Sermona

Elevating ​

Sermona is strong at the center: tokens, a large CSS primitive layer, and a handbook you can ship. “Elevating” means tightening adoption, parity with design tools, and safety nets as teams depend on it.

Levels (what “good” looks like) ​

StageYou haveNext move
1 · Consume@import tokens + components; pages match the handbookPin versions; document which primitives your app uses
2 · PublishConsumers install from npm (not only file:)Follow RELEASE.md — semver, tags
3 · AlignFigma variables and hero components map to tokensCode Connect for high-traffic surfaces (Button, Card, forms)
4 · GuardCI fails on broken token builds; optional visual or a11y checksnpm test in this repo; add your app’s smoke tests
5 · ProductFramework components wrap class contracts (React/Vue)Thin shims; don’t fork token values in JS

You do not need every row before shipping product — but stage 2 + 4 removes most “it worked on my laptop” risk.

This repo today ​

  • Automated checks: npm test validates tokens.json shape and key lines in generated CSS (see tests/).
  • Handbook: sermonacss.com tracks main when Netlify Git integration is on.
  • Figma: Sermona file — foundations and starter components; expand until Dev Mode reads the same names as CSS.

For teams adopting Sermona ​

  1. Read Using Sermona and Tokens.
  2. Import base then components CSS (order matters — see homepage install copy).
  3. Mirror density choices (--dense, data pairs, tables) from Cards & swipers and Data & tables.
  4. Open an issue in the GitHub repo for gaps that block your roadmap — elevation works best when it’s prioritized against real screens.

See also ​