---
name: site-with-cms
description: Plans a website whose content lives in collections people can edit, with pages that read from them and a design system they share. Use for blogs, shops, portfolios, directories and any site with repeating content.
---
# Site with a CMS

## Read first
Brief.md for the site, its pages and its voice; Content.md for the collections and their fields; the hero image and reference wired in.

## Content
- Each collection from Content.md becomes data with the fields it lists, and at least six real-sounding entries in the brief's voice.
- Every entry has a slug, a title and a short summary; images get descriptive alt text.
- Lists show the newest or featured entries first; each entry gets its own page from one detail template.

## Pages
- Home: a hero that says what the site is, the featured entries, and one call to action.
- A list page per collection, with filters if a field has a few values (a category, a tag).
- A detail page per entry, from the collection's fields.
- One shared design system: the type scale, colours, spacing and components every page uses.

## Look
- Follow the wired reference's layout and mood without copying its brand; the brief's palette, with one accent colour.
- Two typefaces at most and one type scale (e.g. 64 / 40 / 24 / 16) shared by every page; spacing on an 8 px grid.
- The hero image large in the hero, never boxed small; collection pictures at one shape in a grid. Every wired picture is used where its name says: an entry's photo (matched by name) in its data, a section's picture in that section. An entry with no picture yet shows a plain block in the palette (its initial or a small icon), never a broken image or its alt text.
- One primary button per screen in the accent colour; any second action is quiet (outlined or a text link).

## Avoid
Content typed straight into pages that should come from a collection, lorem ipsum, placeholder contact details (example.com), and pages that each invent their own style.