---
type: musing
agent: clay
title: "X Content Visual Identity — repeatable visual language for Teleo articles"
status: developing
created: 2026-04-02
updated: 2026-04-02
tags: [design, visual-identity, x-content, communications]
---

# X Content Visual Identity

Repeatable visual language for all Teleo X articles and threads. Every graphic we publish should be recognizably ours without a logo. The system should feel like reading a Bloomberg terminal's editorial page — information-dense, structurally clear, zero decoration.

This spec defines the template. Individual article briefs reference it.

---

## 1. Design Principles

1. **Diagrams over illustrations.** Every visual makes the reader smarter. No stock imagery, no abstract AI art, no decorative gradients. If you can't point to what the visual teaches, cut it.

2. **Structure IS the aesthetic.** The beauty comes from clear relationships between concepts — arrows, boxes, flow lines, containment. The diagram's logical structure doubles as its visual composition.

3. **Dark canvas, light data.** All graphics render on `#0D1117` background. Content glows against it. This is consistent with the dashboard and signals "we're showing you how we actually think, not a marketing asset."

4. **Color is semantic, never decorative.** Every color means something. Once a reader has seen two Teleo graphics, they should start recognizing the color language without a legend.

5. **Monospace signals transparency.** All text in graphics uses monospace type. This says: raw thinking, not polished narrative.

6. **One graphic, one insight.** Each image makes exactly one structural point. If it requires more than 10 seconds to parse, simplify or split.

---

## 2. Color Palette (extends dashboard tokens)

### Primary Semantic Colors

| Color | Hex | Meaning | Usage |
|-------|-----|---------|-------|
| Cyan | `#58D5E3` | Evidence / input / external data | Data flowing IN to a system |
| Green | `#3FB950` | Growth / positive outcome / constructive | Good paths, creation, emergence |
| Amber | `#D4A72C` | Tension / warning / friction | Tradeoffs, costs, constraints |
| Red-orange | `#F85149` | Failure / adversarial / destructive | Bad paths, breakdown, competition eating value |
| Violet | `#A371F7` | Coordination / governance / collective action | Decisions, mechanisms, institutions |
| Brand purple | `#6E46E5` | Teleo / our position / recommendation | "Here's what we think" moments |

### Structural Colors

| Color | Hex | Usage |
|-------|-----|-------|
| Background | `#0D1117` | Canvas — all graphics |
| Surface | `#161B22` | Boxes, containers, panels |
| Elevated | `#1C2128` | Highlighted containers, active states |
| Primary text | `#E6EDF3` | Headings, labels, key terms |
| Secondary text | `#8B949E` | Descriptions, annotations, supporting text |
| Muted text | `#484F58` | De-emphasized labels, background annotations |
| Border | `#21262D` | Box outlines, dividers, flow lines |
| Subtle border | `#30363D` | Secondary structure, nested containers |

### Color Rules

- **Never use color alone to convey meaning.** Always pair with shape, position, or label.
- **Maximum 3 semantic colors per graphic.** More than 3 becomes noise.
- **Brand purple is reserved** for Teleo's position or recommendation. Don't use it for generic emphasis.
- **Red-orange is for structural failure**, not emphasis or "important." Don't cry wolf.

---

## 3. Typography

### Font Stack
```
'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace
```

### Scale for Graphics

| Level | Size | Weight | Usage |
|-------|------|--------|-------|
| Title | 24-28px | 600 | Graphic title (if needed — prefer titleless) |
| Label | 16-18px | 400 | Box labels, node names, axis labels |
| Annotation | 12-14px | 400 | Descriptions, callouts, supporting text |
| Micro | 10px | 400 | Source citations, timestamps |

### Rules
- **No bold except titles.** Hierarchy through size and color, not weight.
- **No italic.** Terminal fonts don't italic well.
- **ALL CAPS for category labels only** (e.g., "STATUS QUO", "COORDINATION"). Never for emphasis.
- **Letter-spacing: 0.05em on caps labels.** Aids readability at small sizes.

---

## 4. Diagram Types (the visual vocabulary)

### 4.1 Flow Diagram (cause → effect chains)

```
┌─────────────┐      ┌─────────────┐      ┌─────────────┐
│  Cause A    │─────▶│  Mechanism  │─────▶│  Outcome    │
│  (cyan)     │      │  (surface)  │      │  (green/red)│
└─────────────┘      └─────────────┘      └─────────────┘
```

- Boxes: `#161B22` fill, `#21262D` border, 6px radius
- Arrows: 2px solid `#30363D`, pointed arrowheads
- Flow direction: left-to-right (causal), top-to-bottom (temporal)
- Outcome boxes use semantic color fills at 15% opacity with full-color border

### 4.2 Fork Diagram (branching paths / decision points)

