updated design

This commit is contained in:
2026-08-11 16:34:09 +02:00
parent 3e02c3f36a
commit 39f925cb58
17 changed files with 859 additions and 19 deletions
+36
View File
@@ -0,0 +1,36 @@
# Takemi shell design audit — scope
## Audited artifact
- Running Persona 5-inspired desktop shell shown in the two supplied 1920×1080 screenshots.
- Quickshell implementation under `quickshell/`, including the top bar, right rail,
pop-outs, tray menus, power overlay, notifications/OSD, and lock screen.
- Shared design tokens and primitives in `quickshell/config/` and
`quickshell/components/`.
## User and task
- Primary user: the workstation owner using the shell throughout the day.
- Primary task: identify system state and reach common desktop controls quickly,
without the theme obscuring application content.
## Constraints
- Preserve the Persona 5 / Tae Takemi identity.
- Preserve the crimson, black, and white palette and screen-print character.
- Stack remains Quickshell, Hyprland, and Fluxo.
- The result must work at desktop scale, with keyboard and pointer input, and
remain legible during long sessions.
## References
- Persona 5 interface language: asymmetric editorial composition, hard ink,
decisive silhouettes, halftone texture, and rapid card-like motion.
- Current implementation and supplied screenshots are the concrete baseline;
fidelity to the game is subordinate to daily desktop usefulness.
## Out of scope
- Application-level themes outside the shell.
- Replacing the wallpaper or character artwork.
- Changing the desktop stack.
+114
View File
@@ -0,0 +1,114 @@
# Evidence
## 1. Innovative
- The shell applies one custom QML geometry and print system across panels,
backdrops, motion, and textures (`quickshell/config/Theme.qml:118-153`,
`quickshell/components/P5Panel.qml:7-56`).
- This refreshes standard desktop bars/popovers, but the interaction model is
still conventional bar + rail + popup + modal.
## 2. Useful
- The permanent bar exposes workspaces, active window, media, resources, and
time in one slab (`quickshell/bar/Bar.qml:67-122`).
- Power and lock are keyboard-operable; bar, rail, tray, and most pop-out
actions remain pointer-only (`quickshell/overlays/PowerMenu.qml:242-261`,
`quickshell/lock/LockFace.qml:290-311`,
`quickshell/bar/RailIcon.qml:104-124`).
- The primary surfaces contain at least 41 interactive targets; the live total
grows with workspaces, devices, streams, notifications, and tray entries.
## 3. Aesthetic
- A clear system exists: spacing `[6,12,20,32]`, type
`[9,11,12,15,20,34,92]`, 12 literal palette colors, one nominal 14° angle,
and shared 10px cuts (`quickshell/config/Theme.qml:19-49,92-148`).
- Runtime type exceptions include 8, 30, 42, and 156.4px; local geometry also
introduces several non-token cuts and leans.
- White on crimson is 3.68:1 and fails normal-text AA where selected destructive
actions or unread badges use that pairing
(`quickshell/components/P5Button.qml:32-73`,
`quickshell/bar/NotifButton.qml:38-58`).
- Screenshot #1: permanent chrome is visually continuous and disciplined, but
competes with an already high-contrast Persona wallpaper/frame.
- Screenshot #2: the left headline/right action-stack composition is strong;
the repeated stripe field and still-legible desktop behind it dilute focus.
## 4. Understandable
- The power screen labels all actions and prints its keyboard map
(`quickshell/overlays/PowerMenu.qml:31-38,216-261`).
- Rail icons expose different left/right/middle/scroll behaviors without visible
instruction (`quickshell/bar/Rail.qml:76-132`).
- Several state labels behave as inverse actions: “Wi-Fi On,” Bluetooth “On,”
“Scanning,” and “Silenced” toggle those states off.
- “WHO GOES THERE,” “WRONG,” “HELD,” “PROCS,” “VRAM,” and unlabeled load values
favor voice or jargon over immediate comprehension.
## 5. Unobtrusive
- Normal chrome consumes only a 40px top bar and 48px right rail
(`quickshell/config/Theme.qml:109-116`).
- The full-screen modes add stripes, a wedge, oversized split text, attribution,
six slabs, and a hint simultaneously
(`quickshell/overlays/PowerMenu.qml:50-228`).
- Twelve action identities are repeated between permanent chrome and detail
panels; repetition improves reach but adds competing affordances.
## 6. Honest
- No marketing inflation or dark patterns were found. Power labels map directly
to their system action (`quickshell/overlays/PowerMenu.qml:31-38,230-239`).
- “n HELD” counts all history rather than suppressed items
(`quickshell/popouts/NotifPopout.qml:27`,
`quickshell/services/Notifs.qml:36-44`).
- Muted OSDs display 0% even when stored volume remains nonzero
(`quickshell/overlays/Osd.qml:51-64,172-185`).
- A visually disabled slider can still emit changes
(`quickshell/components/P5Slider.qml:9-12,48-84`).
## 7. Long-lasting
- The system is based on reusable primitives rather than per-screen decoration.
- Literal `P5` branding, the quote attribution, and the esports-like continuous
frame tie the result closely to one entertainment reference and visual era
(`quickshell/bar/Sigil.qml:31`,
`quickshell/overlays/PowerMenu.qml:88-118`).
## 8. Thorough
- Empty, loading, failure, focus, and disabled states exist.
- A rendered success state is absent; generic buttons lack a disabled state;
focus treatment is concentrated in power and lock; explicit accessible names
and roles total zero (`quickshell/components/P5Button.qml:6-107`).
- The locks disabled state is clear, but `P5Slider` can look disabled while
remaining interactive.
## 9. Environmentally friendly
- The shell has 0 JavaScript bytes, about 259KB of QML, 1.4KB of local texture
assets, no declared HTTP request, and a measured load proxy below two seconds.
- Seven Fluxo reads recur in polling batches; playing media creates 36 idle
animation loops (`quickshell/services/Sys.qml:78-102`,
`quickshell/bar/MediaPill.qml:125-153`).
- No reduced-motion branch exists (`quickshell/config/Theme.qml:139-148`).
## 10. As little design as possible
- The one-slab bar avoids a row of redundant cards
(`quickshell/bar/Bar.qml:8-14,40-63`).
- The audited tree reaches seven declarative levels, contains twelve repeated
action identities, and includes removable atmospheric elements in modal and
lock compositions.
- The permanent surface, transient surface, and cinematic surface currently
share too much of the same visual intensity instead of forming a hierarchy.
## Known gaps
- Dynamic application strings, device counts, and menu depth cannot be fixed
from static source.
- Exact compositor frame time, GPU cost, and live accessibility-tree output
were not available.
- Screenshot evidence covers the normal desktop and power overlay; lock-screen
judgments also use its implementation source.
+43
View File
@@ -0,0 +1,43 @@
# Rams scorecard
1. **Good design is innovative — 2/3**
Evidence: one custom print/geometry system refreshes conventional shell surfaces (`01-evidence.md#1-innovative`).
Justification: the expression is distinctive, but it does not introduce a new desktop interaction pattern.
2. **Good design makes a product useful — 2/3**
Evidence: core state and actions are direct, while most shell controls require a pointer (`01-evidence.md#2-useful`).
Justification: the primary tasks work quickly, but keyboard and discoverability gaps add friction.
3. **Good design is aesthetic — 2/3**
Evidence: the token system is strong, with several type/geometry exceptions and a 3.68:1 text pairing (`01-evidence.md#3-aesthetic`).
Justification: the visual system is unmistakable, but contrast and intensity inconsistencies prevent a fully resolved score.
4. **Good design makes a product understandable — 1/3**
Evidence: multiple rail gestures are undisclosed and several state labels read like actions (`01-evidence.md#4-understandable`).
Justification: more than three controls require prior knowledge or experimentation.
5. **Good design is unobtrusive — 1/3**
Evidence: compact permanent chrome expands into visually competing full-screen decoration (`01-evidence.md#5-unobtrusive`).
Justification: the theme sometimes becomes the figure when the users task should remain the figure.
6. **Good design is honest — 2/3**
Evidence: no dark patterns exist, but held-count, muted-volume, and disabled-slider presentation diverge from behavior (`01-evidence.md#6-honest`).
Justification: the mismatches are minor rather than deceptive, but prevent a one-to-one mapping everywhere.
7. **Good design is long-lasting — 2/3**
Evidence: reusable primitives coexist with literal franchise and gaming-HUD markers (`01-evidence.md#7-long-lasting`).
Justification: the craft will last, while the most literal references may date the surface.
8. **Good design is thorough — 1/3**
Evidence: success, generic disabled, broad focus, and accessibility metadata are missing or rough (`01-evidence.md#8-thorough`).
Justification: three or more important state families remain incomplete.
9. **Good design is environmentally friendly — 1/3**
Evidence: source weight is small, but recurring polling and idle motion have no reduced-motion gate (`01-evidence.md#9-environmentally-friendly`).
Justification: the runtime is lean yet motion is always on when its conditions are met.
10. **Good design is as little design as possible — 1/3**
Evidence: restrained single slabs coexist with repeated affordances and multi-layer modal atmosphere (`01-evidence.md#10-as-little-design-as-possible`).
Justification: at least three decorative or duplicated elements could be removed without breaking a task.
**Total: 15/30**
+30
View File
@@ -0,0 +1,30 @@
# Verdict — REDESIGN
The strict Rams verdict is **REDESIGN (15/30)**: preserve the excellent brand
tokens and working shell primitives, but redesign the hierarchy so permanent,
transient, and cinematic surfaces no longer compete at the same intensity.
## Highest-leverage moves
1. **Principles #4 and #8 — make behavior legible:** give every icon one primary
click action, add concise Persona-styled hover labels, expose secondary actions
inside its pop-out, and add real focus/disabled/accessibility states. Evidence:
`01-evidence.md#4-understandable` and `#8-thorough`.
2. **Principles #5 and #10 — introduce three intensity tiers:** quiet permanent
chrome, expressive transient panels, theatrical full-screen scenes; reserve
stripes, large split type, and strong halftone for the latter two. Evidence:
`01-evidence.md#5-unobtrusive` and `#10-as-little-design-as-possible`.
3. **Principles #3 and #6 — assign semantics by treatment, not red alone:** use
white fill for selection, a red rule/slash for active state, solid red only
for destructive/error, and pulse only for urgency; fix white-on-red small text.
Evidence: `01-evidence.md#3-aesthetic` and `#6-honest`.
4. **Principles #3 and #7 — move the chaos to macro-composition:** keep clean
module geometry, but vary panel silhouette, title placement, and scale by
context instead of repeating the same framed HUD grammar everywhere. Evidence:
`01-evidence.md#3-aesthetic` and `#7-long-lasting`.
5. **Principles #2 and #9 — add a calm mode:** stop idle equalizer/pulse/marquee
motion when reduced motion is requested and reduce polling when a detail panel
is closed. Evidence: `01-evidence.md#2-useful` and `#9-environmentally-friendly`.
This is a hierarchy redesign, not an instruction to discard the palette,
textures, panel engine, services, or current functionality.
+41
View File
@@ -0,0 +1,41 @@
# Planning handoff
```text
/make-plan Redesign the Takemi Persona 5 desktop shell. Current design failed audit at 15/30 with critical gaps in principles #4 understandable, #5 unobtrusive, #8 thorough, #9 environmentally friendly, and #10 as little design as possible.
Verdict paragraph:
> The strict Rams verdict is REDESIGN (15/30): preserve the excellent brand tokens and working shell primitives, but redesign the hierarchy so permanent, transient, and cinematic surfaces no longer compete at the same intensity.
Why redesign and not refine: the total is below the 20-point refine threshold because the same high-intensity visual and interaction grammar spans permanent chrome, transient controls, and full-screen scenes.
Preserve from current design:
- Crimson/black/white palette, type scale foundation, and motion timings in quickshell/config/Theme.qml:19-148.
- Single-slab bar/rail architecture in quickshell/bar/Bar.qml:8-63 and quickshell/bar/Rail.qml:9-64.
- Reusable P5Panel geometry/texture engine in quickshell/components/P5Panel.qml:7-248.
- Existing services and feature coverage; this is an information/design hierarchy change, not a functionality cut.
Discard:
- One-intensity-fits-all use of stripes, halftone, split type, slashes, and repeated framed geometry. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#5-unobtrusive. Caused failure on principles #5 and #10.
- Undisclosed multi-button/multi-gesture behavior on icon-only permanent controls. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#4-understandable. Caused failure on principles #4 and #8.
Top moves:
1. Principles #4 and #8 — make behavior legible: give every icon one primary click action, add concise Persona-styled hover labels, expose secondary actions inside its pop-out, and add real focus/disabled/accessibility states. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#4-understandable and #8-thorough.
2. Principles #5 and #10 — introduce three intensity tiers: quiet permanent chrome, expressive transient panels, theatrical full-screen scenes; reserve stripes, large split type, and strong halftone for the latter two. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#5-unobtrusive and #10-as-little-design-as-possible.
3. Principles #3 and #6 — assign semantics by treatment, not red alone: use white fill for selection, a red rule/slash for active state, solid red only for destructive/error, and pulse only for urgency; fix white-on-red small text. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#3-aesthetic and #6-honest.
4. Principles #3 and #7 — move the chaos to macro-composition: keep clean module geometry, but vary panel silhouette, title placement, and scale by context instead of repeating the same framed HUD grammar everywhere. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#3-aesthetic and #7-long-lasting.
5. Principles #2 and #9 — add a calm mode: stop idle equalizer/pulse/marquee motion when reduced motion is requested and reduce polling when a detail panel is closed. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#2-useful and #9-environmentally-friendly.
Redesign priorities:
1. Principle #4 — every visible control communicates its primary action without memorized mouse-button lore.
2. Principles #5/#10 — visual intensity increases deliberately from chrome to pop-out to modal.
3. Principles #3/#6 — color, fill, outline, pattern, and motion each have one stable semantic job.
Deliverables:
- New information architecture, not derived mechanically from the old layout.
- New labeled primary flow compared side-by-side with the current shell.
- Empty/loading/error/success/focus/disabled state matrix.
- Migration path that preserves existing service behavior and keybinds.
- Cutover criteria based on discoverability, contrast, reduced motion, and visual hierarchy.
Guard against porting the old structure under new styling, running both hierarchies indefinitely, following generic gaming-HUD trends, or discarding the preserved brand tokens and primitives.
```