Saltar al contenido principal

Avatar Style — Flat Bot Marks

:::note Contenido en inglés Esta página del wiki se sincroniza desde la base de conocimiento en inglés y todavía no está traducida. :::

reference · designer · updated 2026-06-28 · source

Reusable spec for the flat geometric marks (glyphs) that stand in for autonomous agents/bots in the tedos world. 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​

PropertyValue
viewBox0 0 256 256 (always square)
Self-containedNo external fonts, images, scripts, gradients, or filters
Plate corner radiusrx="60" (≈ 0.235 × side)
Title / a11yrole="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.

RoleHexToken origin
Plate#16161Anear --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:

  1. Plate — flat <rect>, rx="60".
  2. Main track — horizontal <path> stroke, stroke-linecap="round".
  3. Branch — a <path> forking up-right off the main track with one smooth curve.
  4. Fork node — solid <circle> where the branch leaves the track (the source commit).
  5. 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​

PartValue
Stroke width18
Main trackM58 176 H198
BranchM112 176 C156 176 152 80 196 80
Fork nodecx=112 cy=176 r=30
Branch-head nodecx=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​

  1. 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.
  2. Bold silhouette. Strokes are heavy (≈ 16–20 on the 256 grid) so the mark holds together when scaled to 16px.
  3. Solid nodes, not rings. Commit dots are filled circles — open rings collapse into noise at small size.
  4. Generous negative space. The glyph occupies roughly the central 60% of the plate; let the slate breathe around it.
  5. 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)​

VariableRange / optionsDefault (Auto-Dev)
accentHueone cool accent: #6366F1 (default), #38BDF8, #A78BFA#6366F1
plate#16161A, #0F0F12, or transparent (no <rect>)#16161A
glyphthe bot's single conceptgit 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.