Design assets for SaaS · built in families
Living cards, in families.
Dynamic UI cards built the way a foundry builds a typeface: one shell carries the method, a contract names what varies, and every member proves it. Thirteen explainers share one anatomy. 22 device status cards share one clock. Ten runs walk one canvas.
Every card on this page is the real component, running.
- 5
- card families
- 51
- family members
- 103
- gallery cards
- 18
- written laws
How a family works
A family is a methodology with proof attached.
A single excellent card proves its author can make one. The moment a second concept wears the same anatomy, the card splits into the parts that did not change and the parts that did — and every further card costs a data file.
01
Shell
The anatomy and every interaction, as a component whose defaults enforce them. The level ladder, the trace, the replay — identical on every member.
02
Contract
What varies, written down. A schema when the variation is data; typed props plus a derivation rule when what varies is what happens next.
03
Member
One module that satisfies the contract, plus one figure — the signature element. The 13th explainer cost one file and one roster line.
The families
Five so far, each with its own page.
Tracks
n segmented lanes × one axis × one probe
What does this shared position mean in each lane, and what changes when I act?
Explainer
one concept × four levels × one stage system
What is this idea, at my level — and which part of the picture is which part of the formula?
Status
one shell × n state machines
What is this machine doing right now, what happens next, and what can I do about it?
Run
one graph × one clock walk
What is this process doing right now, in what order, and what has it cost so far?
Rate
one share × n windows × one target
Where does this rate stand right now — over the window I choose, against my target, against everyone else?
Explainer family
One anatomy, thirteen concepts.
Switch the concept. The ladder, the trace, the chart and the scale stay; the stages, the figure and every word change — because nothing but the data module did.
Neural Networks
Factory Workers
Passing little notes down the line
Imagine a room full of tiny workers holding strings. When a cat picture comes in, the first workers shout what they spot — pointy ears! whiskers! — and pass notes to the next row. The last row reads every note and yells the answer: cat! Each time they get it wrong, they swap a few strings around so the notes come out better next time.
It's a team game that gets sharper with every round.
ŷ = σ(w₁x₁ + w₂x₂ + w₃x₃ + b)
Perceptron
1958
~1K PARAMS
CNN
1989
~1M PARAMS
LSTM
1997
~10M PARAMS
Transformer
2017
10⁸–10¹² PARAMS
Parameter bars are log-scale — each step is roughly 1,000×
Status family
One clock, 22 state machines.
Each card is admitted for its mechanism — a consumable running out, a fault hijacking the primary button, hysteresis — and every word on it is derived from its state. Open the “···” menu on any card to jump between its states.
Latest · v0.102.11 · release 144
The Musk loop
A new architecture diagram: one reading of where Musk's companies are converging, with the legs that do not exist yet drawn dashed.