It turns plain English into a strategy, backtests it against real history, and shows you honestly how it would have gone, wins and losses alike. This page is the living design for what we're building.
Screens 1 and 2 create a strategy, 3 and 4 watch it run, 4b shows losing and never-trading, 4c runs one strategy across several symbols, 5 optimizes, 6 is the shared board, 7 is someone else's strategy, 8 is your private list, and 9 is the # bar. One note on the bottom tab bar in these frames: in the shipped app it appears only when hash is installed to your home screen. In a browser tab the top bar carries icon nav instead, so we never stack a bar on the browser's own chrome.
The rule: motion only where something is genuinely happening. The AI speaking, money moving, work progressing. Everything else stays still. All demos below are live; everything respects prefers-reduced-motion.
The brand glyph is the AI's voice. While the model streams, it pulses word by word like speech, following the text as it arrives. Idle, it breathes slowly. It never talks when nothing is streaming.
scale pulse 90ms / breathe 4.5sBuys the 20/50 crossover.
When the model commits a strategy, the card scales in and its border flashes emerald once: the moment it starts existing. Creation events only.
450ms spring + border flashStats never just appear. They count up to their value on load and on every update. Tabular mono means zero layout jitter while counting.
800ms ease-out · tabular-numsProgress bars sweep light while a backtest or optimization is actually running. The shimmer stops the instant work completes. Stillness means done.
1.6s sweep, only while runningThe activity heatmap fills column by column, left to right, in about 700ms. Six years of trading replaying in under a second.
per-column 12ms staggerThe equity line draws left to right, green above your starting capital and red below it, switching at the crossing. During a live run the endpoint dot pulses softly. The data is the motion.
900ms draw · endpoint pulseAlso kept from the home page: the typewriter hero and blinking caret. Deliberately not used: page transitions beyond a 150ms fade, parallax, hover lifts, skeleton shimmer waves. The quiet is what makes the # feel alive.
The visual system in four rules-of-the-house. Everything on this page, and in the app, derives from these. Flip the theme toggle to see the same 12 tokens carry both modes.
The prompt is the product. Every screen exists to type into it or read what it produced. One idea per screen, one primary action.
Quiet by default. Color and motion appear only where something real happens: money, progress, the AI speaking. 90% of any screen is four neutrals.
Numbers are sacred. Every digit is mono and tabular, aligned, honest. Losses render as prominently as wins.
Mobile is the design. Desktop is the same components given room, never a different app.
Plain English. "Breeding variations, keeping winners", never "genetic hyperparameter search."
Two faces: a system sans for prose and UI (Geist Sans in the app), and the mono (Geist Mono) for the terminal side: numbers, commands, labels, the # itself.
4px grid. Screen gutter 16 (mobile) / 28 (desktop). Card padding 12–14. Section rhythm 20. List row gap 8. Stat grid gap 8–10.
Radius follows size: chips 999 · buttons & tiles 12 · cards 14 · prompt box 16 · phone shell 34. Nothing in between.
Borders, not shadows. 1px in two tones (border / border-soft) does all separation; shadow exists only under the device frames on this spec page.
Touch first. Targets ≥44px, primary action within thumb reach (sticky bottom bar), wide content scrolls in its own container. The page never scrolls sideways.
Neutrals do the work. Ground, card, border: a cool near-black ramp, or its light mirror. Every grey leans slightly cool, on purpose.
Emerald means profit, red means loss. Never decoration, never branding. If it's green, money went up.
One action color: the inverted foreground. White on black in dark, black on white in light. States are soft tints, never solid fills.
The same facts, in the same order, on every surface. A strategy's name never contains a symbol and its rules are symbol-agnostic. Symbols are where it runs, shown as chips or a small meta line.
Strategy row: name · symbols · timeframe · return % · win rate · trades.
Trade row = a transaction, in time order. The whole row is one baseline grid, so all three columns align on both lines. Left: entry date over entry time. Middle: symbol over the position line L 112 @ 482.10. Direction is a quiet bold letter, not a badge; a colored box outweighed its importance, and Side is spelled out in the detail. Right: $ over %. Tap expands six cells: Entry, Exit, Size, Held, Side, Fees, with dates faint under the prices.
When there are many of something, show one. The latest item sits on top, the edges of the rest peek beneath, and the count says how deep the pile goes. A stack tells you "there are 41 of these" without spending a screen on them; tapping opens the full list.
Nothing is redesigned. The tab bar becomes a top nav, cards become a grid, trade rows become a table. Two representative views below.
The two desktop mockups need a wide screen. Open this page on a desktop to see them.
Buys when the 20-day average crosses above the 50-day; sells on the reverse cross.