ZZ Test Client

What changed, and why

• Nine cards instead of one column. The live page is 9,724px tall on a 1,512px screen, about twelve screens of scrolling for one client. Everything above fits on one, at the same font sizes.
• Empty fields collapse. There are 28 “(not answered)” and 18 “NOT YET IMPLEMENTED” rows live, each at full weight. Here they are a count you can open. Nothing is hidden, it just stops shouting.
• Seven tabs, not nine. Clinical and Laboratory were tabs here and cards in the Summary grid at the same time, which is two routes to one thing. They are cards. A practitioner reads them while reading everything else about the client, not by going somewhere separate.
• Sections are tabs, not stacked. Summary, Clinical, Labs, Messages and the rest each render alone instead of all at once, which is most of the 9,724px.
• A client rail that persists, like Practice Better’s, so moving between clients does not mean going back to a list.
• Only actionable state is shown. “Active” and “Coaching” were cut: a practitioner opening a client already knows both. “Consent needed” stays because it blocks booking.

Rams, the look as well as the rule

• The label shrinks, the value grows. On a Braun scale the unit is 8pt and the number fills the dial. Card titles and field labels are now 9.5px grotesque caps; sessions, lessons and month are a 30px readout. You read the state before you read what it is called.
• Color is a function, not a finish. Braun put one or two colored controls on an otherwise neutral body, and each one meant something. Olive now marks exactly one class of thing: what is active or what you can act on. The selected client, the current tab, the filled meter, the primary button. Orange appears once, on “Consent needed”, the only thing that is stopped. Nothing else on the screen is colored, so both read instantly.
• Square corners, one radius. 2px on every surface and every control, no exceptions. Rounded pills and 50% bubbles were doing decoration. Avatars stay circular because a face is round.
• Segmented meters, not rounded bars. The seven pillars read as a ten-segment level scale, the DN and Audio 300 meter. A track with a rounded cap implies a continuum it does not have. Segments show a count, which is what the data is.
• Controls are one size and one shape. 30px tall, same radius, in a row, and exactly one is filled. Rams’ button rows are identical blocks where only function differs, never size or shape.
• Tabular figures everywhere. Numbers line up column to column, so “30 of 41” and “0 of 5” share a grid. The Vitsœ 606 rule: everything meets the same axis.
• Same palette, same fonts. Cream, sand, olive, deep brown. Perfectly Nineties on the client’s name and the section headings, Rethink Sans doing every functional job. All from the site, none invented.