Issue index

Build brief for a coding agent. Rebuild this piece in the reader’s stack. If they haven’t said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don’t “improve” them. When a kit is locked, the column is the pass column and the pressed topic uses --primary-soft. This is a list of notes. The magazine front is magazine-editorial-grid.

What it is

The index of Field Index, not a front spread. A kicker, a 48px serif title “Four notes”, then four topics: All, City, Desk, Kitchen. All starts pressed. Under that, four essays in a 720px column, each a date and a serif headline with one sentence. Newest first: The frost line on 3 Oct 2026, A desk by the window on 19 Sep 2026, Bread before noon on 2 Sep 2026, What the river kept on 14 Aug 2026. City leaves the frost line and the river. Desk leaves the window. Kitchen leaves the bread. The links do not leave the frame.

Reference behaviour

1. All is aria-pressed="true". Four articles show, in the date order above.
2. City hides the desk and the kitchen. Desk hides the other three. Kitchen hides the other three.
3. One topic is pressed. Pressing another releases the rest.
4. The pressed topic is pale blue, #e4eef5, which becomes --primary-soft when a theme is locked.
5. Clicking a headline does not navigate away. In a product the link opens that essay. The essay page is paper-article-reader in structure, with this index’s own words.
6. There is no animation. Focus ring is 2px --focus, offset 2px.
7. An empty topic does not exist in this demo. Every chip has at least one note.

Structure

padding 48px 64px
FIELD INDEX                  12px
Four notes                   48px serif
[ All ] [ City ] [ Desk ] [ Kitchen ]   40px
column 720
  3 Oct 2026     The frost line
  19 Sep 2026    A desk by the window
  2 Sep 2026     Bread before noon
  14 Aug 2026    What the river kept

• Each essay is an article with a time and an h2 inside a link.
• The date column is 140px. The headline takes the rest.
• A hairline sits on top of each article.

Tokens

:root {
  --bg: #f7f4ee;
  --ink: #1c2430;
  --ink-2: #3e4a5c;
  --line: #ddd6c8;
  --primary-soft: #e4eef5;
  --focus: #1e4a6e;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Public Sans", system-ui, sans-serif;
}

Topic radius is 2px in this demo. The family replaces it. A pill topic survives only when the family’s button is already a pill. The title is the display face. The dates and the sentences are the text face.

Typography

Role	Family	Size	Weight	Colour
Kicker	sans	12px	500	--ink-2
Title	serif	48px	500	--ink
Topic	sans	13px	500	--ink
Date	sans	13px	400	--ink-2
Headline	serif	28px	500	--ink
Sentence	sans	16px	400	--ink-2

The kicker letter-spacing is 0.06em. The title is the largest type. Headlines are not the same size as the title. The sentence measure stays under 52ch.

Motion

None. A topic hides rows in one frame. Reduced motion has nothing to remove. Do not fade the list.

Thing	Trigger	What changes
Topic	click	pressed chip, which articles show
Headline	click	no navigation in the demo
Focus	keyboard	2px ring

States

• Topic resting: height 40px, padding 0 14px, 1px --line, transparent, radius 2px.
• Topic pressed: background --primary-soft, border transparent, aria-pressed="true".
• Article: padding 16px 0, min-height 72px, 1px --line on top.
• Link: no underline. The headline is the link.
• Focus-visible: 2px outline, offset 2px.
• Do not paint the pressed topic as a solid primary button. The page has no commit button. The topic is a filter.

Accessibility

• Each topic is a button with aria-pressed.
• Each date is a time with a datetime.
• Hidden articles use the hidden attribute.
• The headline is an h2 inside the link, so the link’s name is the headline.
• Hit target: topics are 40px. The article link is at least 72px tall.
• Contrast: #3e4a5c on #f7f4ee and #1c2430 on #e4eef5 clear 4.5.
• The kicker is uppercase by letter-spacing, not by a second font. The words are “FIELD INDEX” in this demo. A product may use sentence case. Do not add a second tracking rule on top of the pairing once a kit is locked. This 0.06em is the demo kicker only.

Responsive rules

• At 1280 the column is 720px, padding 48px 64px. That is the pass column.
• Below 640 the date stacks above the headline. The column is full width inside 20px padding. The title may step down to 36px. It stays the largest type.
• Topics wrap. They do not become a select.
• Another screen in the same pass uses the same 720px column.

Acceptance checklist

• The title is Four notes at 48px Newsreader.
• The column is 720px.
• The four headlines and dates match the copy below, newest first.
• All starts pressed. City shows two notes. Desk shows one. Kitchen shows one.
• The pressed topic is #e4eef5, not a solid fill.
• Topics are 40px tall, radius 2px.
• A headline click does not leave the frame.
• Hidden notes use the hidden attribute.
• Focus ring is 2px, offset 2px.
• There is no magazine spread and no animation.

Implementation notes

One topic value. Hide with the attribute.

row.hidden = topic !== 'all' && row.dataset.topic !== topic;

Common mistakes:

• Rebuilding the magazine grid and calling it an index. The front is magazine-editorial-grid.
• Four equal cards with images. This list is type.
• Pill topics on a square family.
• A pressed topic in solid brand colour.
• Dates in a second calendar system mixed into the same list. These are AD dates. A BS date is labeled once, on a product that uses BS, and not mixed into one line with October.
• Links that navigate the demo iframe away.
• A 640px column beside a 720px page.

Where it sits in a product:

1. It is the list of essays. The essay itself is a reader, paper-article-reader, with the product’s own column.
2. The title is the largest type. Headlines step down.
3. Topics use the family’s radius and --primary-soft when pressed.
4. The column is the pass column, 720px in this demo.
5. When a theme is locked, the paper and the pale fill become that theme. The serif becomes the pairing’s display face.
6. Do not add a hero image above the title.
7. Four notes is this issue. A product lists the notes it has. Do not invent a fifth to fill the page.
8. The close of this page, if it asks for an address, is newsletter-close-band, not a second form in the index.
9. Keep the credit line on the token block.
10. City, Desk, and Kitchen are the only topics. A note has one topic.

Rebuild order:

1. Set the paper, Newsreader, and Public Sans.
2. Place the kicker, the title, and the four topics.
3. Place the four articles in the 720px column.
4. Wire the topics.
5. Prevent the demo links from navigating.
6. Map the pressed fill and the radius onto the kit.

Copy you keep:

1. FIELD INDEX.
2. Four notes.
3. All, City, Desk, Kitchen.
4. The frost line. 3 Oct 2026. Where the hill road holds ice after the valley has thawed.
5. A desk by the window. 19 Sep 2026. The afternoon light lasts forty minutes and then it is gone.
6. Bread before noon. 2 Sep 2026. The first loaf is for the house. The second is for the neighbour.
7. What the river kept. 14 Aug 2026. A stone jetty, a lost oar, and the mark of last monsoon.