--- 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.