The panel at the top of the Design Engineering index is an American Standard Code for Information Interchange (ASCII) density field. It started from one piece spotted in the CollectUI gallery: an “ascii experiments” branding study by Bakers Studio, in which a small serif wordmark sits on a blurred color photograph overlaid with a grid of monospace characters. We did not copy the piece, its wordmark, or its colors. We took the technique apart and rebuilt it under Velofy’s design rules. The same component now textures the page headers and project cards across the site.
First principles
Shading with type rests on one fact about seeing. At reading distance, the eye averages a small area into a single tone, and that tone depends on how much of the area is covered by ink. Print halftones work the same way.
Monospace type supplies the areas. Every character takes the same width, so a grid of characters is a grid of equal cells. Each glyph covers a different share of its cell: a period covers almost nothing, and an @ covers a lot. Sort glyphs by coverage and you have a tone scale drawn in one color.
Three things follow.
- The ramp sets the tone steps. The ramp below has 14 characters, so the field has 14 tone steps, one of them blank.
- The color can stay flat. Coverage does the shading, so nothing has to be blended.
- The field needs enough cells. Tone only reads when there are enough cells for the eye to average, which is why phones get a taller panel.
What the original is doing
The composition has four layers, and only some of them transfer.
- A blurred photographic color field. Warm rust moves into cool lavender with soft bokeh. This layer is a gradient by nature, and the Velofy version keeps to one flat color, so we dropped it.
- A glyph grid used as halftone. Monospace characters are chosen by local brightness: sparse marks such as
.and:for light areas, heavy ones such as8,B,M, and#for dark. Density follows a diagonal band and falls off toward the edges. This layer carries the idea, and it needs only one color. - A small centered wordmark. A lowercase serif, much smaller than the canvas, sits in a calm area of the field. The effect comes from scale contrast: a quiet word inside a busy field.
- A portrait card with soft corners and generous margin. We kept the generous field and set the corners to our 4px radius.
The Velofy version
The field is drawn on a canvas in Fragment Mono, the monospace face the site uses, in a single flat color: dim gold glyphs on the page’s own background, in both the dark and light themes. Tone comes only from which glyph is drawn. The ramp is .:-=+*o#%&8B@, from empty to heaviest. No color is interpolated, so the field reads as shading while using one color.
Each cell’s glyph comes from three inputs:
- Layered value noise. Three octaves at 0.6, 0.3, and 0.1 weight give an organic, cloud-like variation that drifts very slowly.
- A diagonal band. Density rises along the line from lower-left to upper-right, as in the original.
- An edge falloff and a quiet zone. The field thins toward the frame, and an ellipse sized from the label’s measured footprint is cleared so the wordmark always reads.
The label is set in Switzer, the site’s display face, at a size well below the panel. The original used a serif; ours follows the site’s type but keeps the original’s scale contrast.
Constraints we held
- Flat color only. Glyph choice makes the shading, and nothing is blended between colors.
- Motion that respects people. The drift is slow, stops when the panel leaves the viewport, and does not run at all under
prefers-reduced-motion. On card grids the field draws one still frame and moves only while the pointer is over the card. - Decorative, so hidden. The figure is
aria-hidden, and the page heading already carries the meaning. - Responsive by construction. Glyph size scales with panel width (9 to 12px). On phones the panel switches to 4:3 so the field keeps enough rows to read as texture.
- No page cost beyond one small script. There are no images to load. The field is computed on the device.
Why this works for Velofy
Velofy is an applied artificial intelligence (AI) and security lab, and it publishes a lot of text, much of it technical, with code, labels, and data set in mono. A texture made from the same characters as the content is native to the site rather than decoration pasted on. It also shows the point this section keeps making: a design system is a set of constraints, and the interesting work is expressing an idea inside them. The original needed a photograph and a gradient. The rebuilt version needs one color and a font the site already ships.
Credit
Technique inspired by Bakers Studio’s “ascii experiments” branding study, as featured on CollectUI. The “branch” wordmark and the original imagery belong to their owners and are not reproduced here.