SymbolLang · About

The idea

Infrastructure has no visual language. Now it does.

Technical systems — microservices, pipelines, gateways, data flows — are described with diagrams that take hours to build and fall out of date the moment the slide is closed. SymbolLang is a different bet: encode the vocabulary as a font, so every tool that renders text can render the diagram.

The result is a 13-glyph alphabet where each letter maps to a concept — hex for a node, arc for a bridge, dots for a stream — and two axes let you tune the energy and form of each symbol continuously, from dormant to saturated, from diffuse to unified. One file. Infinite states.

Use it to build a logo, document an architecture, design a status board, or prototype a brand identity. Anything that needs to say "this is a system" in fewer pixels.

The alphabet

13 primitives. Each one a concept.

Choose glyphs by what they mean, not how they look. Stack them to form sentences. The letters are the API; the font renders the result.

H H Hex / Node
Entity · Hub

D D Dots / Stream
Events · Messages

A A Arc / Bridge
Connection · Span

C C Chevron
Throughput · Progress

Q Q Quad
Container · Region

G G Grid
Lattice · Cluster

M M Metrics
Load · Histogram

R R Relay
Handoff · Converge

B B Bowtie
Gate · Valve

E E W Direction
Flow · Vector

N N S Direction
Flow · Vector

Two axes

Every symbol has a range. Two sliders control it.

Both axes run from 100 to 900. In Figma and Adobe tools they appear as Phase and Form. In CSS they're wght and MORF. Move them independently, or lock them together for a unified feel.

Phase

wght · 100 → 900

H H H H H

"How loud?"

State intensity. Low = dormant, idle. High = active, saturated, full.

Form

MORF · 100 → 900

H H H H H

"What shape is the story?"

Structural mode. Low = diffuse, granular. High = unified, singular, crisp.

The mental model: Phase = energy, Form = focus. A dormant distributed system is low Phase, low Form. An alert, unified state is high on both. Pick a coordinate in design space and commit to it across your whole system.

Composition

Combine glyphs to build marks.

Lay two or three glyphs on top of each other — or side by side — and you have a logo, an icon, or a diagram element. The font's parametric range means the same composition can feel technical, aggressive, or ambient depending only on axis values and color.

A

H H

Span

A · H · H

Arc bridges two nodes. The proxy doing the work between client and database.

H D

Stream

D · H

Dots thread through an outlined hex. Traffic flowing through a transparent gateway.

D R

Intercept

R · D

Relay converges on a stream. Nothing passes through untouched.

These are three of six named compositions. See the full vocabulary →

Compatibility

Works in every tool you already use.

SymbolLang is a standard OpenType variable font (.ttf). If your tool supports variable fonts — and all modern ones do — it works out of the box. No plugins, no setup.

Figma Adobe Illustrator Adobe InDesign CSS / Web macOS Font Book Sketch Framer Any modern browser

In Figma or Adobe

Add the font to your library. Select a text frame, type a letter (H, D, A…), then open the variable font panel. The sliders appear labeled Phase and Form. Drag them. Scale freely — it's pure vector.

In CSS

      /* Load once */
      @font-face {
      font-family: 'SymbolLang';
      src: url('fonts/SymbolLang.ttf')
        format('truetype-variations');
      }

      /* Use anywhere */
      .mark {
      font-family: 'SymbolLang';
      font-size: 120px;
      font-variation-settings: 'wght' 700, 'MORF' 600;
      }

      /* Type 'H' → hex node. Type 'D' → dot stream. */
    

Technical spec

One small file. A lot inside it.

The font is built from a 3×3 master grid — 9 masters across Phase and Form extremes — and compiled with fonttools. The build script is open: reproduce the font from scratch with one Python command.

Property	Value
Format	OpenType variable font (.ttf), TrueType outlines
Glyphs	13 primitives mapped to ASCII letters (both cases)
Axis 1	`wght` — Phase — 100–900 — State intensity (dormant → saturated)
Axis 2	`MORF` — Form — 100–900 — Structural mode (diffuse → unified)
Masters	9 (3×3 grid across both axes)
Named instances	5 along Phase at Form=500 (Min / Low / Mid / High / Max)
File size	~5 KB
Build	Python + fonttools — `python build_symbolang.py`
Version	v6 (current) — STAT table, GPOS kerning

License

Free to use.

SymboLang is released under the SIL Open Font License 1.1 — free to use, embed, bundle, and redistribute. You can use it in personal and commercial projects at no cost. Modified versions must carry the same license and may not reuse the reserved name "SymboLang."

Questions? Open an issue

Fancy a chat? Book a call

C

Ready to build with it?

Download the font, drop it in your project, and start typing.

Download SymbolLang View on GitHub

A generative design system,shipped as a font.