# CJ INFOGRAPHIC JSON GENERATOR
Specialized skill for turning research into high-signal, publication-ready infographic JSON using the exact Context Jamming warm-paper editorial aesthetic.

**Version:** 1.0.0  
**Author:** ACRA Insight LLC  
**Style:** cj-warm-paper-v1  
**Repository:** contextjamming.com  

---

> **Note for the Public:** You can update the CSS tokens and variables in the prompt below with the design system (CSS) from your own website to generate infographics in your brand's visual identity.

## CORE AESTHETIC RULES (NON-NEGOTIABLE)
Use these exact design tokens in every output. This is the canonical Context Jamming visual system.

```css
/* Canvas - warm paper, never pure white */
--color-canvas: #faf9f5;
--color-surface: #ffffff;
--color-surface-2: #e8e6dc;

/* Ink - warm near-black, never #000 */
--color-ink: #141413;
--color-muted: #6b6862;
--color-faint: #b0aea5;
--color-rule: rgba(176, 174, 165, 0.42);

/* Accents - "Claude Clay" / Rust / Signal Amber */
--color-accent: #d97757;
--color-accent-blue: #6a9bcc;
--color-amber: #f5a524;

/* Typography */
--font-serif: 'Fraunces', Georgia, serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
```

### Typography Mandates
- **Headings:** `font-weight: 900`, `font-variation-settings: "opsz" 144, "SOFT" 35`, `letter-spacing: -0.03em`
- **Eyebrows / Kickers / Badges:** `font-family: var(--font-mono)`, `font-size: 11px`, `font-weight: 600`, `text-transform: uppercase`, `letter-spacing: 0.25em`, `color: var(--color-accent)`
- **Stat numbers:** `font-family: var(--font-mono)`, large size, `color: var(--color-accent)`
- **Body narrative:** `font-family: var(--font-serif)`, `font-size: 1.15rem`, `line-height: 1.7`, `color: var(--color-muted)`
- **Highlights:** `background-color: var(--color-ink)`, `color: var(--color-canvas)`, mono, tight padding

### Layout System
- Use `.grid-masonry` for stat clusters
- `.stat-card` for individual data points (subtle shadow, clean border)
- `.highlight` for key phrases/numbers in prose
- Heavy use of `.eyebrow` and `.kicker` for editorial framing

## JSON SCHEMA (STRICT)
Every output must be valid JSON matching this exact structure:

```json
{
  "meta": {
    "title": "string",
    "subtitle": "string",
    "byline": "ACRA Insight | Context Jamming",
    "date": "YYYY-MM-DD",
    "style_version": "cj-warm-paper-v1",
    "aspect_ratio": "9x16 | 16x9 | 1x1",
    "fonts": { "serif": "Fraunces", "mono": "IBM Plex Mono" },
    "colors": {
      "canvas": "#faf9f5", 
      "ink": "#141413",
      "accent": "#d97757", 
      "amber": "#f5a524", 
      "accent_blue": "#6a9bcc"
    }
  },
  "hero": {
    "eyebrow": "string (max 6 words, mono kicker)",
    "headline": "string (8-14 words, heavy Fraunces energy)",
    "deck": "string (1-2 sentences, warm paper narrative)",
    "visual_note": "plain English description of intended hero visual"
  },
  "sections": [ { "..." : "..." } ],
  "footer": {
    "cta": "string",
    "source_note": "string",
    "disclaimer": "string (optional)"
  }
}
```

## POPULATION RULES
Follow these strictly when generating JSON from research:
1. **Prioritize signal density** — Extract the 4–7 most powerful, counterintuitive, or scale-demonstrating data points.
2. **Hero is structural thesis** — Headline should feel like a Paula Scher poster line: short, confident, slightly accusatory or revelatory.
3. **Stat cards over bullets** — Never output raw bullets. Convert every key finding into a `.stat-card` with number + label + context.
4. **Use the accent system deliberately:** Primary scale/shock → `#d97757` (rust). Positive/amber signals → `#f5a524`. Secondary/structural → `#6a9bcc`.
5. **Narrative blocks must read like warm editorial prose.** Use `**text**` to mark phrases that should render as `.highlight`.
6. **Sidebar content should feel like 90s SPY magazine marginalia** — slightly wry, editorial, confident.
7. **Keep total sections to 5–7 max** for scannability on mobile.

## USAGE INSTRUCTIONS
When this JSON is passed to a renderer (Claude Code or equivalent):
- Render hero as a large stacked headline with eyebrow kicker above.
- Use CSS Grid with `repeat(auto-fit, minmax(280px, 1fr))` for stat sections.
- Apply `.stat-card` styling to every stat object.
- Convert `**text**` markers in body fields into highlighted spans (using the `.highlight` CSS class).
- Respect `visual_note` fields as art direction for illustration layers.
- Output must be a single self-contained HTML file with the exact CSS variables embedded.

This skill produces only the JSON. It does not render HTML. Pass the output to Claude Code with the instruction: *"Using the exact CSS variables and component classes from cj-warm-paper-v1, turn this JSON into a production-ready single-file HTML infographic."*

### EXAMPLE TRIGGER PHRASES
- "Turn this research into CJ infographic JSON"
- "Generate warm paper infographic JSON for [topic]"
- "Make Context Jamming style stat cards from this"
- "CJ visual dispatch JSON"

## QUALITY CHECKLIST (BEFORE EMITTING JSON)
- [ ] Hero headline feels like it could be letterpressed
- [ ] Every major data point lives in its own stat card
- [ ] At least one section uses the split or comparison pattern
- [ ] Accent colors are used with intention (not randomly)
- [ ] Body text has at least one **highlighted** phrase
- [ ] Sidebar kickers have attitude
- [ ] Total payload stays under ~4k tokens when stringified

---
*End of skill definition. — ACRA Insight LLC • Context Jamming • May 2026*