Skip to main content
Colophon

Where the design came from.

A first pass at this site used a graphite + amber palette I'd picked from memory — Bloomberg-terminal cosplay, basically. That was lazy. The current design is an opinionated take on a contemporary fintech / systematic-trading visual register — pure-black surfaces, a single saturated red accent, square- grid mosaic decoration, and a letter-spaced two-word wordmark. This page traces every decision so the work can be argued with on the same evidence.

Palette
token hex use contrast vs #000
bg #000000 page background —
surface-1 #0d0e12 cards, terminal —
surface-2 #14161c card headers, secondary surfaces —
surface-3 #1d2028 corner-grid inactive cells —
line #2a2d36 borders, dividers —
text #ffffff headlines, primary copy 21.0 · AAA
text-dim #b8bbc4 body copy on dark surfaces 11.6 · AAA
text-mute #8388a1 tick labels, metadata 5.9 · AA
accent #e62433 primary accent, CTA 4.7 · AA large
signal-blue #4f8dff secondary accent, grid motif 6.3 · AA
gain #4ade80 positive deltas, success chips 11.7 · AAA
loss #ff5266 drawdowns, negative deltas 4.6 · AA large
Typography
  • Syne display (h1, hero, system page)

    Geometric display sans, free under the SIL Open Font License via Google Fonts. Picked for the wide-tracked quality of its bold weights.

  • Montserrat UI + body

    Humanist sans, SIL Open Font Licensed. Wide adoption in financial / fintech brand systems; pairs cleanly with a geometric display.

  • JetBrains Mono tabular data, code, tickers, eyebrow labels

    Author choice. One of the few free monos with proper tabular figures and stylistic alts, which matters here for stats and code blocks.

Decisions, sourced

  • Pure black background (not a softer dark)

    Source · Author choice for maximum contrast against the saturated red accent and to match the visual register of trading-floor terminals.

    Impact · Gives the accent maximum visual punch; reads as a system-instrument register without trying to be a generic "dark mode" template.

  • A single saturated red accent (#e62433), not a Bloomberg amber

    Source · Author choice. Bloomberg amber ~#FFAD33 is the obvious cliché for this aesthetic; the saturated red sits closer to mid-2020s fintech brand systems and reads as more deliberate.

    Impact · The site does not pattern-match to a single existing trading platform.

  • Red squares as bullet markers and as a punctuation glyph in the wordmark

    Source · Author choice. The square shape is the most recognisable element of the brand, so it carries through prose lists and the inline wordmark instead of dots.

    Impact · Holds the visual identity together across surfaces without needing a logo image.

  • <CornerGrid /> motif on the home hero

    Source · Author choice. A small grid of square cells with seeded red and blue accents; lifted from a class of contemporary fintech brand collateral that uses square-grid mosaics for hero decoration.

    Impact · Most recognisable single visual signal of the site; reproduced with stable seeds so the rhythm is consistent across builds.

  • Letter-spaced "RESEARCH ■ BOOK" wordmark, not a single-token name

    Source · Author choice. Heavy weight, ~0.22em tracking, red square between halves — a treatment that reads as a composed mark without needing a logotype file.

    Impact · Lets a one-word brand carry more visual weight than the same word set in a regular caption font.

  • Mono accent for eyebrows + tick labels

    Source · Author choice. Tabular figures everywhere there are numbers; mono section labels add a "system-instrument" register that complements the corporate-minimal sans default.

    Impact · Earns its place because the site carries actual tabular data (Sharpe, returns, drawdowns) on the demo and project pages.

What I'm still wrong about

  • Brand red sampled by feel, not from a Pantone spec

    #e62433 is a saturated, slightly orange-shifted red picked for screen contrast against pure black. There is no published spec sheet behind this exact value — substitute your own colour token if you fork the site.

  • Brand blue is an eyeballed companion

    A bright #4F8DFF body-text-safe blue, sitting somewhere between a "live data" cyan and a brand corporate blue.

  • Contrast ratios are computed against pure black

    In areas where a card surface (#0d0e12 or #14161c) sits behind dim text, the ratio is marginally lower. The "AA" labels in the palette table reflect the worst-case against #000000.

  • OG cards use system fonts

    The shipped /og-default.png and per-page OG cards are rendered without embedding the WOFF2 webfonts — sharp falls back to the OS sans-serif. For pixel-identical brand match in social previews, the SVG would need to embed the fonts before rasterisation.

Why this page exists

A research engineer's job is — partly — to make decisions inspectable. If I can't show my sources for this site's palette and typography, why would you trust me to show them for a model promoted to production? The pattern is the same; the cost of one of them is just higher.