Real components.
Real tokens.
The reusable pieces the refract SaaS UI is built from — every one rendered here from the same tokens.css Ben approved, not a spec sheet. Light editorial canvas, cinematic film as the only dark, a crisp monospace receipt wherever a number is a verified fact.
consumes → products/refract/brand/tokens.css · 0-JS · every number below is a labeled sample, no real render yet
The receipt — the signature element
The one component you can't screenshot the product without. Two states: a verified run (stamped, real cost) and a live run (ticking, honest — never a fake bar). Mono type = "this is a fact." Crisper corners (--radius-r) than any other surface.
Cinematic frame — output + receipt together
The full-bleed film frame is the only place the system goes dark, and only as content, never as UI chrome. The receipt prints onto the output — the wow and the differentiator are the same object.
Template-wall card — kill the blank canvas
Onboarding opens on a wall of these, not an empty prompt box. Each is a finished-looking frame with its sample receipt already on it and one action — make free →.
Cost-meter — the honest counter
Live elapsed + true cost accruing, and a calm daily free-tier counter. No dark-pattern urgency, no expiry games — the meter staying real IS the marketing.
Buttons
Ink primary (the confident default), ghost secondary, seal-green for the "verified / keep it" moment. Soft --radius-sm, warm hover lift.
Soft account-gate — asks only after the win
Appears only when the user chooses to keep / download / full-render. Trades an account for a thing they already made and want. Email or Google, still no credit card.
Keep this film and its receipt
Make an account to save, download or run the full render. No credit card — your free tier stays free.
✓ your film · 1m12s · $0.00 (free) · sampleno credit card · cancel anytime · your receipt stays yours
Fields · tags · honesty markers
The small system parts. The honesty marker is a first-class component — any illustrative or unconfirmed value wears one, per Ben's rule.
Tokens — the source values
Everything above reads from these. The whole palette is warm and light-first — the deliberate opposite axis from prism-site's near-black Glass Box.