Decided parts for every Settings screen, System health and Away. Read this file first; the others only use what is here.
Studio's first admin screens beyond the shell (design-system.md §5 Admin screens). §5 and §6 decide the frame (220px side nav, content full width inside the gutter) and the parts every screen uses — type scale A, fields, checkbox, choice rows, table, status label, alert, empty state, modal. They don't yet cover the parts a Settings section needs: nav items and their active state (§5 defers them to §6, which has none), tabs, session-type chips, groups, value rows, a Save bar and an editor page. This file proposes each one, built only from decided tokens and components, so every Settings mockup uses the same set. Decided by Earl, 12 Oct 2026; recorded in design-system.md §6 Admin parts.
Wording on every screen is placeholder (not copy); every label is from glossary.md. Values shown are the Rules defaults in the A2 spec (3a), never live figures.
--n100; §5 Admin screens; §6 every component reused belowdesign-system.md §5): new leads, a session, the Calendar, reports and contacts each need a phone-first mockup — a new design row; (2) row 10: the mockups now live in docs/mockups/ on dev, so the preview site can deploy straight from there; (3) row 11h output is these eleven files, all decided — the A2 spec's Design section can name them.body (16px), --n500 at rest → --n700 on hover and when active; the active item also gets a 1px --n700 rule on its left edge. Counts in label style, --n700, right-aligned. No icons. Main entries on top; System health, Library, Settings in the foot group under a rule (System health isn't daily work, but its badge must always be visible). The trading name “Earl Kiu” (Company) in action with “Studio” under it in label.action style, --n500 at rest → --n700; the active tab carries a 1px --n700 underline sitting on the row's --n200 rule. 32px apart.--n400 border, body text, 12 × 24 padding, 8px apart; chosen = --n700 fill. One chip always chosen. Chosen over a second tab row (two tab rows stacked read as one).label heading, 20px to its first row (situational 20, on record); groups split by a 1px --n200 rule with 48px above and 24px below.body on the left with any note in small under it; the value as a §6 text field (or select) in a 300px column on the right, its unit in small after it (“RM” before); 16px padding, --n200 rules. An edited, unsaved row shows a 6px --n700 square before its meaning.--n100 with a 1px --n200 rule on top. Left: “2 unsaved changes” in small, --n700. Right: Discard (action link) and Save (the one button). A refusal replaces the count with its message, same place. Kept from ECSB's one Save per tab.heading, status labels beside it, then the fields in the 620 column; a preview, where one exists, sits to the right (80px gap) and drops below on mobile. Chosen over a sheet because §6 has no sheet and the editors are long.--n400) and its rule in small; it has no edit or remove links.Badge only while something is Critical; absent at zero (as the Tasks count). Owner and Admin only — no entry for other roles.
“?” rather than zero when the page can't load events.
Solo mode: Chat is absent (module 1, item 3) and the brand switcher in the header is gone (item 7). When a second person joins, Chat returns between Lab and Contacts on the next page load.
Settings order proposed: Company · Team · Rules · Catalog · Forms · Emails · Agreement templates. Gone from ECSB's row: Brand fields, Questionnaires (both into Forms), Scheduling (now Rules), Files (removed, A2 spec 3e); Commission is hidden while solo and returns after Catalog.
Emails and Agreement templates add a first chip, “Every type”, for what isn't tied to one (Rules has its studio-wide values above the chips instead).
P5 value rows. The middle row is edited and not yet saved.
The bar is absent when nothing has changed. While saving, the button holds its width and shows the §6 loading dots; Discard is gone so nothing can change mid-save.
The tab row scrolls sideways on a phone.
Value rows stack: meaning, then the field, full width. The Save bar wraps to two lines when it doesn't fit.
§5 decided: Menu opens the nav full screen. The same items and active state as the side nav.