# Preset Composition — Per-Preset Layout DNA

> **Superseded (2026-10-23, Pass 0).** This describes the preset/palette system, which was removed. What the theme is now, and its knobs: [`_docs/STATUS.md`](../../_docs/STATUS.md). Kept as history.

When building a page with Fluid, the active `data-preset` is a COMPLETE design decision: it drives which layouts and arrangements you compose, not just colors and fonts. This skill maps each preset to the compositions that suit it.

Full preset reference: `_docs/theming-guide.md` ("Visual Presets in Depth").

## The Two Mechanisms

**1. Runtime arrangement — `data-arrange="auto"`** (opt-in, on `.hero` and `.features`):

- `.hero` — requires flat markup: `hero__headline`, `hero__subheadline`, `hero__actions`, optional `hero__media` as **direct children** (no `hero__content` wrapper). The preset then remaps the arrangement via `grid-template-areas`. `data-arrange` wins over `data-layout`.
- `.features` — the preset remaps the grid's shape and density.

| Preset | Hero signature | Features signature |
|--------|----------------|--------------------|
| **still** | Swiss left rail + asymmetric void | Ruled hairline grid |
| **serene** | Editorial offset: full-width headline, copy hangs right | Single literary column |
| **rapids** | Poster split: giant headline left, caption column right | Dense 4-up |
| **tsunami** | Cinema poster: bottom-anchored massive headline, subheadline as kicker | Monumental 2-up |
| **flowing / stream / cascade** | Centered classic stack | Default responsive card grid |

**2. Composition-time choices (the important one)**: when generating page markup for a given preset, CHOOSE section variants, hero `data-layout` (`center` / `split` / `split-reverse`), grid densities, and content order that match the preset's layout DNA below. This applies to ALL sections — not just the two with `data-arrange`.

## Layout DNA

| Preset | Canvas | Section rhythm | Hero to prefer | Grid density | Alignment bias |
|--------|--------|----------------|----------------|--------------|----------------|
| **still** | Focused 768px column | 32px, tight | Left-rail split, restrained size | Compact, ruled | Flush left |
| **serene** | 42rem literary column | 144px intervals | Full-width serif headline + offset deck | Single column | Centered, unboxed |
| **stream** | 1536px wide canvas | 64px | Wide split | 3–4 col cards | Left, horizontal |
| **flowing** | 1280px | 80px | Balanced centered | 3-up | Centered |
| **cascade** | 1280px | 64px | Friendly centered | Generous cards | Centered |
| **rapids** | 1536px | 32px, dense | Poster split, oversized type | Dense 4-up | Hard left |
| **tsunami** | Full width | 96px cinematic | Full-bleed, bottom-anchored | Monumental 2-up | Left, bottom-anchored |

### still — Swiss precision

Mono grayscale default palette, system fonts, restrained display sizes, left-aligned Swiss grid, hairline rules.

- DO: compact tables and ruled grids; flush-left headlines; 2-col asymmetric splits with deliberate void
- DON'T: centered hero copy; decorative gradients; pill shapes

### serene — literary calm

Large graceful serif display, morandi default palette (dusty lavender accent), extravagant whitespace.

- DO: single-column flows; generous stacked sections; full-width serif headline with offset deck; centered unboxed feature lists
- DON'T: packed multi-column grids; dense dashboards

### stream — tech-forward

Plus Jakarta Sans, fluid deep-teal accent, professional and balanced.

- DO: wide split heroes; 3–4 col card grids; horizontal nav emphasis; dashboard patterns
- DON'T: narrow editorial columns

### flowing — the versatile default

Outfit/DM Sans, brand medium-blue accent. Balanced centered heroes, 3-up grids — the reference point when no other DNA applies.

### cascade — warm and bubbly

Nunito, bold vivid-purple accent, maximum roundness.

- DO: friendly centered layouts; generous card grids; pill buttons
- DON'T: sharp-edged dense tables

### rapids — bold poster energy

Syne/Space Grotesk at 800–900 weight, electric coral accent, oversized display type.

- DO: poster splits; dense 4-up packs; tight rhythm; hard offset shadows
- DON'T: airy whitespace; serif elegance

### tsunami — cinematic maximum

Bebas Neue massive display (hero headlines up to 6.5rem), storm-teal accent, asymmetric corners.

- DO: full-bleed bottom-anchored heroes; monumental 2-up grids; kicker-above-headline patterns
- DON'T: small centered cards; subtle anything

### Identity presets

- **editorial** — extreme-whitespace serif essay (38rem column, 8rem sections): single-column prose only
- **brutalist** — monospace ruled rawness: hard borders, raw grids, zero decoration
- **neon** — dark glowing cyberpunk: dark surfaces, glow shadows, high-tech density

## Default Palettes

Each water preset ships a default palette family + accent, so switching presets changes the color mood too:

| Preset | Family | Default accent |
|--------|--------|----------------|
| still | mono | grayscale slate |
| serene | morandi | dusty lavender |
| stream | fluid | deep teal |
| flowing | fluid | brand medium blue |
| cascade | bold | vivid purple |
| rapids | bold | electric coral |
| tsunami | tsunami | storm teal |

Explicit `data-palette` / `data-accent` always override. Do NOT add a `data-palette` unless the user asks for a specific color mood — the default family is part of the preset's design.

## Never Mix DNA

Never mix arrangement DNA across presets on one page. If the user's content fights the preset's DNA (e.g., a dense data table on serene), keep the preset's rhythm and adapt the section — or suggest a better-suited preset. Do not import another preset's arrangement to solve it.