# Browne & Co — site pieces, 23 Sep 2026

The live page is up. It is a dark, centered template: Inter Light, one word in cyan, three identical columns, the hero image crushed to 14% opacity, and the story shipped at `opacity: 0` until JavaScript runs. The container was never the problem.

This file is the plan. Other teams build the pieces. Do not treat the example sheet as the implementation.

Open the sheet at `sheet.html` in this folder (also `https://designs.browneand.co/designs-in-development/site-2026-09-23/sheet.html`).

## Direction

A field record, not a startup template and not a WebGL studio.

The practice already says the right thing: a quiet layer, a figure that opens to its source, work that stays if a vendor leaves. The page should behave like that. You see the ground. You see a record laid on it. You can change the color without rebuilding the pictures.

Closest local theories, already in this repo:

- `botanical-field-guide` — the record, the specimen, the calm catalogue
- `editorial-monograph` — the serif does the talking, one accent
- `warm-minimal` — space and a light weight, but not an empty grey field
- `terracotta-craft` — clay and sage only. Leave the stickers and pills.

Leave `editorial-noir` and the live site's near-black void. That is the look we are tired of. Leave cyan `#00d4e8` and mint `#2ee8a5`.

## Pieces

Each piece is a deep dive. They meet in tokens and in one rule: nothing important starts invisible.

### 1. Color, tested live

Grey is the complaint. The system has to let a person change color while looking, not by editing a component.

Tokens, named, not raw hex in the sections:

| Token | Role |
|---|---|
| `paper` | the lit surface |
| `ink` | text |
| `ground` | the dark shape, soil, not neutral grey |
| `accent` | one structural color |
| `flare` | a second warm note, used less than the accent |

Five starting sets are on the sheet. Field, copper, river, orchard, press. They are proofs, not a locked brand. The build needs a way to swap a set and to push hue and saturation on `accent`, `ground`, and `flare` without a redeploy. A static stylesheet with one palette is not done.

Out of scope: a second neon accent, a dark-mode toggle that just inverts the current grey page.

### 2. Live texture, noise in the shapes

The surface is generated in code. Noise is the fill of a shape, not a photograph tiled behind the whole page and not a grey box.

What to generate in the page:

- paper fiber, fine, so type still reads
- soil crumb, coarser, for the ground shapes
- a contour or parcel line, sparse, like the survey still

SVG `feTurbulence` is enough to prove it and recolors when the tokens change. A canvas noise pass is the richer version of the same idea. Seed, scale, and contrast are parameters next to the color tokens.

The stills in `stills/` are references for the eye, not the system:

| File | What it is for |
|---|---|
| `paper.jpg` | the tooth of the surface |
| `soil.jpg` | the crumb |
| `field.jpg` | the one photograph of ground, used large, not at 14% |
| `survey.jpg` | how few lines a parcel mark needs |
| `tracing.jpg` | the visibility move: a sheet you can see through to the soil |

More stills, if a team wants them, go through `skills/NanoBananaPro` (`gemini-3-pro-image-preview`, key in `NANO_BANANA_API_KEY`). Do not put that key in the page. Generated photographs stay references. The skin of the site stays procedural.

Out of scope: a WebGL sphere, a grain overlay at a fixed opacity on a flat void, baking one palette into a PNG and calling it the texture.

### 3. Visibility

Two meanings, both required.

The record. A figure is on the page, and the source is reachable from it. The tracing still is the picture of that: paper over soil, the ground showing through. On the site this is a plate — a name, a line, a source — not a slogan that explains the idea.

The first paint. Headlines, the work, and the contact line are visible without waiting on an animation. The current hero sets `opacity: 0` inline. Do not do that again. Reduced motion still shows the page. The nav is on the page, not parked off-screen until scroll.

### 4. Experience

Left edge, not center. Source Serif 4 is already loaded on the live site and unused for the headline. Use it for the statement. A plain sans for the small labels.

One large ground — the field photograph or a noise shape — crossing or sitting against the type, at a size you can actually see.

The sections that exist today can stay in the story, but they cannot stay as three identical hairline columns. How we work is three short lines under the statement, or it is cut. The work is plates (Land-IP, Mind Trust), each with a texture and a source, not a tinted name and a status pill.

Motion only when it shows a relationship, for example a plate opening onto its source. Not an entrance fade on every block.

### 5. What the live page keeps

Copy can be rewritten by the team that owns voice, but the current lines are the brief until then:

- Statement: "Systems that hold"
- Line: "The quiet layer under land, field ops, and the partners who depend on them."
- Tenets: start from the ground, make it checkable, keep it yours
- Work: Land-IP, Mind Trust, and the unnamed partnership

Do not drop the contact path. Do not invent a new product.

## Not in this pass

- Parcels and ops. They were removed from the certificate on purpose.
- A new framework. The site is already Next.js, TypeScript, and Tailwind. The design system stays plain CSS for the document themes.
- Rebuilding the document-theme gallery. These notes attach to the theories; they do not replace them.

## Reading order for a team

1. This plan.
2. `sheet.html` — three colorways, noise in the shapes, the field and the survey as references.
3. The theory files named above, the "Site, 23 Sep 2026" note at the bottom of each.
4. The live page, only to see what not to repeat.