Every character and every diagram on this page copies on click. Paste them into Figma, Framer, Craft, or code and keep the lines connected.
Each one is already aligned. Paste into a single text layer set to a monospace font.
Folders or a sitemap, four levels deep.
Preut Design Studio
├── Studio
│ ├── PDS Website
│ │ ├── Home
│ │ └── Case studies
│ └── TypeFramer
└── Clients
├── Anzenna
├── Tensor9
└── Fixel
Same tree, a marker at the end of each row.
tickytools ├── Lattice ✓ shipped ├── TypeFramer ◐ in progress └── tickyTones ○ idea
Left to right steps with branches dropping down.
Brief ──▶ Strategy ──▶ Design ──▶ Build
│ │
▼ ▼
Positioning Ship ✓
Yes goes right, no drops down.
Draft ──▶ ◇ Approved? ──yes──▶ Ship
│
no
▼
Revise
Rounded card with a checklist inside.
╭──────────────────╮ │ Brand Strategy │ ├──────────────────┤ │ ✓ Positioning │ │ ◐ Voice system │ │ ○ Launch plan │ ╰──────────────────╯
Keep every row the same width.
┌────────────┬─────────┬────────┐ │ Task │ Owner │ Status │ ├────────────┼─────────┼────────┤ │ Moodboard │ Tim │ ✓ │ │ Wireframes │ Tim │ ◐ │ │ Handoff │ Tim │ ○ │ └────────────┴─────────┴────────┘
Progress from block characters, ten cells each.
Strategy ██████████ 100% Design ███████░░░ 70% Build ███░░░░░░░ 30%
Every tree row is a stack of 4-character prefixes followed by a name. These are the only four you need. The trailing spaces are part of each one, so copy them whole.
Build a row by adding one Trunk or Gap for each level above, then finish with a Branch or Last branch. Use Trunk when the parent still has siblings coming, Gap when it was the last one.
Tap a character to copy it. Small labels show the Unicode code point.
Light weight. The default for trees, tables, and cards.
Softer cards. Pair with the light lines.
For headers, dividers, and anything that needs weight.
Titles and outer frames.
Optional paths, soft links, drafts.
Direction, flow, and results.
Then-steps, returns, retries.
Solid arrowheads for the end of a line.
Status, bullets, and decisions. Keep these at the end of a row.
Density steps, vertical levels, horizontal levels.
Truncated lists and continuation.
Shortcuts in docs and UI copy.
Print-style marks for corners and targets.
Section breaks and footnote flags.
Footnotes, units, and tiny index numbers.
Numbered steps and callouts.
Legal marks, degrees, and measurement.
Wrap a label to make a chip out of text.
Lowercase-sized capitals for micro labels. Letters without a small cap form are left out.
Tiny type-built details that make a layout read like a spec sheet. Set them small, set them mono, repeat them on a grid, and let them frame the big type.
Ticky Boom
├─┬─┬─┬─┬─┼─┬─┬─┬─┬─┤ Brand strategy ▪ UI/UX ▪ Martinez CATick scale with labels. Zero letter spacing.
├─┬─┬─┬─┬─┼─┬─┬─┬─┬─┤ 0 5 10
Dot leaders that line values up in one column.
Typeface ·········· JetBrains Mono Weight ············ 500 Tracking ·········· 0
Blueprint corners with a figure label.
+──────────────────+ │ FIG. 01 LATTICE │ +──────────────────+
Open corners around a title.
┌ ┐
TICKY BOOM
└ ┘
Reference, revision, date, sheet.
REF 0042 ▪ REV B ▪ 2026.10.25 ▪ SHEET 1/3
Location as ornament.
38°01′N 122°08′W · MARTINEZ CA
Chips made from punctuation.
[ LIVE ] ( 04 ) { beta } ⟦ v2.1 ⟧ ‹ new › « prev » ⟨ 04 ⟩
Enclosed digits as a row of callouts.
① Brief ② Strategy ③ Design ④ Build
Progress dots with labels underneath.
● ─── ● ─── ◐ ─── ○ ─── ○ 1 2 3 4 5
Sparkline, bar, stars, and dots.
Traffic ▁▂▃▅▆▇█▇▅▃▂ Load [▰▰▰▰▰▱▱▱▱▱] 50% Rating ★★★★☆ Dots ●●●○○
Block characters with a code under them.
▌█▌▌█▌█▌▌▌█▌▌█▌█▌█▌▌█ 0042-B-261025
Superscripts in the row, key underneath.
Lattice¹ TypeFramer² tickyTones³ ────────────────────────────────── ¹ Shipped ² In progress ³ Idea
Seven rules. Repeat the glyph to any length.
──────────────────────── ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ ════════════════════════ · · · · · · · · · · · · ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░░▒▓ ◆──────────◆──────────◆
aria-hidden="true". Box-drawing characters get read aloud symbol by symbol.tabular-nums so digits line up..micro {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 11px;
line-height: 1.3;
letter-spacing: 0.08em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.micro.ruler {
letter-spacing: 0;
white-space: pre;
}
<span class="micro" aria-hidden="true">├─┬─┬─┬─┬─┼─┬─┬─┬─┬─┤</span> <span class="micro">REF 0042 ▪ REV B</span>
Most broken diagrams come from the text style, not the characters. Drag the sliders and watch the trunk.
Uses your system monospace so the lines can connect.
Lower line height closes gaps in the trunk. Past about 1.3, most fonts show breaks.
U+2500 to U+257F).├── └── │ ─ as a test. If a line jumps or changes weight, the font swapped a glyph.✓ ◐ ○ can be wider than one cell. Put them at the end of a row, not in the middle of an aligned column..tree {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 14px;
line-height: 1.15;
letter-spacing: 0;
white-space: pre;
font-variant-ligatures: none;
tab-size: 4;
}