How AlgoTrada looks, reads, and holds together.
One system across marketing, the cockpit, and the Skydweller futures engine. Everything here is drawn from the live design tokens the product ships with — so the reference can never drift from what’s deployed. The written companion is BRAND.md.
The decision layer of capital
AlgoTrada is calm, evidence-driven, and institutional. The feel we're after sits between a research institution and a precision instrument — Bloomberg-grade credibility rendered with Stripe-grade restraint. Confidence, not hype. Evidence, not promises.
Your money stays where you keep it. We say what the system did and why.
Rules, gates, and thresholds — never vibes. Numbers are tabular and exact.
Cross-market correlation and self-tuning models, explained in plain English.
Cream canvas, generous space, one leading accent. The data is the drama.
Logo & the cubicle mark
The mark is a 3×3 grid — the cubicle — with cells lit in teal to signal the moment markets agree. It pairs with the lowercase 'algotrada' wordmark set in the brand face at weight 500, tracking −0.015em. Use the full lockup by default; the mark alone only in tight spaces and favicons.
- ✓Keep clear space around the lockup equal to one grid cell on all sides.
- ✓Let the lit teal cells carry the accent; the off cells stay at 10% ink.
- ✓Use the mark-only variant for favicons, avatars, and ≤24px contexts.
- ✕Recolor the wordmark or set it in a different typeface.
- ✕Stretch, rotate, add shadows, or outline the mark.
- ✕Place the lockup on a busy image without a cream or deep scrim.
Warm cream, one leading teal
The palette is light-dominant: a warm cream canvas carries the page, white cards lift the content, and a single deep teal leads every interaction. Coral adds occasional warmth; brick red, amber, and bronze carry meaning, never decoration. Gains share the teal — profit and 'go' are the same colour.
Surfaces
--bg-canvasPrimary cream. Page background, breathing room.
--bg-elevatedLighter cream. Nav / footer slabs.
--bg-cardWhite cards pop on cream.
--bg-softWarm tan. Section dividers.
--bg-tintFaint wash for hovers.
--bg-deepWarm near-black. Inverse slabs.
Ink / text
--ink-1Primary text, headlines.
--ink-2Body, secondary text.
--ink-3Tertiary, captions, labels.
--ink-muteDisabled, faint hairlines.
Teal — leading accent
--tealLeading accent. CTAs, links, gains, active state.
--teal-deepHover / pressed.
--teal-tintLarge soft fills.
--teal-bgFaintest teal wash.
Coral — supporting
--coralSupporting warmth. Use sparingly.
--coral-tintSoft coral fill.
Semantic — P&L and status
--posGains share the leading teal.
--negLosses. Warm brick red, never crypto-flashy.
--warnCaution, HOLD states. Warm amber.
--status-pendingNeutral / awaiting.
Futures accents — Skydweller context
--gb-multiSkydweller / index-futures context marker.
--gb-looseCross-pair / relaxed-gate accent.
--gb-strictBound-gate accent, shared with core.
One face, hierarchy by weight
A single brand face — Inter Variable — runs across marketing and the cockpit, the way Revolut, Stripe, and Mercury build hierarchy without switching typefaces. Headlines take weight 600 and tighter tracking (−0.02em); body sits at 400. JetBrains Mono carries every number, price, and R-multiple. Data is always tabular.
Marketing + product. Features ss01, cv11.
All numerics, tabular-nums on.
Same face, heavier + tighter. No face switch.
Cards, lines & depth
White cards on cream, 16–20px radius, a hairline border, and the faintest shadow — cream stays the hero. Depth comes from border weight on hover, not heavy drop shadows. Dividers are warm-black at 6–18% opacity, never pure grey.
Soft teal wash from the top-left corner for insight / highlight surfaces.
Warm near-black for the occasional full-bleed statement band.
Numbers, states & the P&L palette
Numbers are the product. They render in JetBrains Mono with tabular figures so columns align. Positive is teal, negative is brick red, caution is amber. R-multiples, prices, and percentages keep their sign and fixed decimals.
Skydweller — the futures cubicle
Skydweller is the futures engine (NQ / ES / YM) inside the AlgoTrada masterbrand — the same discipline applied to index futures instead of the crypto cubicle. It inherits the full palette and type system, and adds a warm bronze context marker to signal 'index futures' where crypto surfaces lead with teal. It is always styled as AlgoTrada Skydweller, never as a standalone brand.
- —Masterbrand first: “Skydweller, by AlgoTrada” or “AlgoTrada Skydweller”. Never a separate logo.
- —Same cubicle mark, same wordmark, same cream canvas.
- —Teal still leads. Bronze (
--gb-multi) is the futures context accent, used for eyebrows and section markers — not for gains. - —Language is gate-based: draw, sweep, confirmation, time, entry. Results in R-multiples, clearly labelled forward-test vs. backtest.
- —Candlestick hero imagery, desaturated and warmed to sit on cream.
A rules-based NQ / ES / YM engine. Five gates, sub-one-minute execution, flat outside its proven window.
How AlgoTrada writes
A trusted advisor, not a hype machine. Plain English over jargon. Every claim is something the system can show. Internal strategy vocabulary — genome names, gate zones, raw signal codes — never reaches public surfaces; use the friendly translators instead.
- ✓Say what the system did and why: "placed a trade when six markets agreed."
- ✓Lead with safety and control: "your money stays where you keep it."
- ✓Label evidence honestly: forward test, backtest, hypothetical.
- ✓Keep numbers exact and caveated: "past performance is not predictive."
- ✕"Revolutionary", "game-changing", "disrupting".
- ✕"Get rich", "guaranteed returns", "never lose money".
- ✕Crypto-hype tone or retail-platform clichés.
- ✕Exposing genome names, gate zones, or raw internal codes.
Accessibility & motion
Target WCAG 2.1 AA. Body text on cream and teal on white both clear 4.5:1. Never encode meaning in colour alone — pair the P&L palette with a sign, label, or icon. Every interactive element gets the visible teal focus ring, and all motion respects prefers-reduced-motion.
4.5:1 minimum for text. Ink-1 on canvas ≈ 13:1.
2px teal ring + soft halo on :focus-visible across primitives.
Reveal, count-ups, and hero drift all disable under reduced-motion.
This page reads directly from the design tokens in globals.css. The full written guide, including motion timing, spacing scale, and component contracts, lives in BRAND.md at the repository root. Questions: hello@algotrada.com.