# Fluid Theme

> A semantic CSS core built for AI models to compose, plus free child themes. Link the core, optionally one child theme, write plain HTML with a few component class names, and restyle by setting about 20 knobs (custom properties) on :root. Light and dark follow the OS. No utility classes, no build step. Core and themes: MIT. Version 2.2.6.

Key facts for writing Fluid pages:

- Install: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluid-theme/core@2/dist/fluid.min.css">` and `https://cdn.jsdelivr.net/npm/@fluid-theme/core@2/dist/fluid-fonts.min.css`, or `npm install @fluid-theme/core`. Then, optionally, one child theme's fonts file and stylesheet, after the core.
- Knobs on `:root` in a site stylesheet: `--accent`, `--accent-ink`, `--on-accent`, `--neutral-tint`, `--font-heading`, `--font-body`, `--radius-card`, `--radius-control`, `--radius-pill`, `--border-width`, `--shadow-style`, `--space-section`, `--container-content`, `--motion-base`. `<html data-theme="light|dark">` overrides the OS. Full list: https://thefluidtheme.com/docs/knobs/
- Write semantic HTML first. Components are class names with BEM-style parts (`.card`, `.card__title`) and variants as data attributes (`data-variant="outline"`, `data-size="sm"`), never stacks of utility classes.
- Style with the design tokens (`var(--space-5)`, `var(--color-text)`, `var(--accent)`) and logical properties (`margin-block`, `padding-inline`).
- Cascade layers, in order: reset, tokens, base, layouts, components, themes, utilities. A child theme lives in the themes layer; site styles outside the layers win over all of them.
- Layout primitives: `.container`, `.stack`, `.grid` (with `--grid-min`), `.cluster`, `.section` (with `data-bg`).
- Accessibility first: visible focus, keyboard access, `prefers-reduced-motion`, WCAG 2.1 AA, every `<img>` with `width`, `height` and real `alt`.
- A child theme is style only (tokens, type, colour, spacing, section layouts); a starter pack (coming soon) adds niche demo content and pages on one theme.

## Child themes (4, newest first)

- [Nocturne](https://thefluidtheme.com/themes/nocturne/) (added 2026-11-01): 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. For: Launch pages, product teasers, premium one-pagers. CSS: https://cdn.jsdelivr.net/npm/@fluid-theme/core@2/themes/nocturne.css
- [Gallery](https://thefluidtheme.com/themes/gallery/) (added 2026-10-30): A Didone display over a quiet grotesk: the images carry the colour, the accent is kept for actions. For: Galleries, print shops, photographers, museums. CSS: https://cdn.jsdelivr.net/npm/@fluid-theme/core@2/themes/gallery.css, fonts: https://cdn.jsdelivr.net/npm/@fluid-theme/core@2/themes/fonts/bodoni.css
- [Swiss](https://thefluidtheme.com/themes/swiss/) (added 2026-10-30): One grotesk family, a heavy display over a light lede, an off-centre column with a rail for labels. For: Agencies, studios, product and tech companies. CSS: https://cdn.jsdelivr.net/npm/@fluid-theme/core@2/themes/swiss.css, fonts: https://cdn.jsdelivr.net/npm/@fluid-theme/core@2/themes/fonts/archivo.css
- [Base](https://thefluidtheme.com/themes/base/) (added 2026-10-30): The core's own look: a strong, timeless typographic base in Newsreader and Schibsted Grotesk. No child stylesheet needed. For: Any site: the starting point every child theme builds on. Core only.

## Pages

- [Themes gallery](https://thefluidtheme.com/themes/): live previews
- [Compare](https://thefluidtheme.com/compare/): two or three themes side by side
- [New](https://thefluidtheme.com/new/): themes by date added ([Atom](https://thefluidtheme.com/feed.xml))
- [Catalog as JSON](https://thefluidtheme.com/catalog.json)
- [Agent instructions](https://thefluidtheme.com/AGENTS.md)

## Docs

- [Install the core](https://thefluidtheme.com/docs/installation/)
- [The knobs](https://thefluidtheme.com/docs/knobs/)
- [Layout](https://thefluidtheme.com/docs/layout/)
- [Defaults](https://thefluidtheme.com/docs/defaults/)
- [Images](https://thefluidtheme.com/docs/images/)
- [Upgrading from 1.x](https://thefluidtheme.com/docs/from-1x/)
- [Coming from Tailwind](https://thefluidtheme.com/docs/from-tailwind/)
- [Coming from Bootstrap](https://thefluidtheme.com/docs/from-bootstrap/)