The visual system behind Ledger & Lyle

Palette

Near-black rather than pure black, so glass panels have somewhere to catch light. Teal and indigo are the only two accent hues in the entire system — teal reads as “good number, moving the right direction,” indigo reads as structural or neutral data. No third accent color was allowed in, on purpose. That restraint is what keeps a dashboard-dense layout from turning into noise.

Typography

Two typefaces, both doing distinct jobs. Space Grotesk carries headlines and big numbers — it has enough geometric character to feel technical without tipping into gimmick-startup territory. IBM Plex Sans handles body copy and data labels because it was quite literally designed for a company that runs on data (IBM), and it holds up at small sizes in dense panels where a lot of typefaces get mushy.

Data-viz & glassmorphism

Every chart on this site is hand-built with SVG and Framer Motion — animated line paths, radial gauges, node graphs — rather than dropped in from a charting library. That gave full control over how each element draws itself in on scroll, which matters when the entire pitch is “our model moves in real time.” A static chart would undercut the message.

Panels use a glassmorphism treatment — blurred translucent surfaces with a faint teal-to-indigo gradient border — to suggest layered information sitting on top of a live system, the way a trading terminal or ops dashboard actually feels. It also gives the dark background somewhere to breathe instead of going flat.