Brand and design system
The AeloDM design system
The one place the brand is defined: the seal, the wordmark rule, the color tokens, the type, the live UI components, and the voice. Everything here is drawn from the canonical tokens both apps ship, so what you see is what the product renders.
The seal
The Founder's Seal: a tower with a door, a cave entrance, an A without the crossbar, a halo, the moon behind it. The navy disc grounds it, the gold moon carries the cutout, the gold dome is the door. Flat gold on flat slate is the whole idea.
On dark and on light
At every size (works down to 16 px)
Clearspace
Keep clear space around the mark equal to the height of the moon cutout. Nothing crowds the seal inside the dashed frame.
Do not
No drop shadows or bevels.
No recoloring the gold.
No stretching or squashing.
No gold on warm or brown fields.
No rotating the mark.
No use below 16 px.
The wordmark rule
Everywhere the name is set: Aelo in white on dark surfaces (navy on light), DM always in the seal gold. This split leads with "Aelo" and lets the gold "DM" carry the accent. It applies in text, in headers, and in the lockup.
AeloDM
Color tokens
Roughly 70 percent cool slate, 20 percent white space, 10 percent gold. Gold earns attention by being scarce. Every swatch shows its hex value and its CSS token name, straight from static/tokens.css.
Core neutrals (cool slate)
Accent (gold / amber)
Support (status only, used rarely)
Typography
Fraunces for titles and brand moments, Inter for body and UI, JetBrains Mono for stat blocks and tabular game data. Never set long body copy in the serif.
Everything your world knows.
Only what your players should.
Keep every NPC, location, and secret in one place, and control exactly what your players can see, right down to the moment you reveal it.
A busy river town straddling the Wyre. Wool money, one stone bridge, and a council that asks few questions. The taverns are loud and the guards are bored.
Ruling family · Open quests · Last session
STR 14 (+2) · DEX 12 (+1) · AC 15 · HP 27 · CR 3
UI components
Rendered live from the same rules the product uses. The visibility pills below are a byte-for-byte copy of the app's VisibilityPill component in all three states.
Buttons
Visibility states (exactly as the app renders them)
Chips
Card
Alderman of Thornwick and holder of the town seal. Keeps the council quiet and the wool tithes flowing. Knows more about the well shrine than she admits.
Voice
A seasoned DM talking to another DM: warm, direct, and a little dry. It respects the craft of running a game and never talks down. Plain-spoken, never salesy, never leaning on hype words.
Principles
- Speak to one DM, not a crowd. Use "you" and "your table."
- Lead with the workflow, not the feature list. Say what it does for prep night.
- Be specific. "Mark an NPC player-visible" beats "powerful visibility features."
- Keep it dry and a touch witty. A knowing aside is welcome. A pun parade is not.
- Respect the player relationship. The tool guards secrets; the copy should feel trustworthy.