Lycato Gestalt redesign audit

Date: 9 August 2026

Authority: Lycato Design.zip, BRAND.md, docs/DESIGN_SYSTEM.md, and gestalt_interface_redesign_agent_guide.md.

1. Product and task summary

Lycato is building a founder operating system around one owned company record. The hosted beta currently provides verified founder access, an isolated company foundation, a public-site fallback, CRM, consented analytics, team invitations, and data export.

The three reviewed surfaces have distinct purposes:

Surface Purpose Primary task Primary action
Landing Explain the product model and the current beta boundary Decide whether to try the beta Open the hosted beta
Founder workspace Understand the company foundation and manage the available hosted features Edit and publish the company site Edit company site
Operations prototype Review the intended priority hierarchy for internal operations Inspect the morning queue None; all actions are visibly disabled

Data export is presented as the normal handback path. Permanent removal is visually and semantically separate, rust-coded, password-confirmed, and explicit about consequence.

2. Assumptions and boundaries

3. Severity-ranked audit and closure

ID Severity Before Repair Status
G-01 P1 Founder tools formed one 58rem dark panel with no location model or task hierarchy Added rail navigation, a foundation hero, five semantic work regions, and a light continuous work surface Closed
G-02 P1 Master operations HTML stayed in a fixed three-column layout and overflowed narrow screens Rebuilt as a semantic primary queue plus supporting rail, then recomposed to one column Closed
G-03 P1 Landing ambient movement and a static name field implied interaction and shared state Removed continuous decorative motion and replaced the false field with a labelled product fact and one real CTA Closed
G-04 P1 Landing hero implied unavailable mail, domain, billing, and Operator capability Put the beta boundary in the first screen and labelled planned capabilities at point of mention Closed
G-05 P1 Founder layout overflowed at 200% text because rem-based rail and column minimums competed Bounded the rail by viewport width and changed task layouts to content-responsive wrapping Closed
G-06 P2 Repeated content relied on card borders for most grouping Replaced card soup with proximity, headings, alignment, dividers, and common region only where scope is independent Closed
G-07 P2 Status meaning depended heavily on colour Added words and distinct dot/symbol shapes; zero and unavailable states use explicit sentences Closed
G-08 P2 Founder navigation always marked Foundation as current Current section now updates on activation and viewport intersection Closed
G-09 P1 Native invalid fields focused correctly but left no persistent, programmatically associated explanation Added plain-language live status, aria-invalid, and reversible aria-describedby association Closed
G-10 P1 Second-tab email verification left the first protected Firestore read on a stale pre-verification token Force-refresh the verified token before protected access and keep failure recoverable on the verification screen Closed
G-11 P1 Public lead-deletion submission wrote successfully and then crashed because its result region was outside the queried form Moved the live result into the form and added a shipped-shell regression contract Closed

No open P0 or P1 defect remains in the reviewed implementation.

4. Semantic relationship map

Landing
  product promise → current beta boundary → system model → planned parts → ownership → beta CTA

Founder workspace
  company orientation
    ├─ foundation: company record + founder bundle
    ├─ website: readiness → draft fields ↔ private preview → publish + releases
    ├─ CRM: analytics summary → leads + deletion requests
    ├─ access: invite → pending invites + active members → plan details
    └─ handback: export | separate destructive removal → diagnostics

Operations prototype
  morning queue
    ├─ primary: foundings ordered by attention
    └─ supporting: service rails + workload evidence

Source order, visual order, heading order, and keyboard order follow these maps.

5. Gestalt conflict map and redesign rationale

Principle Conflict Applied rule
Emergence Workspace purpose appeared only after reading a long sequence Company name, foundation, primary action, and readiness summary now form the first perceptual unit
Proximity Labels, controls, previews, and releases had equal spacing Field groups tighten internally; sections and independent scopes receive larger separation
Common region Nearly every list and subsection was boxed Strong containers are reserved for preview, invite scope, export, warning, and prototype panels
Continuity Desktop columns and mobile flow did not share a reliable path DOM, visual, and focus order now match; columns stack without reordering
Figure–ground All founder content lived on one dark surface Aubergine provides orientation; the light interior carries sustained work; citron marks the next action
Similarity and invariance Statuses and list rows varied locally One readiness row, activity row, pill, button, field, and section-heading grammar is reused
Common fate Decorative elements moved without representing state Ambient motion and the marquee were removed; reduced-motion handling remains for real loading feedback
Prägnanz Repetition and borders increased interpretation cost Redundant wrappers were removed while preserving labels, state, consequence, and escape paths
Ambiguity control Prototype actions and future features looked live Prototype controls are disabled and explained; roadmap capability is labelled where it appears

6. Page-region architecture

7. Component and token system

The master type, colour, spacing, shape, and motion roles remain defined in docs/DESIGN_SYSTEM.md. This pass added the perceptual grammar there. Repeated variants are limited to primary, secondary, quiet, disabled, and destructive actions; ready, pending, and attention status; readiness and activity rows; field groups; and dark versus light region roles.

8. Responsive transformations

Tested widths: 1440×1100, 900×1100, 390×844, and 320×700. Tested 200% root text size at 1280×900 as well as 320px equivalent 400% reflow. All three pages report zero horizontal page overflow.

9. Accessibility implementation

10. State and content-stress behavior

11. Before-and-after evidence

Local Playwright evidence is stored under output/playwright/:

Surface Before After
Landing gestalt-baseline/landing/ gestalt-after/landing/landing-desktop-final.png, landing-mobile-final.png
Founder workspace gestalt-baseline/hosted-user/ gestalt-after/user/user-desktop-final.png, user-mobile-final.png, user-text-200-fixed.png
Operations gestalt-baseline/admin/ gestalt-after/admin/admin-desktop-final.png, admin-mobile-final.png

The before/after sets use the same representative content. Thumbnail review shows a stable dominant region and scan path on every surface; alignment and group-boundary review show no competing major grouping cue.

12. Validation results

100-point score

Category Score
Product and task clarity 11/12
Information hierarchy 11/12
Grouping accuracy 15/16
Affordance and state clarity 11/12
Figure-ground and visual accessibility 9/10
Consistency and invariance 9/10
Flow and continuity 8/8
Simplicity and cognitive economy 6/6
Responsive and content resilience 7/7
Programmatic accessibility 6/7
Total 93/100 — strong

13. Open risks and exceptions

These are P2/P3 validation or product-readiness risks, not unresolved structural or critical accessibility blockers in the reviewed surfaces.

14. Migration and regression plan

  1. Keep Lycato Design.zip and BRAND.md as visual and verbal authorities; apply the perceptual grammar in docs/DESIGN_SYSTEM.md to new regions.
  2. Preserve the hosted workspace element IDs used by app.js; add tests when an ID or workflow changes.
  3. Keep the operations concept under unshipped/ until the backend boundary above is enforced and tested.
  4. Run pnpm test, pnpm typecheck, pnpm docs:build, and targeted browser checks after layout or token changes.
  5. Recheck 1440, 900, 390, 320, 200% text, keyboard focus, reduced motion, zero/loading/error/success states, and long content before release.
  6. Treat new continuous decorative motion, false card affordances, unlabelled roadmap claims, and fixed multi-column minimums as regressions.