docs(8): revise UI design contract

This commit is contained in:
Jakub Zych
2026-09-23 12:50:25 +02:00
parent 2aafa6f2a2
commit dd96f59e57

View File

@@ -71,18 +71,13 @@ Declared values (all multiples of 4):
| 2xl | 48px | Contextual empty-state vertical padding | | 2xl | 48px | Contextual empty-state vertical padding |
| 3xl | 64px | Reserved page-level separation; inherited app shell only | | 3xl | 64px | Reserved page-level separation; inherited app shell only |
Exceptions that are already implemented and must be preserved rather than normalized: The Phase 8 spacing scale is exactly the seven values above. The 44px minimum interactive target is an accessibility dimension, not a spacing token. The unchanged app shell's responsive horizontal padding and the connected-app scope badges' compact inherited gap are pre-existing, out-of-scope implementation observations; Phase 8 neither adopts them as tokens nor authorizes normalizing or editing them. The consent page uses only declared 48px vertical padding and 24px card rhythm.
- interactive consent buttons, scope rows, settings tabs, and revoke icon button have a minimum 44px target;
- the app shell uses 20px mobile and 28px desktop horizontal padding;
- consent page uses 48px vertical padding and a 24px card rhythm;
- the connected-app scope badges retain their existing compact Tailwind `gap-1.5`; it is an inherited component detail, not a new phase spacing token.
--- ---
## Typography ## Typography
The phase declares four app roles and exactly two design weights. Existing shared components remain unchanged even where their vendored utilities use `font-medium` or the display font. Phase 8 owns exactly the four sizes and two weights declared below. Existing shared components remain unchanged; their inherited rendering is implementation observation, not an extension of this phase's typography scale.
| Role | Size | Weight | Line Height | | Role | Size | Weight | Line Height |
|------|------|--------|-------------| |------|------|--------|-------------|
@@ -94,10 +89,12 @@ The phase declares four app roles and exactly two design weights. Existing share
Additional locked rendering details: Additional locked rendering details:
- `redirect_host` uses IBM Plex Mono at the body size so the destination domain remains visually distinct; - `redirect_host` uses IBM Plex Mono at the body size so the destination domain remains visually distinct;
- the untrusted application name is rendered as the existing quotation treatment (`text-lg font-medium`) with a disclaimer, never as trusted branding; - the untrusted application name keeps the existing emphasized quotation treatment with a disclaimer, never as trusted branding; its inherited utility classes are out-of-scope observations, not Phase 8 size or weight tokens;
- the shared connected-app empty state keeps its existing Instrument Serif title treatment; - the shared connected-app empty state keeps its existing Instrument Serif title treatment; that immutable shared-component rendering does not add a Phase 8 size or weight;
- headings use tight tracking; body, hint, date, and error copy use IBM Plex Sans. - headings use tight tracking; body, hint, date, and error copy use IBM Plex Sans.
No additional font size or weight is adopted or requested, and this contract does not authorize a Nuxt source change to reconcile inherited component utilities with the phase-owned scale.
--- ---
## Color ## Color
@@ -137,10 +134,14 @@ All copy is pre-existing and locked. The backend returns data only; it must not
| Connected-app load error | Could not load connected applications. Try again. | Nie udało się wczytać połączonych aplikacji. Spróbuj ponownie. | | Connected-app load error | Could not load connected applications. Try again. | Nie udało się wczytać połączonych aplikacji. Spróbuj ponownie. |
| Revoke title | Revoke {name}? | Odwołać {name}? | | Revoke title | Revoke {name}? | Odwołać {name}? |
| Revoke confirmation | This application will immediately lose access to the collection. This cannot be undone. | Ta aplikacja natychmiast straci dostęp do kolekcji. Tej operacji nie można cofnąć. | | Revoke confirmation | This application will immediately lose access to the collection. This cannot be undone. | Ta aplikacja natychmiast straci dostęp do kolekcji. Tej operacji nie można cofnąć. |
| Dialog cancel action | Cancel | Anuluj |
| Destructive CTA | Revoke | Odwołaj |
| Revoke success | Access revoked | Dostęp odwołany | | Revoke success | Access revoked | Dostęp odwołany |
Scope labels and explanations remain the existing localized `Read`/`Write`/`AI` copy. `client_name`, collection names, email, dates, and counts are data substitutions and must be rendered through Vue interpolation, never as HTML. Scope labels and explanations remain the existing localized `Read`/`Write`/`AI` copy. `client_name`, collection names, email, dates, and counts are data substitutions and must be rendered through Vue interpolation, never as HTML.
**Locked legacy CTA exception:** The exact unchanged labels **Allow**, **Deny**, **Revoke**, and **Cancel** (with their existing Polish translations above) are narrow exceptions to the UI-gate preference for verb-plus-noun action copy. **Allow** and **Deny** sit under the access-request title, explanatory lead, requested scopes, and destination context; **Revoke** sits in a destructive confirmation dialog named with the application and described by the irreversible consequence; **Cancel** is the non-destructive action in that same named dialog and closes it without an API call. Button styling, dialog semantics, focus management, visible surrounding copy, and the dynamic `Revoke {client_name}?` accessible name supply the action context. These are immutable legacy labels, not precedent for new copy, and Phase 8 does not authorize renaming them or making any Nuxt change.
--- ---
## Consent Screen Contract ## Consent Screen Contract