boltIconography

The site uses a small set of Material Symbols Outlined glyphs as a visual vocabulary. One icon per concept, reused consistently. The font is subsetted to only the glyphs in this table — adding a new icon to a page requires extending the subset in docs/.vitepress/config.mts.

How icons are used

• As bullets — when a list item leads with an icon, the icon replaces the disc marker and grows a touch. Wrap the list in <div class="icon-bullets">. See the audience list on the Introduction page for the canonical example.
• As section markers — pillar overview pages carry one brand-blue icon in the H1; the roadmap page uses rocket_launch (orange) and check_circle (green) as status markers.
• As table cells — the lifecycle UDFs overview surfaces a distinct icon per UDF so the table scans visually.
• In navigation — the five pillar overview entries in the sidebar carry the same blue icons used in their H1s.

Size variants

Class	Size	Use case
.icon-xs	1.0 em	Inline in dense tables
.icon-sm	1.2 em	Default — inline body text
.icon-md	1.5 em	Bullet list markers
.icon-lg	1.9 em	Hero callouts
.icon-xl	2.6 em	Page-level decoration

The bullet-marker mode (<div class="icon-bullets">) sizes the icon at 1.6 em automatically — no need to apply .icon-md.

Color accents

Used sparingly, only when the icon is making a real signal.

Class	Color	Used for
.icon-blue	PostgreSQL elephant	Pillar headers; primary brand accent
.icon-green	RDF data green	"Shipped" status markers
.icon-orange	Heads-up amber	Forward-edge status, in-flight callouts
(no class)	inherits text color	Default — body, neutral lists

The vocabulary

Pillars

Icon	Glyph	Concept
storage	storage	Pillar 1 — Semantic storage
search	search	Pillar 2 — Semantic query (SPARQL)
psychology	psychology	Pillar 3 — Materialization (OWL 2 RL)
verified	verified	Pillar 4 — Validation (SHACL Core)
build	build	Operations

Status

Icon	Glyph	Concept
check_circle	check_circle	Shipped on main
rocket_launch	rocket_launch	Forward edge / in flight
info	info	Inline metadata callout

Personas

Icon	Glyph	Concept
groups	groups	Project managers
query_stats	query_stats	Data scientists
school	school	Ontologists
code	code	Backend engineers
settings	settings	Operators

Concepts

Icon	Glyph	Concept
description	description	Turtle ingest (file or string)
account_tree	account_tree	Named graphs / IRI tree / hexastore
bolt	bolt	Speed / cache / hot path
hub	hub	Composition (OPTIONAL / UNION / MINUS)
fact_check	fact_check	Validation report

Lifecycle UDFs

Icon	Glyph	UDF
delete_forever	delete_forever	pgrdf.drop_graph
layers_clear	layers_clear	pgrdf.clear_graph
content_copy	content_copy	pgrdf.copy_graph
swap_horiz	swap_horiz	pgrdf.move_graph

Adding a new icon

1. Pick a glyph from https://fonts.google.com/icons.
2. Append the glyph name to the comma-separated icon_names=… list in docs/.vitepress/config.mts.
3. Add a row to the appropriate vocabulary table above.
4. If it's a recurring concept, sketch a one-line "used for" semantics — this is the rule that keeps future authors from re-using the same glyph for two distinct ideas.
5. If it's a sidebar overview icon, wire the ::before rule in docs/.vitepress/theme/custom.css.

Anti-patterns

• Don't decorate every line. The icon must pull weight — navigation, status differentiation, or table-row identity. Body prose is icon-free.
• Don't introduce a new glyph when an existing one fits. Vocabulary consistency beats novelty.
• Don't colour-accent without a reason. Default is inherit. Use a colour only for status (green / orange) or pillar identity (blue).