Tickety
TT / TT-30 Enhancements
TT-35 Done

Restyle the app to the new design canvas

frontend foundation Design

The design system TT-7 established has held since the app was scaffolded, and every screen assumes it. Design has been working an alternative up in Claude Design and wants that canvas implemented in place of the current look.

The canvas is in the repository at docs/design_handoff_top_table_shell/. KB-5 now describes the direction it sets; tokens.css is the drop-in and reference-1a-plan-screen.html is the target.

Acceptance criteria

  • Tokens are taken from the canvas and defined once, the way TT-7 defined them. Nothing hardcodes a colour
  • Every screen in the app renders against the new tokens. None is left on the old ones
  • The shared components TT-7 built are restyled in place rather than replaced: button, text field, select, tag pill, panel, slide-over
  • Tabular figures survive on every number that updates. The capacity readout is the most-read component in the product and it must not jitter as you type
  • Visible keyboard focus survives on every interactive element
  • Colour still never carries meaning on its own. Every state keeps a shape as well as a colour
  • KB-5 is updated to describe the canvas, as part of this ticket

Notes

That last one is the one to hold. KB-5 is what anybody reads before touching anything visual. If the canvas lands and KB-5 still describes the old brand, the next person builds to the old look and undoes this. It is not a follow-up.

KB-6 is layout rather than look, and stands unless the canvas says otherwise.

Linked pages

Comments

No comments on this issue