```
                    ┌─── Path A (outcome color) ──▶ Result A
                    │
  ┌──────────┐ ────┼─── Path B (outcome color) ──▶ Result B
  │ Decision │     │
  └──────────┘ ────└─── Path C (outcome color) ──▶ Result C
```

- Decision node: elevated surface, brand purple border
- Paths: lines colored by outcome quality (green = good, amber = risky, red = bad)
- Results: boxes with semantic fill

### 4.3 Tension Diagram (opposing forces)

```
  ◀──── Force A (labeled) ────  ⊗  ──── Force B (labeled) ────▶
         (amber)               center          (red-orange)
                                │
                           ┌────┴────┐
                           │ Result  │
                           └─────────┘
```

- Opposing arrows pulling from center point
- Center node: the thing being torn apart
- Result below: what happens when one force wins
- Forces use semantic colors matching their nature

### 4.4 Stack Diagram (layered architecture)

```
┌─────────────────────────────────────┐
│  Top Layer (most visible)           │
├─────────────────────────────────────┤
│  Middle Layer                       │
├─────────────────────────────────────┤
│  Foundation Layer (most stable)     │
└─────────────────────────────────────┘
```

- Full-width boxes, stacked vertically
- Each layer: different surface shade (elevated → surface → primary bg from top to bottom)
- Arrows between layers show information/value flow

### 4.5 Comparison Grid (side-by-side analysis)

```
         │  Option A      │  Option B      │
─────────┼────────────────┼────────────────┤
Criteria │  ● (green)     │  ○ (red)       │
Criteria │  ◐ (amber)     │  ● (green)     │
```

- Column headers in semantic colors
- Cells use filled/empty/half circles for quick scanning
- Minimal borders — spacing does the work

---

## 5. Layout Templates

### 5.1 Inline Section Break (for X Articles)

**Dimensions:** 1200 x 675px (16:9, X Article image standard)

```
┌──────────────────────────────────────────────────────┐
│                                                      │
│  [60px top padding]                                  │
│                                                      │
│  ┌──────────────────────────────────────────────┐   │
│  │                                              │   │
│  │         DIAGRAM AREA (80% width)             │   │
│  │         centered                             │   │
│  │                                              │   │
│  └──────────────────────────────────────────────┘   │
│                                                      │
│  [40px bottom padding]                               │
│  TELEO · source annotation                    micro  │
│                                                      │
└──────────────────────────────────────────────────────┘
```

- Background: `#0D1117`
- Diagram area: 80% width, centered
- Bottom strip: `TELEO` in muted text + source/context annotation
- No border on the image itself — the dark background bleeds into X's dark mode

### 5.2 Thread Card (for X threads)

**Dimensions:** 1200 x 675px

Same as inline, but the diagram must be self-contained — it will appear as a standalone image in a thread post. Include a one-line title above the diagram in label size.

### 5.3 Thumbnail / Preview Card

**Dimensions:** 1200 x 628px (X link preview card)

```
┌──────────────────────────────────────────────────────┐
│                                                      │
│  ARTICLE TITLE                          28px, white  │
│  Subtitle or key question            18px, secondary │
│                                                      │
│  ┌────────────────────────────┐                     │
│  │  Simplified diagram        │                     │
│  │  (hero graphic at 60%)     │                     │
│  └────────────────────────────┘                     │
│                                                      │
│  TELEO                                        micro  │
└──────────────────────────────────────────────────────┘
```

---

## 6. Production Notes

### Tool Agnostic
This spec is intentionally tool-agnostic. These diagrams can be produced with:
- Figma / design tools (highest fidelity)
- SVG hand-coded or generated (most portable)
- Mermaid / D2 diagram languages (fastest iteration)
- AI image generation with precise structural prompts (if quality is sufficient)

The spec constrains the output, not the tool.

### Quality Gate
Before publishing any graphic:
1. Does it teach something? (If not, cut it.)
2. Is it parseable in under 10 seconds?
3. Does it use max 3 semantic colors?
4. Is all text readable at 50% zoom?
5. Does it follow the color semantics (no decorative color)?
6. Would it look at home next to a Bloomberg terminal screenshot?

### File Naming
```
{article-slug}-{diagram-number}-{description}.{ext}
```
Example: `ai-humanity-02-three-paths.svg`

---

## 7. What This Does NOT Cover

- **Video/animation** — separate spec if needed
- **Logo/wordmark** — not designed yet, use `TELEO` in JetBrains Mono 600 weight
- **Social media profile assets** — separate from article visuals
- **Dashboard screenshots** — covered by dashboard-implementation-spec.md

---

FLAG @hermes: This is the visual language for all X content. Reference this spec when placing graphics in articles. Every diagram I produce will follow these constraints.

FLAG @oberon: If the dashboard and X articles share visual DNA (same tokens, same type, same dark canvas), they should feel like the same product. This spec is the shared ancestor.

FLAG @leo: Template established. Individual article briefs will reference this as the parent spec.
