Architect layer
Design
The name, addresses, meta and appearance of this project. Saved settings are read at runtime — a change shows on the next page load, with no rebuild.
Shapes & spacing
Corner rounding, borders, density and content width.
Corners, borders and breathing room — the shape of every surface on the site.
Corner rounding
Applies to cards, panels, buttons and inputs at once — each derives its own radius from this one value.
Border width
A two-pixel border changes the character of an interface more than a colour does.
Density
Vertical breathing room on every page. Content pages and work screens keep their difference — this moves both together.
Content width
How wide the middle column of a page may grow. The header, the first screen and the footer are always full width.
Preview
A card on the page
Its text sits inside the border, at the distance the density sets.
How these four values reach the pages
One radius, five derivatives. The project computes small, medium, large and extra-large corners from this single number, so a card, a button and an input never disagree. Setting them separately is how interfaces end up with three different corners on one screen.
Density is a multiplier, not a number of pixels. Content pages are airier than work screens on purpose: one is read, the other is worked in. The multiplier moves both and keeps that difference — separate fields would let a work screen become airier than a content page, which is not a setting but a defect.
Width governs the middle only. The page header, the first screen, the closing section and the footer are always full width. This value limits the column between them — the one the reader's eye travels along, where an over-long line becomes hard to follow.