RenewCMS design pass 2
Nuxt UI v4 back-office. Tokens only, no raw hex (brand mark excepted). Light and dark. 1440×900 and 390×844. Radius 0.
Boards
RenewCMS Screens Back-office.dc.html: every back-office screen, Settings → Media (variants, cache), and the group "States matrix: controls". Frames:AppFrame(shell),DirectoryFrame(Sites and Authors),ActivityFrame,MediaFrame,VariantsFrame,IntegrationPage,IntegrationImages,CodeSnippet,StatesMatrix.RenewCMS Screens Auth.dc.html(7 groups, 50 states),RenewCMS Screens API keys.dc.html(12 states).RenewCMS Prototype.dc.html: updated to match (title-only New article, no body limit or counter, neutral count, pagination, link button, AppFrame's mobile drawer).- Unchanged: Foundations, Components, Handoff, Directions and Emails boards.
Pass 3: sites and authors (revised)
Roles, decisions and the slice order are in sites-authors-slices.md (Sites and Authors) and seo-slices.md (SEO).
Back-office board groups: Sites, Sites: form, Sites: delete, Authors, Authors: form, Authors: delete, Editor: site and authors, Profile: author profile, Articles: sites and authors. Plus tables: decisions to confirm (13 rows, 5 marked Decided), deviations, API and errors (with the 403 rows), components, accessibility, copy per state.
- Roles: only creating, editing, deleting and setting the default site are owner only (no sidebar entry or Publishing card for others, 403 page on a direct link). Anyone who can edit an article can set its site and read the site list. Authors: owner and admin manage; other roles read-only, and any role can create and edit their own author (user link locked, no delete).
- The site key is immutable: read-only with a lock in the edit form; the warning state and dialog are gone.
- The "Author profile" card is drawn in every existing Profile frame. The "Site and authors" section shows collapsed in every existing Editor frame that has the details sidebar (39 already did; the Loading frame now shows the header with a skeleton summary). The Not found frame has no editor, and on mobile the section is inside the Details sheet. The dedicated groups keep only the feature-specific states.
- Shared pieces (list, slide-over, delete-with-reassign dialog, slug field, media field) are defined once in
DirectoryFrame, used by Sites and Authors. The Profile card is defined once inAppFrame. - States trimmed from 87 to 68 (Sites 9, Sites: form 7, Sites: delete 3, Authors 8, Authors: form 11, Authors: delete 6, Editor: site and authors 16, Profile: author profile 5, Articles: sites and authors 3). Dropped: in-progress and done variants (covered by the button loading pattern and the confirm state's trigger), per-error URL variants, the site picker (same picker as the avatar), manual slug override, long names (merged into Many authors), per-field duplicates. The blocked-delete dialog is one frame, "Server fallback (409)".
- Only individual states that render a relative time or a countdown carry the "Clock-sensitive" tag (13 states, listed in states.md). No Home or Articles frame is tagged as a whole.
- Role-restricted variants drawn: read-only Authors list and detail, hidden Sites entry, Sites 403, own-author edit.
Specs
routes.md · components.md · states.md · foundations.md · change-list.md · activity-spec.js · screens/*.md (24 files)
Status
| Section | Status |
|---|---|
| A1 Activity export | Done: CSV only, synchronous; progress state removed; JSON proposed |
A2 Pagination page/size |
Done in frames, routes.md, change-list.md |
| A3 Unknown variant and unsupported parameter | Done: both 400 bodies in the Responses table |
| A4 New tokens | Done: foundations.md table |
| A5 screens/*.md | Done: 22 files, copy generated from the board source |
| B1 Editor link | Done: 11 states |
| B2 Duplicates | Done for sidebar, topbar, drawer, code block, modal geometry; see Not done |
| B3 CodeSnippet | Done |
| B4 Overlays | Done |
| B5 Prototype | Done |
| B6 Contrast and states matrix | Done for the pairs listed; matrix drawn |
| B7 Consistency sweep | Done for the roles listed |
| B8 Copy glossary | Done by search; not every line re-read |
| B9 Media and picker | Badge added; Media pagination drawn (9 states); filter, sort and size not folded in |
| B10 "proposed" labels | Only article pagination and JSON export |
State counts (Back-office board: 341 before pass 3, plus 68 for sites and authors = 409)
| Group | States |
|---|---|
| Boot | 1 |
| Home | 10 |
| Articles | 14 |
| Articles: pagination | 11 |
| New article | 5 |
| Editor | 41 |
| Media | 52 |
| Media picker | 13 |
| Integration | 8 |
| Activity | 9 |
| Activity: filter cards | 10 |
| Activity: export | 15 |
| Activity details | 6 |
| My activity | 3 |
| Users | 17 |
| Settings | 25 |
| Settings: Media cleanup | 9 |
| Purge dialog | 8 |
| Purge results | 2 |
| Media duplicates entry | 2 |
| Settings: Retention | 6 |
| Profile | 13 |
| Global | 4 |
| Integration: images | 9 |
| Settings navigation | 5 |
| Variants list | 12 |
| Add edit variant | 11 |
| Media library (variants) | 6 |
| Image detail | 8 |
| Cache panel | 10 |
| Editor picker | 5 |
Back-office total 341 (pass 2 groups, table above) + 68 (sites and authors) = 409. Auth board 50 (Log in 9, Register 6, Pending 6, Verify 6, Accept invite 10, Forgot password 6, Reset password 7). API keys board 12. Total 471 states; every one has a desktop and a mobile frame, and the theme switch gives light and dark. The matrix has 24 control rows, 5 states on desktop and 4 on mobile (no hover). screens/*.md list the states of the pass 2 groups and the 68 pass 3 states.
Fixes applied (pass 2)
- Activity export dialog: removed the 42% progress bar, the "large export" state, the server-job copy and the "ready later" toast; added "Preparing download…" (indeterminate), "Download started", failed, nothing to export, 403; CSV only, with one proposed JSON state.
- Export dialog and menu copy now match the implemented endpoint (current view with filters, all with optional range).
- Articles pagination used
per_page, sizes 10/25/50, default 10, 32 pages. Nowpage/size, 5/25/50/100, default 25, 13 pages; frames, route, URL examples and the change list updated. - The Integration responses table now shows both 400 bodies,
unknown_variantandunsupported_parameter. --rc-sandand--rc-on-sand(and the other--rc-*tokens) documented as new tokens with light and dark values and their uses.- Raw colours removed from frames: crop handles and mask, tooltip, transparency checker, drag-drop text, selected-row text in MediaFrame, hex in the Prototype. Only the brand mark keeps hex.
- ActivityFrame, MediaFrame and VariantsFrame sidebars, topbars and (Variants) mobile drawer deleted; they render inside AppFrame. Activity now follows the sidebar order (Users, Activity, Integration, Settings).
- Prototype's own mobile drawer (Home, Articles, Users, Integration only) replaced by AppFrame's drawer.
- All code blocks on Integration (auth example, endpoint examples, error response), the base URL, the image URL builder and the one-time API key use CodeSnippet; the three older block styles are gone. CodeSnippet tabs changed from sand pills to the underline style used by tabs elsewhere.
- Variant form: mobile full page replaced by a 92% bottom sheet with grabber and close ×; back arrow removed.
- Dialog geometry unified (140 px top offset on desktop, flush bottom sheets with grabber on mobile, header 20 24 0, footer secondary left and primary right, close × 44 px on mobile). Changed: Media and Variants dialogs (mobile inset), Activity export (centered, header bar, 480 wide), API keys dialogs (border, 18 px title, 44 px buttons, 120 px offset).
- Current page in the paginator: border
--ui-primaryinstead of sand (was 1.3:1). - Page padding 24/16 everywhere (was 32 and 24); card padding 16 (was 16 and 20); section gap 16 (was 16, 20, 28); page title 20/28 (was 28/36, 24/32, 20/28); stat figure 24/32; card title 15/24; inputs 32/44 (were 40); one 13 px icon became 14; toast width 356 (was 360, 372).
- Copy: "Removed N …" in activity lines became "Deleted N …"; export titles and footers per the glossary.
- Media screen: variant count badge added to grid card, list row and mobile row, matching the Variants board.
- Editor toolbar on mobile was a cut-down 9-button subset; it now has the full toolbar with sideways scroll and edge fades.
- Editor words and characters show "0 words · 0 characters" for a new empty article (was a fallback sample count).
Defaults chosen
- Slide-over rule: only forms with a live preview and record details; on mobile always a 92% bottom sheet.
- Hover, active, disabled and focus tokens for the matrix (components not specified before): primary hover
--ui-text, active--ui-text-toned; destructive hover opacity 0.85 and active 0.75; disabled 40% (rows 55%). - Article pagination: API shape (array body, total in
X-Total-Count) is a design assumption to confirm with the specifier. - The Remove action in the link popover has no confirmation; undo restores the link.
- The link button is disabled when an image is selected.
- The tooltip text is "Insert link (Ctrl+K)" and "Insert link (⌘K)" on macOS.
- Mobile toolbar scrolls sideways; no wrap, no overflow menu.
- Selected nav items keep the sand fill plus weight 500 and
aria-current(the fill alone is 1.3:1 in light). - Syntax colouring dropped from code samples (one rendering).
- Export "Download started" offers only Close.
- New article keeps the title counter "n / 200" (title is limited to 200); the body has no limit and no counter.
- Page title 20/28, page padding 24/16, card padding 16 (foundations.md).
- Activity position in the sidebar follows AppFrame.
- The Prototype shows a toast "Not in this prototype" for sidebar items it has no screen for (Media, Activity, Settings).
Checks run
- Opened
RenewCMS Screens Back-office.dc.htmlin the preview: it loaded, 38 sections rendered, and I read the DOM of the Activity, Export, Media, Variants, Editor, Integration, Pagination, Picker, Editor picker and States matrix groups to confirm the frames render text and the sidebar. I did not read the console. - Computed the contrast table from token values with a script.
- Searched frames and boards for raw hex and rgb values (only token definitions on the board roots and the brand mark remain), for exclamation marks, Remove and Delete, Update and Save, and per_page.
- Generated screens/*.md and counted states from the board source; the counts equal the DOM counts for the Back-office board.
Not done
- Console errors on the Auth, API keys, Prototype, Foundations and Components boards were not read by me. The delivery check covers the Back-office board; the other boards use the changed frames (AppFrame, ApiKeysPage, AuthCard, MediaFrame) and may need a look.
- Light and dark were checked for the Back-office board by reading DOM only; I did not view the screenshots of each state at 1440 and 390, so visual regressions from the shell change (slot mode) are possible.
- Media screen: the "With variants / Without" filter, the "Largest total size" sort and a total-size column exist only on the Variants board states; they are not folded into the Media toolbar.
- Media picker tiles and the Editor picker were not compared field by field.
- Duplicated implementations that look alike are not merged in code: toasts (5), badges (2), empty states (2), modal shells (4). Only their visuals were aligned.
- Hover, active and focus-visible are drawn once in the matrix; screens do not redraw them. Hover and active tokens for destructive buttons use opacity, not a token.
- Contrast was not computed for every hover and active background, only the pairs listed in foundations.md.
- The glossary pass was a search for known patterns, not a line-by-line read of every string. Titles in Title Case were not searched.
- The Components, Handoff and Foundations boards were not updated to mention the new tokens, CodeSnippet or the matrix.
- Integration still lists "max 10000" for article bodies, as the backend does today (change-list item 11).
- The sandbox cannot export; no files were bundled.