Avatar Style — Flat Bot Marks
reference· designer · updated 2026-06-28 · source
Reusable spec for the flat geometric marks (glyphs) that stand in for autonomous agents/bots in the
tedosworld. These are logos, not characters — no faces, no expressions. Reference mark:auto-dev.svg(Auto-Dev, the CI bot that picks up tickets, writes code, opens PRs).
0. What this style is for
Avatars/labels for automatons in the dev workflow (CI bots, agents) — used as
PR-author avatars and inline labels, so they must read at 16px. Each mark is a
single iconic concept executed cleanly. It lives in the cool product palette
(tedos-design-system.md), never the warm brand palette.
Anti-patterns (match-and-refuse): faces of any kind, robot heads, "AI sparkle" icons, gradient mesh, emoji, purple glow, inner shadows, 3D/bevel, glassmorphism, rainbow accents.
1. Canvas
| Property | Value |
|---|---|
viewBox | 0 0 256 256 (always square) |
| Self-contained | No external fonts, images, scripts, gradients, or filters |
| Plate corner radius | rx="60" (≈ 0.235 × side) |
| Title / a11y | role="img" + aria-label + <title> matching the bot name |
The plate is a single flat fill. The mark is one bold glyph centered with generous negative space so the silhouette survives at 16px.
2. Palette (2 colors max)
Use hex directly in SVG, but every value traces to a tedos-design-system.md token.
| Role | Hex | Token origin |
|---|---|---|
| Plate | #16161A | near --color-bg-elevated (or #0F0F12 ≈ --color-bg-canvas) |
| Mark / accent | #6366F1 | --color-accent (indigo) |
Rules:
- Indigo on slate, or indigo-on-transparent (drop the plate
<rect>). Nothing else. - No gradients, no glow, no inner/drop shadow. Solid fills only. Plana.
- Never use pure
#000/#fff. The plate is tinted slate. - A second cool accent (
--color-info#38BDF8,--color-ai#A78BFA) may replace indigo to denote a different bot's domain, but only one accent per mark.
3. Geometry — Auto-Dev mark
Concept: a git graph — a commit node on a track that forks its own branch and commits again. It says "autonomous: picks up the line, branches, commits, opens a PR (never merges — the branch stays open, top-right)."
Built from exactly these parts:
- Plate — flat
<rect>,rx="60". - Main track — horizontal
<path>stroke,stroke-linecap="round". - Branch — a
<path>forking up-right off the main track with one smooth curve. - Fork node — solid
<circle>where the branch leaves the track (the source commit). - Branch-head node — smaller solid
<circle>at the open end of the branch.
Nothing else. No rings/outlined nodes (they muddy at 16px — nodes are solid dots).
Reference dimensions
| Part | Value |
|---|---|
| Stroke width | 18 |
| Main track | M58 176 H198 |
| Branch | M112 176 C156 176 152 80 196 80 |
| Fork node | cx=112 cy=176 r=30 |
| Branch-head node | cx=196 cy=80 r=22 |
The two nodes sit on a diagonal (lower-left → upper-right), giving directional "movement" — the bot advances on its own.
4. Construction rules
- One idea per mark. Pick a single glyph concept (git graph, run/▷ + commit
dot,
</>monogram, commit-on-a-track) and execute it cleanly. Don't combine. - Bold silhouette. Strokes are heavy (≈
16–20on the 256 grid) so the mark holds together when scaled to 16px. - Solid nodes, not rings. Commit dots are filled circles — open rings collapse into noise at small size.
- Generous negative space. The glyph occupies roughly the central 60% of the plate; let the slate breathe around it.
- 16px survival. Test every mark at 16px on light and dark before shipping. If any element disappears or merges, remove it or thicken it.
5. Per-bot variables (what a generator may change)
| Variable | Range / options | Default (Auto-Dev) |
|---|---|---|
accentHue | one cool accent: #6366F1 (default), #38BDF8, #A78BFA | #6366F1 |
plate | #16161A, #0F0F12, or transparent (no <rect>) | #16161A |
glyph | the bot's single concept | git graph (fork + 2 nodes) |
Everything in §1–§4 (canvas, flat fills, 2-color limit, bold silhouette, solid nodes, negative space) stays fixed for coherence.
6. Do / Don't
Do
- Keep it a flat mark: solid fills, one accent on slate.
- Use a single confident glyph with a strong, legible silhouette.
- Verify at 16px on light and dark.
Don't
- Don't make a face, head, or character of any kind.
- Don't add gradients, glow, inner/drop shadows, bevels, or 3D.
- Don't combine multiple concepts into one busy mark.
- Don't use outlined/ring nodes or hairline strokes that vanish at small size.
- Don't import the warm brand palette — these are cool/product marks.