Cut into parts.
The shader builds the mark from six blocks: the ball, the ring in four arcs, and the disc. The ball orbits the ring, and the ring and disc reshape around it.
One question.
Cut in glass.
The devutils mark is a Q that became a graph node.
It was drawn for ATFQ, and here it is rendered as glass in a shader.
WHERE IT COMES FROM
Born as a question.
Kept as an instrument.
The mark was first drawn for ATFQ, “Ask The F*cking Question”, a collaborative computer-science learning platform built around the questions to ask before the answers. The brand concept, the logo, the interface mood and the Figma prototype were made in-house. atfq the terminal companion inherited the name, and devutils inherited the mark.
- Geometric clarity.
- Only circles and tangent lines, so the mark scales from a 16-pixel favicon to the 3D hero without redrawing.
- Open-source minimalism.
- Clean and technical, in the visual language of the developer tools it sits beside.
- Functional abstraction.
- It still reads as a Q, and it also suggests a graph node, a technical diagram and an eye.
THE MARK / ANATOMY
A Q, a node,
an eye.
Four parts, each with one meaning. The tail of the Q is not a stroke: it is a second circle linked to the first, like an edge in a graph.
- 01 / RING
The question.
The outer circle is the question at the centre of the mark: open, universal and accessible.
- 02 / SATELLITE
A node in a graph.
Instead of a classic tail, a small circle attaches to the ring. One good question connects many areas of computer science.
- 03 / DISC
An eye.
The large inner circle makes an eye shape: vision and focus, the ability to see through complexity.
- 04 / ORBIT
Movement.
The circles sit on an orbit, which suggests discovery: learning as a path you follow, not a pile you accumulate.
THE GLASS / RENDERED, NOT DRAWN
A mark you can
push around.
On the site, the mark is not an image. It is a slab of glass, raymarched in a plain WebGL shader, drawn only in the square around it, and refracting the lights behind it.
It answers only up close.
Every shape moves slowly on its own. Near the pointer, the blocks turn into bubbles and drift away from it, then settle back.
It follows the page.
It sits on the hero, slides behind the frosted panels as the page scrolls, and returns for the closing call to action.
It degrades to the SVG.
Without WebGL, the static mark.svg takes its place. With reduced motion, the glass stays still. The page never depends on the 3D.
ONE SHAPE PER TOOL
Same glass.
Different instrument.
Each tool page renders its own glass shape, with the same material, light and motion rules. The shape shows what the tool does.
?01 / ATFQ · HOME
The mark
The original Q, for the org and for atfq: ball, ring and disc, pushed away by the pointer.
◎02 / OMNISCIENT
A lens
A sphere inside three rings, each turning on its own axes. Near the pointer they line up face-on and concentric, like a lens coming into focus.
⧉03 / DISTROPROOF
A target matrix
Nine glass cubes, one per target, and a bead (your program) that hops from one to the next. The pointer spreads the grid and lifts the cube under it.
▥04 / XPAC
A graph becoming a plan
Five packages joined by rods, drifting. Near the pointer they stack into one neat column and the rods disappear.
◰05 / VMANYWARE
A definition and its instances
One glass cube that breathes. Near the pointer, instances bud from it like liquid, drift apart, then melt back into the one definition.
COLOUR / ICE TO VIOLET
Near-black ground.
Cyan to violet light.
The light comes from one ramp, ice to violet, used for the mark’s gradient and the tool colours. The tools sit on it in the order of the flow, from Omniscient at the kernel end to VMAnyware at the homelab end.
Ground and text
- Ground
#050507Page background and theme colour - Text
#f0f0f5Headings and body - Muted
#9696a5Secondary text - Cyan
#82e9ffFocus rings, prompts, accents - Purple
#b7a0ffSecond accent
The mark’s gradient
- Ice
#e6fbffTop left of the mark - Haze
#c9d4ffMiddle stop, at 55 % - Lilac
#c3a8ffBottom right of the mark
The tools, in the order of the flow
- Omniscient
#9cf5ffObserve - ATFQ
#8fdcffExplain - distroproof
#96b9ffVerify - xpac
#aea0ffReconcile - VMAnyware
#c38affProvision
Tokens in src/style.css; tool colours in src/tools.ts, the one file every page reads.
TYPE AND SURFACES
Tight headings.
Monospace instruments.
The same art direction as Omniscient’s first site: sans-serif for what you read and monospace for what the machine says.
| Element | Rule | Where |
|---|---|---|
h1, h2 | Inter, tight negative tracking: semibold titles, medium section headings | Hero and section titles |
eyebrow | Monospace, 10–11 px, uppercase, wide tracking | Section labels, card indices (01 / LABEL), HUD text |
code | System monospace, ui-monospace first | Commands, terminal captures, values |
.glass | Frosted panel: backdrop blur, 1 px light border, soft light following the pointer | Cards, terminals, tables, install blocks |
radius | 18 px panels · 12 px controls · 6 px chips | Every surface |
motion | Reveal on scroll, staggered by 80 ms; none with reduced motion | Every section |
Write backdrop-filter without its -webkit- twin: the CSS minifier adds the prefix itself, and given both it keeps only the prefixed one, which Chrome ignores.
USE THE MARK
One file.
Every page.
Use the mark from one source, public/mark.svg, everywhere the logo appears. Do not copy it.
IN A PAGE
<img class="logo-icon" src="/mark.svg" alt="" />