Vectora — AI trading algorithms
2026
Vectora
A green-tinted dark system that treats its one accent as a light source — gradients, glows and drawn sparklines rather than filled shapes.
Delivered to
Institutional / retail algo trading
Vectora
Framework
Astro, no UI framework
System: Tokens in one stylesheet
Techniques
3
4 constants, formulas and guards
Marketing site for an algorithmic trading product. The design premise is that a single brand green behaves like a light source rather than a paint: it glows behind cards, draws the sparklines, tints the hairlines and lifts the gradients, and almost never fills a shape outright. Everything numeric is set in mono, every border is a hairline, and the whole thing sits on a green-tinted near-black that is deliberately not pure black.
Offline
Built behind an edge authentication gate as a pre-launch site, so it was never publicly reachable in the state this page describes. Claims are made against the source.
One green, used as light rather than as paint.
4.6:1
Clears AA — small labels
The documented floor of the text ramp.
9.8:1
The accent, used as light
Glows, sparklines and hairlines rather than fills.
What was built, and for whom.
Vectora
Institutional / retail algo trading
en
Marketing site plus an embedded registration flow, gated behind edge authentication until launch.
Each one starts with something that was broken.
- 01
The quietest text colour is the one that was measured
The failure
A dark interface invites a long grey ramp, and the bottom of that ramp is where contrast most often fails. Small labels get the faintest grey that still 'looks fine' to someone who designed it on a good monitor at full brightness.
The decision
Fix the floor of the ramp by measurement rather than by eye and record the reason in the token itself, so the next person to add a label reaches for a value that is already known to clear AA on this specific background instead of inventing a fainter one.
- constantsrc/styles/global.css
--text-4: #78847E; /* AA contrast (≥4.5:1) on --bg for small labels */ - constantsrc/styles/global.css
--bg #0E1512 · --green #09A165 · --green-bright #17D48B
- 02
Unlaunched is a state the deployment enforces
The failure
Pre-launch sites are usually protected by not being linked to. That is not protection — it is an unlisted phone number, and it fails the moment a URL is pasted into a chat, a crawler follows a stray reference, or a client forwards a preview.
The decision
Put authentication in edge middleware in front of the whole site, so being unlaunched is a property of the deployment rather than of everyone's discretion. Nothing renders to anyone who has not been let in, including crawlers.
- guardfunctions/_middleware.js
Edge authentication gate in front of every route
- 03
Geography is content, not a footnote
The failure
A regulated financial product cannot be offered everywhere, and the usual treatment buries that in a paragraph of small print nobody reads until they have already tried to sign up and been refused.
The decision
Give restrictions their own section in the page's component order, next to the product's claims rather than beneath the legal wall. A visitor who cannot use the product learns that while they are still deciding whether they want it.
- constantsrc/components/GeoRestrictions.astro
A first-class page section, composed alongside Pillars and Instruments
Every animation, with what it does when asked for less.
The last column is the one worth reading. “Respects reduced motion” is easy to assert and easy to skip, so where it is not true here, it says so.
Card glow and spotlight
Hover, short
Ease-out
System is authored to restrain motion under the preference; the glow is a colour change, not travel.
Drawn sparklines
On reveal
Ease-out draw
Lines render complete rather than drawing.
What it was built on, what is claimed, and what is not.
Framework
Astro, no UI framework
The page is content with a handful of interactions. A component runtime would have been shipped to animate a few cards.
System
Tokens in one stylesheet
Backgrounds, text ramp, lines, the green and its derived tints all declared once at the root. The components spend tokens; they never declare colour.
Gate
Edge middleware authentication
A pre-launch site that is genuinely closed rather than merely unlinked — see the technique below.
Claimed — and how to check it
The small-label text token is documented as clearing AA on the page background
The comment sits on --text-4 in global.css.
The whole site sits behind edge authentication
functions/_middleware.js gates every route.
Geographic restrictions are a page section, not legal small print
GeoRestrictions.astro in the component set.
Not claimed
- No traffic, sign-up or conversion figure. The site was gated; there was nothing to measure.
- No claim about the trading product itself, its performance, or any return figure shown on the page — that copy is the client's.
- No formal accessibility audit. The contrast floor is documented in source; the rest of the page was not audited.
- No live link, because the deployment is closed by design.
Tokens and structure read from the repository at the files named. Contrast notes are the source's own recorded measurements.