ripple

Ripple cards

A Ripple card answers one question. The reader gets the answer in a second, and everything else on the card is a true secondary fact or a control that changes the answer. The model writes data; widgets own the design; a machine and a pair of eyes check the result before anyone else sees it.

The method comes from the Anatomy skill by Ryan (MIT), which does the same for isometric drawings: load the craft rules, the map and the examples; build; render; audit; look at your own screenshots; fix; repeat until a round finds nothing. The words and the script here are Ripple's own.

The two rules that outrank everything

1. The user's data is not yours to change. Never alter a number, a date, a name, an amount or a target the user gave you (or that the card's answer depends on) to make a widget look right or to make a count reach 0. If a widget misbehaves with true data, keep the data and try another widget or another layout. If nothing works, ship the honest version and list the fault under Widget faults in your final answer.
2. Sample data stays in the past or the present. When you invent data, no date may fall after today (check the date before you write one). A "this month" card holds only days up to today; a forecast is the one place future days belong, and it says "Sample forecast".

The quality bar

A card is done when all of these hold, in both themes, at both widths:

• It is the right archetype. A trip is an itinerary, a split bill a bill-split, a report an exec-dashboard, plans a pricing-table. A primitive tree is only for what no widget does.
• The answer leads. A verdict (on the widgets that take one), a title, or a first callout says it in one sentence.
• Every number is true and formatted. Derived from state, in a stat with a format, with its currency or unit, and the same everywhere it appears.
• Nothing is cut, clipped, empty or leaked. No ellipsis eating words, nothing past the card edge, no blank box, no NaN, undefined, [object Object] or raw JSON, no error box.
• It reads at 360 px. Tiles wrap, inputs get a row, no sideways scroll.
• It is real. Fictional but specific names and numbers, never "Person 1", "Item A", lorem ipsum or a real brand with a made-up price. Dates are plausible against today.