Every badge, banner and control here uses the same classes and icons as the prototype. Hover, pressed and focus are shown as forced states that copy the real :hover, :active and :focus-visible rules. Status never relies on colour alone: each one has its own icon and label.
Draft → Submitted → Needs your input → Ready to start → In progress → Ready for review → Changes requested → Completed. Fill colour shows who acts: amber = the client, accent = Weblerr is working, green = done.
| Status | What it means | Who acts | Client’s next action | Can move to |
|---|---|---|---|---|
| {{r.explain}} | {{r.who}} | {{r.next}} | {{r.to}} | |
| Marker, not a status: a request on a paused project keeps its last status underneath. Shown wherever the request appears, so paused work never reads as live. | Weblerr (resume review) | Request to resume the project | Previous status after resume |
A website brief isn’t a request and never enters the queue. It lives on its project. Confirming its scope creates milestone requests, and each milestone then follows the request lifecycle above.
| Brief status | What it means | Who acts | Where the client sees it |
|---|---|---|---|
| Autosaved on the project. Only the client sees it. | Client | Project page; “Also needs you” on Overview | |
| Submitted. Weblerr is confirming the website scope and planning milestones. | Weblerr | Project page; note on the Work queue | |
| Weblerr asked questions. The client updates the brief and resubmits it. | Client | Project page with questions; “Also needs you” | |
| Scope agreed. The brief stays read-only on the project and lists the milestones created from it. | No one | Project page; each milestone’s “Milestone details” links back |
| Nothing in production: the client can change mode after a confirmation dialog. Once work starts, a mode change is only possible through a switch request. | |
| Sent by the client. Nothing pauses and nothing activates. The client can withdraw it until Weblerr applies it. Settings links to it and can’t bypass it. | |
| Weblerr confirmed the stopping point and estimate changes. Current work is paused with its history and the target takes the one slot. | |
| The client cancelled it before it was applied. Work doesn’t change. |
| Slot state | Website mode | Page mode |
|---|---|---|
| Occupied | One request or milestone of the focus website is in progress, in review or in revisions. | One page request is in progress, in review or in revisions. |
| Held, nothing in production | The focus website keeps the slot between requests until the client completes the website or a switch is approved. | Not applicable |
| Available | After explicit website completion. The client then picks the next website or Page mode. | After a page is approved. The next page can be for any website. |
| Auto-start (off by default) | Only reviewed, ready requests inside the focus website. | The next reviewed, ready page from any website. |
Each decision has one primary action. Minimum height is 44 px, or 36 px for compact buttons in dense desktop rows. On mobile, icon buttons grow to 44 × 40 px. Transitions take 180 ms; the pressed state moves down 1 px over 90 ms.
Validation as built: an error summary at the top of the form section, plus inline error text for account and dialog forms. Field borders don’t turn red.
The toggle always shows On/Off as text. Form steps are pills; on mobile only the current step shows its label, and the others keep an aria-label. Sections can be visited in any order.
Uploads are simulated. The progress bar animates width over 160 ms steps.
Every queued item says why it can or can’t start. Items are never skipped silently.
Latest version first. Each version keeps its own summary, files, attention items and feedback. Only the latest version can be approved, and silence never approves.
Shown at 360 px wide, the narrowest supported width. Every item keeps a visible label (12/16 px, 600; current item 700 on an accent pill). The bar is 58 px tall and hidden only while a brief form is open. Files, Billing and Settings are under Account.
Confirms an action and dismisses itself after 4.2 s. On mobile it sits above the bottom nav. Toasts are left out of the clean exports.
Homepage design and Elementor build
Approving completes this request. Its versions, files and feedback stay saved.