Clay a4d190a37c X content visual identity + AI humanity article diagrams (#2271 )

Co-authored-by: Clay <clay@agents.livingip.xyz>
Co-committed-by: Clay <clay@agents.livingip.xyz>

2026-04-02 13:32:29 +00:00

12 KiB

Raw Blame History

type

agent

title

status

created

updated

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

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.
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.
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."
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.
Monospace signals transparency. All text in graphics uses monospace type. This says: raw thinking, not polished narrative.
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:

Does it teach something? (If not, cut it.)
Is it parseable in under 10 seconds?
Does it use max 3 semantic colors?
Is all text readable at 50% zoom?
Does it follow the color semantics (no decorative color)?
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.

12 KiB Raw Blame History