Ben Leonard

Ben Leonard

@benleonard.bsky.social

Designer / Developer @ Oxide. Formerly Pentagram

648 followers95 following184 posts

Ben Leonard reposted

Today we're announcing our $445M Series D and announcing that we've reached profitability. Huge thanks to Eclipse for leading the round, which included participation from existing investors USIT, Jane Street, Riot Ventures, Intel Capital, Friends and Family Capital, and Counterpart Ventures.

Experimenting with a Figma plugin that generates two overlapping aligned grids. A 12-column layout grid and a full-bleed ASCII grid so that illustrative text and content are aligned to the same baselines.

Ben Leonard reposted

The poster of this year Lyon's Algorave is out ! Printed using risograph thanks to Eidamned and Ralt144mi. If you are in France around May 2nd, book the date for a blast of a night with 44 artists for 12 hours of live coding performances ! #textmode #pixelart #poster #livecoding #algorave

Animated ASCII illustrations for solutions pages. Previously I had the ASCII completely separate and it was never clear whether to use the faux UI illustration or the ASCII but blending the two becomes a bit more interesting.

The benefit of doing these directly with HTML elements is you can have them rearrange responsively, and having them static if use has reduce motion enabled.

Interactive 3d explorer with React Three Fiber. Worked with an artist to fix the topology and reduce the size of the CAD model. Custom LUT to more closely match the colour grade of the renders.

View full thread

Swapping the rack image in and out with an aspect ratio container query. Using regular width queries wouldn't work here because we're locking to the viewport height. I also change the gradient angle to avoid overlapping too much with the main heading.

Reusing the dynamic connecting line code I had written previously that connects two elements responsively. Also uses an animating SVG gradient to do the pulsing line effect.

The height of this container is responsive but I wanted to create a `#` border without any partial characters. Discovered I could use `round(up, 100%, 1lh)` to round up to the nearest multiple of the mono char line height.

View full thread

Starting with a simple palette generator. I recreated the existing colour steps with OKLCH and extended down into brighter lightness. Both dark and light themes driven by the same base tokens. Using a hue shift at the darker end to have it blending well with the background.

Since we were already using semantic tokens, by just adding `data-theme="light"` the light theme works 95% out of the box. With a few exceptions in places using `light:` variants in Tailwind.

For those doing any sort of semi-automated colour or theme management – any workflow recommendations? Fixed contrast ratios results in dull green/yellows, but something like HSLuv washes out the other colours. Any approach better than rough generation then manually nudging by eye from there?

View full thread

The hardest part, perhaps unsurprisingly is the typography. Inspired by the capsize library, it trims the top and bottom space out of the title. Then we can set the leading and type size as a multiple of grid cell height, which itself is sized in relation to the ASCII char size