Слой архитектора
Дизайн
Имя, адреса, мета и внешний вид этого проекта. Сохранённые настройки читаются на лету — изменение видно при следующей загрузке страницы, без пересборки.
Блоки
Все блоки, из которых этот проект собирает страницы, нарисованные настоящим рендерером. Сгруппированы по назначению.
Блок — это единица, из которой собрана страница. Страница здесь не свёрстанный файл, а СПИСОК БЛОКОВ. Рендереры уже собраны; страница лишь говорит, какие виды на ней стоят, в каком порядке и с каким текстом. Именно поэтому все страницы проекта выглядят одним продуктом, а не работой пяти разных людей.
Section heading. It also builds the table of contents and the anchor.
A section heading
Sub-heading inside a section. It becomes the second level of the table of contents, nested under its own h2.
A sub-heading
Fourth level — a topic inside a sub-heading. For documents that are genuinely three levels deep.
A fourth-level heading
Fifth and deepest level: a label for a short enumeration. Same size as body text, set apart by caps — a heading smaller than prose stops reading as a heading.
A fifth-level label
Ordinary prose. Supports **bold** and [links](https://example.com).
A paragraph carries the argument. Inline markup is limited on purpose: bold for emphasis and a link — anything richer belongs in a block of its own, where the renderer can be held to a contract.
Somebody else’s words. `cite` names the author; the optional `lead` is a headline-sized first line INSIDE the quote — a field rather than a second kind, so the drawing cannot drift.
“A quote is the one place where the text is not yours — so the block shows attribution, and the attribution is a separate field rather than a line of prose.”
The same block, with a lead“The lead is not a heading tag: inside a quotation it would announce a section that does not exist, both in the table of contents and in the machine twin. It is a first line that simply reads larger.”
Unordered set: the order carries no meaning.
- Items that could be read in any order.
- Each one stands on its own.
- Inline markup works here too: bold.
Ordered steps: the order IS the meaning.
- First the goal is set.
- Then the work is done.
- Then a machine checks it.
An illustration. `media:<name>` takes it from the store, a path takes it from the project.
Code or an ASCII diagram. Never reformatted, never highlighted.
goal ──▶ agent ──▶ gates ──▶ green? ──▶ shipped
▲ │
└────── failure ────┘A footnote-weight remark: a source, a caveat.
A note sits below the argument and does not compete with it — quieter type, but still above the contrast threshold.
An aside the reader should not miss. `title` is the lead-in.
One action, one link. Inside a site the only legal form is the language root.
A call to action states what the reader gets, not what the button does.
Open the home pageA comparison. The LAST column is emphasized as “ours”.
| By hand | In a loop | |
|---|---|---|
| Who repeats the work | a person | a machine |
| Who notices a mistake | a person, later | a gate, immediately |
| What scales | nothing | the verification |
A card pointing at a full document, with a download button.
Two or three columns on wide screens, stacked on a phone. Holds any blocks.
Left column
A container renders its children through the same registry, so anything nests inside anything.
Right column
- Including lists.
- Including another container.
A plain vertical grouping — a column’s contents, or a semantic wrapper.
A group adds no decoration of its own. It exists so a container can hold a sequence where one block was expected.
One cell of a `cards` section. A container: it holds any blocks. `tone` gives it a light gradient wash in the colour of its MEANING group — `data` for what you do, `access` for what is worth doing first — never "make it green". A cell with no tone is a plain border: a wash has to mean something, and a wash on every cell stops singling out anything.
Two cells, two meanings
What you do
- Order matters inside a cell.
- The cell holds any blocks.
What is worth doing first
- The same tone the panel warns with.
- Nothing is blocked by it.
A large spaced-out claim — the thing a section exists to say. The SAME drawing as the owner's pull-quote, minus the byline, and that difference is substantive: `founder` is signed with a name and a photo from the settings, so it marks what a PERSON said. A product rule was said by nobody; signing it would attribute to the owner a sentence he never uttered. The drawing is shared (`sections/pull-quote.server.tsx`) so the two cannot drift apart.
And this is a product rule, not advice: while a single case is unconfirmed the panel keeps its alarm lit and the coding agent refuses to build.
Приглашение в пунктирной рамке: здесь пока ПУСТО, и это место можно занять. Не `cta` — та сплошная и про готовое действие, а пунктир говорит обратное: ничего ещё нет. Ссылка — вся карточка целиком: попасть по ней должно быть так же легко, как промахнуться трудно. Рисунок общий с карточкой заявки на страницах подвала (`lib/ui/dashed-card.ts`): там она КНОПКА и открывает окно, здесь ССЫЛКА и ведёт по адресу — природа разная, вид один, и класс живёт в одном файле, чтобы они не разошлись.
A bordered section holding any blocks. Three tones: plain, warn, accent.
A plain panel
The sections of a landing page are all this one kind, differing by tone and contents.
Worth doing
Something that is not blocking, but is expensive to postpone.
The one place
Where the model works
The only glow on the page: highlighting everything highlights nothing.
Questions and answers — the last content section of a page, and the only one search engines read as a pair of "term and definition". The heading is printed by the MECHANISM, not by the material: "Frequently asked questions" is already translated into ten languages in `lib/content/page-ui.ts`, so `title` is only for a page whose questions are about one thing rather than frequent. Inline markup is deliberately absent: the very same strings go into the `FAQPage` structured data, where asterisks and brackets would be printed to the search engine verbatim.
Частые вопросы
- Why is this a catalogue kind rather than layout inside the page template?
- Because a page must have ONE source of markup. While the template drew this section itself, the catalogue promised to show what a page is made of and knew nothing about it — and a rule added to the kind never reached the page.
- Does the page now declare its questions differently?
- No. They still live in the `faq` field of the language cell, and the same field feeds the FAQPage markup for search. Only the drawing moved.
- Can two of these stand on one page?
- No. The anchor is fixed so that it can be linked to from outside, and two sections would produce the same id twice.
The table of contents of a page. You never write it: the page factory builds `items` from the `h2` blocks of the body, using the SAME `headingId` the headings themselves print — two ways of turning a heading into an address drift apart on the first text with punctuation, and then the contents lead nowhere. Its own heading ("On this page") is a word of the mechanism and lives in `lib/content/page-ui.ts`. Written by hand, the list becomes a second copy of the headings that goes stale silently: the link keeps working while the word in it no longer matches.
A text field that can be dictated — the first kind of the catalogue that TAKES something from a visitor instead of showing them something. One kind, two sizes: 'line' puts the microphone inside the frame of a single-line input, 'area' puts a full-width button under a text area. While recording, an equaliser bar appears below; when recording stops, the bar is REPLACED in the same place by the transcript, which the visitor edits before accepting. It has NO receiver, by the owner's decision of 2026-08-28: the text lives in the browser and disappears on reload, so this is not a contact form. Transcription needs HTTPS, a session and a server key; without them the field stays an ordinary input and says why the microphone is unavailable.
What should the assistant be called?
One word or two. Hold the microphone and say it.
The transcript lands in the field only after you accept it — a misheard word costs one correction, not a second dictation.
What is this project about?
A paragraph is fine. The button sits under the whole area, not inside it.
The same control in its long form: only the shape of the field and the place of the button differ.