Added November 1, 2026 New
Nocturne
Dark-first and cinematic: deep ink-blue, one soft glow behind a silver gradient headline, translucent panels and brushed-silver buttons, with a grey-blue paper light mode.
Free and MIT · v2.2.6 on npm
Plain HTML in.
A finished site out.
Fluid Theme is a semantic CSS core built for AI models to compose: write ordinary HTML with a few component class names, pick a child theme, and the page is done. No utility soup, no build step, light and dark from the start.
How it fits together
Three layers
1 · Core
@fluid-theme/coreThe HTML and CSS components: nav, hero, sections, cards, forms, tables, people, places, a table of contents. One stylesheet, about 20 knobs on
:root, accessible by default.2 · Child themes
Style and layout presets
Tokens, type, colour, spacing and section layouts in one small file over the core. No demo content: swap the theme and the same HTML becomes a gallery, a newsroom or a gym.
3 · Starter packs
A niche site, ready to edit
Demo content and a page set for one niche on top of one child theme: a yoga studio, a contractor, a restaurant. HTML first, then WordPress and EmDash, then React.
Built for AI
Markup a model can get right the first time
Models write good semantic HTML. They are bad at keeping forty utility classes consistent across a site. Fluid puts the design in the stylesheet, so the markup stays short, readable and hard to get wrong.
Semantic first
Real elements, a few component names (.card, .card__title) and variants as attributes (data-variant="outline"). Nothing to memorise.
Instructions included
AGENTS.md and llms.txt tell an agent how to write Fluid pages, and list every theme. catalog.json is the same list as data.
Knobs, not variations
Restyle a whole site by setting about 20 custom properties. A child theme is just those knobs, so an agent can make one too.
New in the library