Sermona

Design system

Dark editorial UI, documented and shipped as CSS

Sermona is a token contract, a component layer, and a team handbook in one — so designers and engineers stay aligned without a proprietary framework.

Start with the handbookBrowse tokensCSS components

At a glance

One system for voice, layout, and the whole surface.

  • Token-first — dark-first color, type, and motion names your whole stack can import.

  • Figma-native — visual language lives in the library; patterns map cleanly to markup.

  • Ship anywhere — VitePress, Astro, Next, or plain HTML; no runtime lock-in.

  • From blog to admin — editorial patterns through dashboards and instrumentation chrome.

Adopt in an afternoon; deepen over a sprint — quality bar included.

What you get

Primitives That Survive Handoff

Replace one-off styles with named roles: sections, forms, data displays, ecommerce tiles, modals, and opinionated content patterns — all spelling the same brand.

Foundations

Readable dark surfaces

Page, card, and border tokens tuned for long reading sessions and dense tools — not a generic gray theme.

Open foundations →

Patterns

Layouts you can paste

Hero splits, editorial grids, icon-led lists, swipers, tables, and CTAs — copy HTML, wire your CMS later.

Section recipes →

Voice

Words beside the chrome

Labels, errors, buttons, and lists share one tone — so product and marketing do not drift apart.

Voice & copy →

Workflow

Design In Figma, Implement In Css

Publish frames from the Sermona file, map components to classes, and let tokens keep accessibility and contrast consistent. The docs site you are reading is built the same way consumers integrate: two imports, then markup.

Install

npm install @sermona/tokens

Import

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

Teams use Sermona to …

  • Ship a dark editorial brand site or handbook without re-theming from scratch.

  • Unify marketing pages, product surfaces, and internal ops dashboards on one scale.

  • Onboard writers and engineers with the same vocabulary — Using Sermona is the spine.

Get started

Ready when your repo is

Open the Figma library, copy a section recipe, or wire tokens into your stack — depth first, ceremony never.

Figma file (opens in new tab)Blog patternsAdmin & instrumentation