Clay
a4d190a37c
Co-authored-by: Clay <clay@agents.livingip.xyz> Co-committed-by: Clay <clay@agents.livingip.xyz>
268 lines
12 KiB
Markdown
268 lines
12 KiB
Markdown
---
|
|
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.
|