# AGENTS.md: building pages with Fluid Theme

Generated 2026-11-02 from the theme catalog (v2.2.6). Machine-readable: https://thefluidtheme.com/catalog.json · Summary: https://thefluidtheme.com/llms.txt

## What to load

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluid-theme/core@2/dist/fluid.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluid-theme/core@2/dist/fluid-fonts.min.css">
<!-- optional: one child theme, its fonts first -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluid-theme/core@2/themes/fonts/archivo.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluid-theme/core@2/themes/swiss.css">
```

Optional modules: `dist/fluid-nav.min.css`, `dist/fluid-toc.min.css`, `dist/fluid-people.min.css`, `dist/fluid-places.min.css`. Optional scripts: `assets/js/fit-text.js`, `toc.js`, `lightbox.js`, `compare.js`; pages work without them.

## How to write the HTML

1. Semantic elements first: `<nav>`, `<main>`, `<section>`, `<article>`, `<footer>`, real headings in order.
2. Components are class names with BEM parts: `.nav`, `.nav__brand`, `.hero`, `.hero__headline`, `.section`, `.section__head`, `.card`, `.card__title`, `.button`, `.badge`, `.site-footer`.
3. Variants are data attributes: `data-variant="outline"`, `data-size="sm"`, `data-bg="tinted|inverse|accent"` on a section.
4. Layout: `.container`, `.stack`, `.cluster`, `.grid` with `style="--grid-min: 16rem"`.
5. Never add utility classes or inline colours. To change the look, set knobs on `:root` in one site stylesheet, or pick a child theme.
6. Every image has `width`, `height` and real `alt`. Keep focus visible; don't remove outlines.

A full example of the markup is any demo page: https://thefluidtheme.com/demo/business.html (view source).

## Child themes

Style only (tokens, type, colour, spacing, section layouts). No content. Pick the one closest to the brief, then override knobs.

- [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.

## Making a new child theme

One file: `@layer themes { :root { --font-heading: …; --accent: …; --type-ratio: …; --space-section: …; } }` plus any small component details, and self-hosted OFL fonts if needed. Every child theme made for a project is upstreamed to the library (themes/<slug>.css plus themes/<slug>.json) and appears at https://thefluidtheme.com/new/ on the next deploy.