RenewCMS/docs/design/README.md

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), 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.

Specs

routes.md · components.md · states.md · foundations.md · change-list.md · activity-spec.js · screens/*.md (22 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; filter, sort and size not folded in
B10 "proposed" labels	Only article pagination and JSON export

State counts (Back-office board: 341)

Group	States
Boot	1
Home	10
Articles	14
Articles: pagination	11
New article	5
Editor	41
Media	43
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. 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 403 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 exactly these 403.

Fixes applied (pass 2)

1. 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.
2. Export dialog and menu copy now match the implemented endpoint (current view with filters, all with optional range).
3. Articles pagination used per_page, sizes 10/25/50, default 10, 32 pages. Now page/size, 5/25/50/100, default 25, 13 pages; frames, route, URL examples and the change list updated.
4. The Integration responses table now shows both 400 bodies, unknown_variant and unsupported_parameter.
5. --rc-sand and --rc-on-sand (and the other --rc-* tokens) documented as new tokens with light and dark values and their uses.
6. 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.
7. 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).
8. Prototype's own mobile drawer (Home, Articles, Users, Integration only) replaced by AppFrame's drawer.
9. 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.
10. Variant form: mobile full page replaced by a 92% bottom sheet with grabber and close ×; back arrow removed.
11. 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).
12. Current page in the paginator: border --ui-primary instead of sand (was 1.3:1).
13. 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).
14. Copy: "Removed N …" in activity lines became "Deleted N …"; export titles and footers per the glossary.
15. Media screen: variant count badge added to grid card, list row and mobile row, matching the Variants board.
16. Editor toolbar on mobile was a cut-down 9-button subset; it now has the full toolbar with sideways scroll and edge fades.
17. 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 stays "proposed" until the backend returns page, size and total.
• 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.html in 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.