← Back to the screen

Design system portfolio

Cadence, in material design 3 — the record

The four direction lines behind this page, the generator command that produced its tokens, and the pairs it was measured against.

A community music school's day view. Ines Ferreiro teaches cello and musicianship at Whitethorn; this is her Friday, read on a phone while she walks between the studios.

Direction

Archetype. Feed. One time-ordered column, unbounded, read top to bottom.

Data stance. Prose-first. Each card opens with a sentence written from the record. The times, rooms, and names sit under it as evidence, in a definition list.

Density. Comfortable, touch-first. 48px day marks, 40px controls inside a 48px hit area, 8px between cards, one feed column at every width.

The bold thing. Shape. The selected day mark morphs from a circle to a 16px rounded square on the expressive spatial-fast spring. A card's corner radius then states what the lesson needs: 0px taught, 12px settled, 28px in progress. A card holding an open decision rounds its leading edge to 28px and cuts the trailing edge to 0px, so it is the one lopsided card in the column, and none carries a border.

Adaptive. The week is a date strip above the feed on a phone, each day carrying a dot where there is something on it. From 940px it changes component to a leading-edge drawer that spells the count out, which is what M3 asks of navigation across window size classes; the feed holds its 664px measure beside it and the whole composition centres, which is the constrained measure M3 asks for at extra-large.

Why this product suits this system

Shape is the system's most underused lever. It is also the one thing here that has to read at arm's length, in a corridor, without being read as words. M3 Expressive is the only system here that ships a spring scheme with real overshoot, beside a corner scale documented as a personality dial. State carried by radius is orthodox here, and would be a hack anywhere else.

The expressive scheme also moves the primary a third of the way round the wheel from the #4F5B92 seed. A slate-indigo seed became a green nothing else here owns.

Generators

md3_palette.py "#4F5B92" --scheme expressive              # tokens.css, generated, never hand-edited
md3_palette.py "#4F5B92" --scheme expressive --contrast   # 30 pairs, both themes, all pass
md3_spring_css.py --scheme expressive                     # the linear() easings and their durations
md3_spring_css.py --table                                 # damping, stiffness, duration, overshoot
md3_dimensions.py --type --css                            # the 15-style type scale
md3_dimensions.py --shape --elevation                     # the corner and elevation ladders
md3_dimensions.py --components                            # component heights, icon sizes, radii
md3_dimensions.py --untokenized                           # the eight values that are not tokens

The hard states

The open decision. Three cards on Friday need one: a third time change, a room clash with the string sectional, and a make-up with nowhere to go. Each states the facts a teacher needs to settle it. Each resolves in one control, morphs to the settled radius, and offers Undo with focus moved onto it.

The empty day. Sunday, reached from the day rail. Whitethorn shuts, so the panel names what is still outstanding rather than saying nothing, and offers the one action that clears it.

Both resolve on whichever day the reader is standing on: the same decision is rendered on more than one day, and the settle takes the instance that is on screen rather than the first in the document, so focus never lands in a hidden panel. The outcome sentence is also announced through a role="status" region, because moving focus to Undo says a button appeared and never says what happened.

The long-name case runs through the live day rather than a staged row. Marguerite Villanueva-Oyelaran appears in a lead sentence, in an evidence list, and in another day's feed.

Measured

Deviations from the contract

None. Every colour is a role from tokens.css. Every font size is a published type-scale token, every radius a corner token, every easing an md3_spring_css.py output. The elevation shadows draw on --md-sys-color-shadow through color-mix(). In dark they drop to none, where surface tone carries the lift, as the spec asks.

audit_page.py keeps two INFO findings, apple-touch-icon-missing and manifest-missing. Both need a second file beside the page, and the contract asks for one self-contained document.