Theming without a build step
Airframe ships one stylesheet. Cascade layers, custom properties and a handful of class names are the whole contract. This article is a real layout — chips, byline, prose, quote and a code sample — written about the product, not a fictional company.
Most design systems hide the tokens behind a compiler. Change a colour, wait for purge,
hope the class still exists. Airframe puts the tokens in CSS so a theme is an override,
not a rebuild. --af-color-primary is a custom property; every pattern follows.
If the token is not in CSS, it is not in the product.
The snippet below is the kind of override you paste after the Airframe stylesheet. It is
here to show pre and af-code-block sitting in the same measure as
the essay.
:root {
--af-color-primary: #0876dd;
--af-radius: 0.5rem;
}What stays the same
Class names do not change when you re-theme. af-btn is still the button.
Layers keep your overrides from fighting utilities. Dark mode is
data-theme="dark" on the document, not a second stylesheet.
If you are pasting this page into a blog, keep the heading outline and swap the essay for your own. The layout is the example.