G over and read the rest.
The wordmark is "StoryTangl" set in the body font, with a capital G turned 180°,
narrowed, and dropped onto the baseline so it reads as the lowercase g it stands in for.
The turn is the mark; everything else is typography. It is the same letter the project inverts
elsewhere — U+2141 ⅁, a turned capital G — here dressed as a g, and
the trick holds at every size from favicon to billboard.
U+2141 ⅁, and
in SVG as a transform on the glyph. The mark survives medium-shift; the transform doesn't matter.
font: Newsreader 600 · --st-wm-g-sy: 1.00 ·
--st-wm-g-sx: 0.85 · --st-wm-g-ty: -2% ·
--st-wm-g-margin: -0.065em
Different surfaces use different fonts in the underlying type stack. The g
transform is re-tuned per font so the lip lands on the baseline and the new descender matches
the depth of neighboring descenders. The three tunings below are the only sanctioned variants —
they are the canonical defaults exposed in the Tweaks → voice sliders
(scale y / scale x / shift y / margin).
The wordmark scales freely; the transform is unitless. The turned G remains legible
at small sizes because the inversion is the legibility. Below 16px the wordmark drops to
the glyph-only form (see §2).
The glyph is the wordmark's turned G alone, set bold in the wordmark font and centered.
Use it when the wordmark is too wide (favicons, app icons, social-card watermark, small UI
chrome). Square and round are equally canonical — use whichever fits the surface: square reads as
structural in dense UI and documents; round suits app icons, avatars, and circular host surfaces.
Either is fine as a default. Reach for the framed (outline) treatment only on transparent or busy
backgrounds where a fill would fight.
U+2141 · terminal · text-only
A lockup pairs one mark with a descriptor — never two marks. The glyph is the
wordmark's turned G, so setting them together just says the same thing twice.
Use the wordmark when there's room to read it, the glyph when there isn't. The
optional descriptor sits behind a 1px ink-3 rule at a 0.18em gap.
G, twice overThree families. Each family belongs to one role. No fourth family. If a context needs typographic emphasis, reach for weight or size, never an additional family. The wordmark sets in the prose family by default and falls back per §1 when context demands.
400 / 500 / 600 / 700400 / 500 / 600 / 700400 / 500 / 600 / 700
The palette is small and closed. Paper, ink, blue-pencil, burnt accent, plus three
severity tokens that round-trip with KvRow.emphasis in the widget vocabulary.
Do not add hues; if a new severity surfaces, propose an addition in USAGE.md.
The dark mode is a literal photographic negative; it is not a second palette.
Source lives at brand/assets/README-banner.svg. Reference it in README.md above the title only after the tagline is settled.
What tangl-cli prints on launch. Source lives at brand/assets/cli-splash.txt; the deployment copy is apps/cli/src/tangl/cli/assets/splash.txt.
The image GitHub uses when the repo is shared on Mastodon, Bluesky, X, Slack. Source lives at brand/assets/social-card.svg and is copied to .github/social-card.svg; rasterize outside the repo before configuring GitHub's social preview.
Docs-facing brand tokens ship via docs/src/_static/storytangl-palette.css, docs/src/_static/storytangl-type.css, and docs/src/_static/favicon.svg.
All sizes derive from brand/assets/glyph.svg. The 16×16 case drops the round mask and uses the glyph alone to preserve readability.
G · narrowed and dropped so it reads as the g it replacesG — it only reads as a g0.6em of air on every sideG and the ascenders have nowhere to breathe
In running prose, just type StoryTangl — or the ⅁ character where a turned
mark is wanted. The constructed mark belongs to the wordmark and glyph, not every mention: this is
a research project, and the name has to stay typeable.
Cynical, wry, technically precise. The writer is a research engineer with a PhD, dry humor, and no patience for marketing copy. Prose makes claims it can back up. Jokes are dry; metaphors are accurate; superlatives are rare and earned. When the project is honest about being a research platform, the writing says so without apology.
Lineage: the README, ARCHITECTURE.md, and AGENTS.md set the canonical voice. New copy lives at the intersection of those three documents. Anything that sounds like a SaaS landing page belongs somewhere else.
| YES | "the engine's real job is untangling" |
| YES | "~37 architectural iterations" |
| YES | "useful for development, not a production MVP" |
| YES | "AI agents occasionally suggest things that are actually good" |
| NO | "revolutionize interactive storytelling" |
| NO | "the world's first…" |
| NO | "unlock the full potential of…" |
| NO | emoji 🎉 in headlines |
The 180° flip is older than this engine — it carried over from an earlier worldbuilding project, applied there to a different letter. What matters here isn't the ancestry but the operation: StoryTangl means what its glyph means — a thing turned over, read differently from the other side.
USAGE.md §10. Treat it as a footnote, not a
feature; don't build the brand around it.
| path | purpose | note |
|---|---|---|
| brand/StoryTangl-Brand-Sheet.html | this document — canonical reference | review-only; not a production artifact |
| brand/USAGE.md | do / don't · sizing rules · what an LLM agent must never do | opinionated; enforce in PRs |
| brand/assets/palette.css | color tokens (light + ink-mode) | :root + [data-st-mode="ink"] |
| brand/assets/type.css | type stack (Newsreader / Mono / Inter Tight) | Google Fonts import |
| brand/assets/wordmark.svg | canonical wordmark · Newsreader 600 | live text · Newsreader with Georgia/serif fallback · width-locked via textLength |
| brand/assets/glyph.svg | standalone glyph · ink-on-paper | square; live text + serif fallback; clip-path-friendly |
| brand/assets/glyph-round.svg | round-masked glyph · for favicons | used at 16/32/48/96/192 px |
| brand/assets/favicon.svg | browser tab icon · 32×32 source | copied to apps/web/public/favicon.svg and docs/src/_static/favicon.svg |
| brand/assets/social-card.svg | GitHub social card source · 1280×640 | copied to .github/social-card.svg; rasterize outside the repo for GitHub preview |
| brand/assets/README-banner.svg | README hero source · 1280×360 | available but not wired into README until the tagline settles |
| brand/assets/cli-splash.txt | terminal launch banner · ANSI | copied to apps/cli/src/tangl/cli/assets/splash.txt |
| apps/web/src/styles/storytangl-palette.css | web palette deployment copy | from brand/assets/palette.css |
| apps/web/src/styles/storytangl-type.css | web type deployment copy | from brand/assets/type.css |
| docs/src/_static/storytangl-palette.css | docs palette deployment copy | from brand/assets/palette.css |
| docs/src/_static/storytangl-type.css | docs type deployment copy | from brand/assets/type.css |
brand/ files are the source package; app,
docs, and GitHub copies are deployment surfaces. If you genuinely need a new target, add the
rule here first; then deploy.
g for the
active voice only — each font needs its own geometry — and persist per voice. §1 variants
and the sizing scale stay locked as reference.