A prop firm’s brand, read from its CSS and built out: system, type, motion, guidelines.
No brief came before the interview, so I set my own: learn the brand as I would on day one, then build what that day needs.
- Read the brand from the live CSS and wrote the strategy sheet
- Designed the system, the wordmark, the typeface and the switcher in Paper
- Directed the build in Claude Code and checked every page in the browser
- FOR
- Tradeify, a futures prop firm
- ROLE
- Design + build, solo
- WITH
- Claude Code wrote the code under my direction; no one at Tradeify was involved
- YEAR
- 2026 · September to October
61 glyphsone display face, cut from the wordmark
13 pagesthe web brand guidelines site
Read the brand before touching it
- The brand kit labels each value as read from the live CSS, inferred, or ours.
- The research report runs 24,738 words across twelve firms and ten exercise shapes.
- I noticed one older button style with three corner radii on secondary pages, and the homepage has its own.
Build the system the way a person would
- System v2 keeps Mona Sans, the green and the dark canvas, and rebuilds everything else.
- Two dry runs finished at T+0:15 and T+0:10, at agent pace, with every figure a placeholder.
- Ten exercise comps answered the ten likeliest briefs, and no brief ever came.
- The guidelines site converts the Paper design at 1:1 and adds the interactive rows.
AI gave options; the rules did the judging
- Each sign got four image-model options, twelve in all, and one script fitted each pick to the grid.
- The 247 and FX product colors come from the live logos, and only the TV lavender is ours.
- The log holds 343 decisions from the study, each with the option it rejected and the reason.
- I deployed nothing, and the code lives in the prep repo beside the log.
THE GUIDELINES SITE — 13 pages, built from the Paper design. Independent study, not commissioned by Tradeify.
THE PROPOSED LOCKUP IN MOTION — I spotted the timing faults by eye; the retiming against the video frames was done in Claude Code.
- LEARNED
- The first pass landed the mark with a bounce the video does not have.
- DECIDED
- Match every keyframe to the video, frame by frame; the resting state is the finished logo.
THE STRATEGY SHEET — written from the research before any pixel. Nobody at Tradeify asked for it.
- LEARNED
- Every firm in the category renders on black or near-black; four of the twelve use a green accent.
- DECIDED
- Own rules that stay put as the position, and make them visible on every surface.
DESIGNED · BUILT — drag.
Plans stay in type: Growth · Select · Lightning
ONE PILL, FOUR PRODUCTS — cut from the wordmark’s own measurements.
- DECIDED
- Show one product at a time; the tile with every lockup at once was reverted the same day.
TRADEIFY DISPLAY — 61 glyphs on the wordmark’s construction: 8 from the wordmark, 7 from the pills, 46 new.
THE AT SYMBOL — Claude Code drew and vectorized two versions that missed; I generated four image-model options, picked the closest, and a script traced it onto the grid.
- LEARNED
- The OpenAI edits kept the face’s weight and chamfers best.
- DECIDED
- Trace the pick and snap every edge to 0, 45 or 90 degrees before it joins the font.
Ink on the pill: 9.81:1
Futures green · on-brand ink
Lowercase letters, figures and signs, up to 12 characters.
7 / 12
Try a name here. A new product's pill still needs the brand team's sign-off.
THE PILL EDITOR — type a name, pick a color; the pill is set in Tradeify Display.
- DECIDED
- A name with a descender dips the pill’s bottom edge, so three quarters of the stem shows.
THE SYSTEM — brand green on interactive elements only, two weights, three radii, an 8pt grid.
MERCH — generated mockups, the person invented; the proposed lockup composited on by a script.
THE FOOTER, PROPOSED — the grid under the links, the wordmark at full width. Legal text and the rating badge left out.
- Values taken from a live stylesheet are a hypothesis; the labels read, inferred and ours keep them honest.
- A generated option is only as good as the rule it has to fit; the grid did the judging.
- Prep that produces real artifacts outlives the interview it was made for.
Greyt Angels
From 86% bot traffic to two clicks to a retired racing greyhound.