# Web site starter The complete Astro scaffold for a project's one-page brand site (`.dunn.dev`). Lift the whole directory, replace the placeholders, leave the chrome alone. The template is the canonical chrome: tokens-only consumption, light-pinned ``, hero plus sections plus diagram frame plus 2x2 pillar grid plus callout plus collaborate section, deployable as a Cloudflare Worker with Static Assets via the `cloudflare-worker` catalog component. Its class names (`.hero`, `.section-title`, `.tile-grid`, `.diagram`, `.callout`, the CTA pair) are the canonical names every consumer site uses. The palette, type and diagram conventions they render are on the design pages at [reference.dunn.dev/design/](https://reference.dunn.dev/design/). ## Layout primitives The chrome ships a small, deliberate set. Pick by **intent**, not by visual; if two layouts feel "the same but different," they probably collapse to one of these: | Class | Intent | Example use | |--- |--- |--- | | `.hero` | Single high-impact top of page: fluid title, lede, CTA pair. | The first thing a visitor reads. | | `.tile-grid` | 2-up grid of comparable facets. Each tile is one of N parallel views of the same thing, answering "what are the four sides of this." | bairn's FLOW/DISCIPLINE pillars, tutti's evidence tiles. | | `.tile.gallery-tile` | Variant of `.tile` with the image bleeding to the tile edges and the caption inset. Use inside a `.tile-grid` for visual-variant showcases (themes, formats, before/after). One tile per variant, never composite. | patinate's four-theme gallery. | | `.diagram` | Paper-card frame around an inline SVG with an optional caption underneath. | Sequence diagrams, flow diagrams. | | `.diagram.figure-pair` | Two diagrams in one frame (`.figure-wide` plus `.figure-narrow`), swapped at 720px. Use when a detail-rich SVG cannot shrink to mobile without going illegible. | patinate's pipeline diagram. | | `.callout` | Pulled quote with a left rule and a cite line. Use sparingly; most quotes belong inside `.section-prose`. | Long-form essay reference. | **The single tile primitive.** `.tile` is the unit class used inside `.tile-grid`. Its slots are `.tile-eyebrow` (mono caps), `.tile-headline` (large accent), one or more `.tile-prose` blocks, and `.tile-meta` (mono caps, end-of-tile spec terms). The headline auto-bumps a size larger inside `.tile-grid` because the 2-up layout has more room. **Don't introduce new layout classes.** If a page seems to want `.failure-grid`, `.option-list`, `.feature-cards`, or any other ad-hoc collection class, it is almost certainly one of the two tile layouts above with a different content shape inside the tiles. Adding more classes proliferates near-duplicates. **Content widths are not a layout primitive.** Every block flows to the page column width (currently `1100px`). Prose and diagrams render at identical widths because the page is the single constraint; there is no `.section-prose` max-width. Don't add one back. If a single asset legitimately needs more room, mark it with a modifier and override deliberately. ## Diagram pairs The chrome's default for a one-up diagram is `overflow-x: auto` with `min-width: 640px`. That is the wrong call for a detail-rich figure: it renders the SVG at a usable size at the cost of forcing horizontal scroll on every mobile visitor. Ship two SVGs instead and let the chrome swap them at the 720px breakpoint: - `foo.svg`, horizontal, ~1100px viewBox, the desktop view. - `foo-narrow.svg`, vertical stack, ~400x900 viewBox, mobile. Wrap both in `.diagram.figure-pair`. When a diagram is detail-rich enough to earn a pair is a density question, answered on [/design/diagrams/](https://reference.dunn.dev/design/diagrams/). When designing the narrow variant, count each `` element against the rect width that contains it. SVG text does not wrap; overflow looks unprofessional and hides content. The character budgets are the same ones the brand artifacts use, at [/design/repository/](https://reference.dunn.dev/design/repository/). ## Page eyebrow: category, not version The eyebrow above the hero title describes the **kind** of thing the visitor is looking at, category and form, not the project's release version. Good eyebrows: - `audio renderer probe` (tutti) - `photo archive · cli` (bairn) - `strava → poster` (patinate) Bad eyebrows that look smart but rot fast: - `vol 0.1` / `vX.Y · prerelease` (becomes false at the next bump, says nothing about what the project does) - `early access` / `experimental` (status markers belong in a badge row, not the brand band) If the project genuinely has stages (alpha, beta, stable) that the reader needs to know about, surface them as a badge in the header CTA strip, not in the eyebrow. ## Recommended section arc Tool-project sites in the estate follow a deliberate arc: 1. **Hero.** Title, lede, CTA pair. 2. **What this is.** Two paragraphs of plain-language framing. 3. **How it runs, or a picture of how it works.** The load-bearing diagram: state-flow, sequence, or vendor-survives pattern. Pair-shaped (`.figure-pair`) if detail-rich. 4. **How it's shaped.** The four pillars (FLOW/DISCIPLINE), one `.tile-grid` of comparable facets. 5. **A live or static demo.** The actual output, if the project has visual artifacts. Use `.tile.gallery-tile` per variant. 6. **Install.** A `.tile-grid` of methods (binary, container, source), one command per tile, equal-height. 7. **Who this is for.** Name the audience precisely, and the "not for whom" in the same section. 8. **Collaborate.** See below. The order is not sacred but it scaffolds the page from "what" to "how" to "join". Drop sections that don't apply: a library without visual artifacts skips the gallery, a one-install tool collapses the install list into prose. ## Collaborate section Every estate project's site ends with a **Collaborate** section. Two parts: 1. **First tile, always "reach out".** A low-stakes CTA with the maintainer's email and the project's issues tracker. The prose tells the reader to send a two-sentence "I want to add X because Y" before writing code, so an MR that conflicts with the maintainer's plan doesn't waste anyone's time. 2. **Contribute tiles.** Two to four `.tile-grid` entries naming concrete first-contribution surfaces with the file path or directory the change lands in. Be specific: "a fifth theme (themes/*.json)" beats "improvements"; "a non-Strava source adapter (src/sources/*)" beats "more integrations". This template ships the empty shape; populate it per project. The Collaborate section is the difference between a README that ends and an inviting one: a visitor with five minutes and a small idea has an obvious next step.