Skip to content

Capsomer

capsomer/ˈkæp.sə.mər/KAP-suh-mer

noun

  1. One of the protein subunits that together form the capsid of a virus.
  2. software. An open-source design system of plain-CSS components, design tokens and page patterns for building websites and web apps.

Etymology From French capsomère, from capside, “capsid”, + -o- + -mère, “part”, from Greek meros, “part”.

A design system for any site or app#

Capsomer is an open-source design system for websites and web apps. It is plain CSS built on design tokens, so it works with any framework or none, and most components also come with an optional script for their behavior and a React component. It covers what most products need, from buttons, forms, dialogs and data tables to an app shell, editors, charts and marketing blocks, in light and dark themes. It is MIT licensed, and its documentation, with live examples of every component, is at capsomer.dustinedwards.info.

What it gives you#

  • Design tokens cover color, type, spacing, radius, shadow, motion and density, as CSS custom properties and as JSON. Color comes in ten ready families, each a 12-step OKLCH scale for light and dark, and the palette module builds a matching family from your own brand color.
  • Every rule sits in Capsomer’s own cascade layers, so a site’s own CSS wins without specificity fights. It uses no Tailwind or other CSS framework.
  • Each component is its own import: its CSS and, where it needs them, its script and its React component, so a page loads only what it uses.
  • Axe scans each component’s states against WCAG 2.2 A and AA in light and dark, and the build refuses any color pair below WCAG contrast. A site can run the same scan on its own pages with the testing helper.
  • Its scripts hand markup to the page only through one Trusted Types policy, so they keep working on a site that enforces Trusted Types.

How to use it#

Capsomer installs from a release tag on GitHub; it is not on the npm registry. Pin the newest tag from its releases, import the tokens once, then the components a page uses:

// npm install github:DrDustinEdwards/capsomer#vX.Y.Z
import "capsomer/tokens.css";
import "capsomer/base.css";
import "capsomer/button.css";
import { Button } from "capsomer/react/button"; // optional

Without React, the HTML is enough: <button class="cap-btn" data-variant="primary">Save</button>. Capsomer is still before version 1.0, so read the changelog before moving to a newer tag.

Where it runs#

Capsomer began as the shared parts of Dustin Edwards’s own sites and still runs them, from this site to Foxing and TXASM, each with its own brand color. Every page there is a test of the same components you install.

Why the name#

A capsid is built from many identical capsomers repeated across its surface. A site built with Capsomer is made the same way, from the same small parts repeated across every page.

On this site#

The colophon describes how this site uses Capsomer.