Jim Ben & Conners
2026
Jim Ben & Conners
A site built so a rebrand is one stylesheet — with an accent measured at 2.4:1 and therefore forbidden from carrying text.
Delivered to
Retail brokerage
Jim Ben & Conners
Framework
Astro, one dependency
Styling: Four stylesheets, strictly layered
Techniques
2
5 constants, formulas and guards
A nineteen-route site for a brokerage: a home page that assembles the pitch, plus learning, markets, platform and trading sub-routes. The build's organising idea is separation of fact from markup and of brand from layout — the company's legal details live in a config file, the brand lives in a token file, and neither is ever written into a component.
Offline
A nineteen-route brokerage site. Not linked from this page; claims are made against the source.
Nineteen routes whose entire brand — and every legal fact — lives in two files.
2.4:1
Never body text
The exact logo gold. Rules, borders and icons only.
5.3:1
Text-safe
The darkened twin, for gold words at any size.
What was built, and for whom.
Jim Ben & Conners
Retail brokerage
en
Nineteen routes across four content areas, one shared section library, no CSS framework.
Each one starts with something that was broken.
- 01
The accent is beautiful and cannot carry text, so it is told not to
The failure
The supplied logo gold measures 2.4:1 on white. It is the brand, it is what the client recognises, and it fails body text by a wide margin — so the usual outcome is that it ends up on text anyway, because the rule lived in someone's head.
The decision
Ship both: the exact logo gold for rules, borders and icons, and a darkened variant measured for text, with the constraint written into the token file next to the values so the rule travels with the colour instead of with the designer.
- constantsrc/styles/tokens.css
--gold-500: #d3a157; /* exact logo gold — 2.4:1 on white, NEVER body text */ - constantsrc/styles/tokens.css
--gold-700: #8a6428; /* text-safe — 5.3:1 on white */ - constantsrc/styles/tokens.css
--ink-800 #23232b (15.6:1) · --muted #5c5c6b (6.6:1)
- 02
One file is the rebrand
The failure
Rebranding a nineteen-route site normally means finding every hardcoded hex, and the ones you miss are the ones on the routes nobody reviews.
The decision
Concentrate every brand decision — colour ramps, families, shadows, radii — into a single token file that announces itself as the rebrand file in its own header, and let the other three stylesheets consume it without redeclaring anything. The neutrals are built to carry the same cool cast as the logo charcoal rather than being a neutral grey, so the brand survives even where the accent is absent.
- constantsrc/styles/tokens.css
Header: “design tokens. THE REBRAND FILE.” - constantsrc/styles/global.css
Entry — imports tokens, base and components, and nothing else
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.
Scroll reveal
On intersection, once
Ease-out
Settled state rendered; the reveal class never activates.
Sticky header state
On scroll threshold
Short transition
Unaffected — it is a state change, not travel.
What it was built on, what is claimed, and what is not.
Framework
Astro, one dependency
Literally one: the framework. No CSS framework, no component library, no icon package.
Styling
Four stylesheets, strictly layered
An entry that imports only the other three — tokens, base, components — so there is exactly one place a new rule can go and no ambiguity about which.
Facts
One config module
Name, URLs, legal entity, contact and navigation. Editing the company's registered name is a one-line change, not a search across nineteen routes.
Claimed — and how to check it
The logo gold is documented as 2.4:1 and barred from body text
The comment on --gold-500 in tokens.css.
A text-safe gold exists at 5.3:1
--gold-700 in tokens.css.
One dependency
package.json lists astro and nothing else.
Company facts live in a config module rather than in markup
src/site.config.ts.
Not claimed
- No traffic or conversion figure.
- No claim over the logo. It was supplied; the palette is sampled from it.
- No claim over the site's financial or educational copy.
- No audit beyond the ratios recorded in the token file.
Colour values and their recorded ratios are read from the token file, which carries its own measurements.