Editorial Ai Product Design System

---
name: editorial-ai-product-design-system
description: Use when creating, critiquing, or systematizing AI/tech social assets that need a premium editorial motion-design look, product UI mockups, agent mascots, workflow diagrams, or reusable Reel/carousel visual schemas.
---

# Editorial AI Product Design System

## Source pattern
Learned from Greg Isenberg Reel `DYSBWggx31N` / Hyperagent-style explainer: a soft editorial AI/product motion system combining abstract workflow diagrams, stylized UI mockups, a recurring agent mascot, serif storytelling copy, and clean product labels.

Core principle: make AI feel like a **designed product system**, not generic neon robot content. Use warm negative space, tactile editorial typography, abstracted product UI, and simple recurring symbols for input → evaluation → output.

## Global schema

### Canvas + spacing
- Primary format: 1080×1920 vertical.
- Background: warm off-white canvas with large negative space.
- Use oversized assets cropped by frame edges to imply camera pans through a larger designed canvas.
- Keep one hero idea per beat/slide; avoid dense dashboards or text walls.

### Palette
| Role | Use | Approx values |
|---|---|---|
| Warm paper background | Default canvas | `#F3F1EE`, `#EFEDE9`, `#EAE7E3` |
| Mint green | Positive/system/agent/emphasis | `#68B894`, `#6DBA98` |
| Forest green | Heavy badges, arcs, mascot shadows | `#0C2B1F`, `#102D23` |
| Coral red | Rejection/error/negative state only | `#E34B4B`, `#DD4A45` |
| Sage / warm gray | Product UI borders, shadows, generated-content panels | `#B8C7BA`, `#D6D0C7` |
| Charcoal | Type, outlines, connector lines | `#111111`, `#1D1D1D` |
| Soft gray | Placeholder text, inactive buttons/icons | `#898984`, `#B8B6B1` |

Rules:
- Keep red rare so it means “fail/reject.”
- Use green for both brand/system energy and approval.
- Avoid purple, violet, lavender, and obsidian/crystal accents for your Greg-theme reels; they read like a different reference world. Use sage/warm-gray UI depth or gold value accents instead.

### Typography
- Pair **editorial serif** + **modern sans**.
- Serif: narrative statements, human words, price/metaphor copy, captions (`Georgia`, `Caslon`, `Garamond`, or similar high-contrast serif).
- Sans: product names, functional labels, badges, bracketed variables (`Inter`, `Satoshi`, `Manrope`, `Helvetica Now`).
- Italic serif/script can be used inside circular badges for crafted words like “skill.”
- Uppercase/small-caps for pill labels: `USE CASE + QUALITY STANDARDS`.
- Bold bracketed variables: `[use case]`, `[quality standards]`.

### Shape language
- Rounded rectangles for UI panels, input fields, process nodes, and status tabs.
- Pills for labels and compact metadata.
- Circles/arcs/semicircles for decorative anchors and motion rhythm.
- Dashed rounded containers for “system boundary” or automation zones.
- Thin black orthogonal connector lines for workflows.
- Dotted connector lines for association between a label and a character/object.

### Motion grammar
- Pan/zoom across an oversized designed canvas, revealing cropped UI cards and props.
- Sequentially draw diagrams: nodes → connectors → checklist/status.
- Switch states with green check/red X tabs and dots.
- Slide UI cards from edges with slight motion blur.
- Reveal editorial phrases in short beats, not paragraph captions.
- Motion should clarify input → filter/evaluate → output, not decorate every object equally.

## Asset schemas

### 1. Workflow diagram asset
Use for process, automation, routing, validation, or “agent does the work.”

Design:
- Dashed rounded system container.
- Stacked rounded process blocks in mint/forest/red.
- Tiny document/checklist icons between steps.
- Thin black right-angle connector lines.
- Optional green/red terminal nodes for approved/rejected branches.

Rules:
- Green = accepted/approved/active.
- Red = failed/rejected/off-track.
- Checklist/document = quality criteria or validation.
- Animate as a sequential path, not a static full diagram.

### 2. Editorial metaphor prop asset
Use for price, time, shipping, attention, or real-world analogy.

Examples from source:
- Uber Eats bag for “less than your order.”
- Retro CRT computer with “to ship.”
- Human head silhouette with vision beam.

Design:
- Place physical/retro props on the warm paper canvas.
- Pair with large serif copy.
- Add simple arcs/circles/lines to integrate the prop into the system.

Rules:
- The prop must explain the idea; no generic decoration.
- Use one prop per beat.
- Props can be photographic/collage-like, but should be simplified and cleanly cut out.

### 3. Product input UI asset
Use when showing the user configuring an AI agent or entering a task.

Design:
- Large white rounded panel.
- Sage or warm-gray border plus soft warm-gray offset shadow.
- Bottom prompt/input bar.
- Gray circular send button with white up-arrow.
- Optional left vertical toolbar for product realism.
- Text examples: “describing your [use case]” / “defining your [quality standards]”.

Rules:
- Use stylized mockups, not literal screenshots, unless proof requires a real screenshot.
- Crop large panels at the frame edge for movement.
- Keep placeholder content abstract; only the input text should be readable.

### 4. Agent mascot asset
Use as recurring anchor for the AI system/product.

Design:
- Simple geometric green square/rounded-square face.
- Two black circular eyes.
- Dark forest lower shadow/body.
- Optional role accessory: white curly judge wig for evaluator/quality-control persona.
- Can sit inside a white rounded square card under a product title like “Hyperagent.”

Rules:
- Mascot expresses role via accessories, not facial detail.
- Keep it minimal enough to work as an icon, sticker, or animated character.
- Reuse consistently across Reel beats and carousel slides for continuity.

### 5. Quality standards / state asset
Use for evaluation, filtering, approval, or inbox triage.

Design:
- Pill label: `USE CASE + QUALITY STANDARDS` with a small forest-green circular icon.
- Green check tab on left/top for approved.
- Coral red tab with white X for rejected.
- Small colored dots above mascot to show active state.
- Dotted connector from label to agent/user.

Rules:
- Always pair pass/fail visuals with a criterion label; otherwise the status feels decorative.
- Use quick state switching for Reels; use side-by-side cards for carousels.

### 6. Output/inbox UI asset
Use when showing what lands in the user’s workspace after filtering.

Design:
- Tall rounded white product panel, often cropped.
- Sage/warm-gray border/shadow system.
- Left toolbar with small icons.
- Warm-gray or sage generated document block with white placeholder lines.
- Bottom input bar with serif sentence fragments like “By the time anything lands in your inbox,”.

Rules:
- Show output as a clean artifact/card, not a busy app screen.
- Use large readable narrative copy around the UI to explain why it matters.

### 7. Attention/insight beam asset
Use to show human perception, AI scanning, focus, or analysis.

Design:
- Simple side-profile silhouette in charcoal/gray.
- Single eye as focal point.
- Translucent sage/forest-green cone projecting toward a UI panel.

Rules:
- Use sparingly for moments about attention, cognition, or “seeing the signal.”
- Keep the beam soft and geometric; avoid sci-fi laser clichés or purple glow.

### 8. Talking-head editorial caption asset
Use for Greg-style podcast/advice clips where the source is a direct-to-camera or podcast crop.

Design:
- Warm bookshelf/studio background with shallow depth of field.
- Subject centered or slightly right-of-center; microphone visible in lower foreground when available.
- Large white editorial serif phrases placed in left/upper-left negative space.
- One key word can be mint/teal and italicized.
- Optional slim top chapter/progress bar for tutorials (`Intro`, `Docs`, `Setup`, `Skills`, etc.).

Rules:
- Avoid generic TikTok subtitle boxes; captions should feel like designed editorial headline type.
- Keep phrases short and stacked; do not cover eyes/mouth.
- Use subtle shadow only for contrast; no heavy meme-outline text.

### 9. Retro software/internet prop asset
Use for internet history, old-vs-new workflow, browser demos, or startup-nostalgia metaphors.

Design:
- Beige/gray retro desktop computer or browser window.
- Pixel/voxel or simplified 3D object style.
- Muted background, dark screen area, small UI details.
- Minimal or no text; let the prop carry the hook when it is visually strong.

Rules:
- Use as a deliberate metaphor, not random decoration.
- Pair with one short headline/caption if the concept is not obvious.

### 10. Product/ad output card asset
Use when demonstrating AI-generated ads, landing pages, content, or product outputs.

Design:
- Small green agent/robot badge at top.
- Floating rounded output card beneath with soft shadow.
- Warm paper canvas, centered object composition, lots of negative space.
- Product/ad/UI mockup should be simplified and readable at mobile size.

Rules:
- Keep inner copy large enough to read; if the output is only proof texture, add a separate readable label.
- Use the mascot/badge to imply “AI generated this,” not as decoration.

## Reel structure template
1. **Price/status hook:** large serif claim + real-world prop + small process motif.
2. **Shipping/product metaphor:** retro/object beat that makes the promise tangible.
3. **Brand/product reveal:** product name in bold sans + mascot card.
4. **Input/configuration:** prompt UI asking for use case + quality standards.
5. **Agent evaluation:** mascot receives criteria; green check/red X states switch.
6. **Output/inbox payoff:** stylized UI shows only qualified output reaching the user.
7. **Human insight close:** user/attention metaphor shows why the system matters.

### New-channel / ads-platform variant
Use this variant when the script is about a new AI distribution channel, ads platform, or growth workflow rather than an AI-agent product:
1. **Status hook:** pill label like `NEW AD CHANNEL`, large serif claim, tilted product/browser card, and one simple mascot or badge.
2. **Expectation beat:** compare the old mental model versus the new one side-by-side, e.g. `Google = keywords` vs `ChatGPT = conversations`.
3. **Setup walkthrough:** one large clean product UI card with 3–5 numbered setup steps.
4. **Intent examples:** prompt/chat bubbles showing concrete buyer moments; keep them short and readable.
5. **Official proof cards:** 2–3 source-backed capability cards, each with one highlighted capability.
6. **System map:** simple connector diagram turning the idea into a framework.
7. **CTA board:** audience checklist + large comment keyword block.

## Asset sourcing rule for Greg-theme video production

When turning scripts into Greg/editorial AI-product Reels, do not produce only animated text and generic UI cards. Build an asset evidence kit first:

- Extract cropped screenshot receipts from any relevant links, articles, product pages, reports, repos, docs, tweets/posts, or social proof. Use them as layered proof cards with readable OpenNolan/Remotion overlay text.
- Source relevant commercial-safe b-roll or public-domain/project-corpus footage for concrete beats: founders working, coding, dashboards, offices, data centers, social feeds, product workflows, etc.
- Treat YouTube footage as reference unless the user owns it or licensing/permission is clear; if not clear, recreate the beat with stock footage or generated visuals.
- Generate AI images/UI mockups for abstract or product-specific beats: hero backdrops, workflow boards, agent/evaluation scenes, founder metaphor props, output/profile/proof boards.
- For a 45–60s reel, target roughly 2–4 screenshot receipts, 2–4 b-roll/footage inserts, 3–6 generated/stylized images or UI mockups, plus reusable overlays/icons.
- Track source URL/tool, license/provenance, scene_id, and role (`proof`, `broll`, `generated_hero`, `ui_mockup`, `texture`, `overlay`) in the asset manifest.

## Motion learnings from the Pixel RPG / Obsidian workflow reference — Greg-theme adaptation

Use these as editorial motion grammar, **not** as visual motifs. Do not bring over pixelated RPG characters, purple crystals, obsidian-dark fantasy objects, or violet glow. Translate the underlying edit logic into warm Greg-style product scenes.

### Structure transfer
1. **World-state hook without fantasy props**
   - Open with a designed problem state: a large serif claim, a simple prop, a workflow map, or stacked proof receipts.
   - Replace “avatar runs to crystal/portal” with “cursor/agent badge/receipt card triggers the first system reveal.”
   - Threat labels can still crash in (`layoffs`, `AI agents`, `budget cuts`, `competition`), but style them as warm-paper stickers or sans pills, not game labels.

2. **Proof-window storm**
   - Stack 2–4 source cards/browser receipts with slight offsets, soft shadows, and one highlighted phrase per card.
   - Use this to prove the premise before teaching the workflow.
   - Cards slide from different edges, overlap, and settle quickly; avoid long crossfades.

3. **Chaptered level logic, renamed as steps or layers**
   - Keep the “3 levels” clarity, but render as Greg-style steps, standards, layers, or system nodes.
   - Use large editorial serif captions for the chapter line; important nouns get mint/forest/gold emphasis.

4. **Tool-connection diagram**
   - Show app/tool A → connector → agent/system → output artifact.
   - Draw dashed or orthogonal connectors over 0.3–0.6s; pop nodes after the line reaches them.
   - Use rounded white cards, dark/forest nodes, and sage shadows.

5. **Trend / industry map**
   - Keep the radial “niche map” mechanic: central topic with pills around it.
   - Render as a clean dark-forest or charcoal circular board on warm canvas, with mint/sage pills.
   - Use a slow digital push/tilt across the board to imply exploration.

6. **Prompt → result → artifact loop**
   - Prompt bars are hero UI objects: black or forest rounded pill, active green rim, typewriter text.
   - Immediately transform output into a tangible artifact: checklist, plan, content grid, profile board, or calendar.
   - Stagger rows/cards one-by-one so the viewer sees utility, not just an AI response.

7. **Moral reset + public proof payoff**
   - Insert a high-negative-space white beat with one strong sentence when the script pivots.
   - End on proof of work: dashboard, public profile, post grid, receipts, checklist, or outcome board — not a generic “follow for more.”

### Text motion
- Captions are phrase collages, not subtitles. Build 2–5 word groups around the focal visual.
- Use `y: 14–22px -> 0`, blur `2–3px -> 0`, opacity `0 -> 1`, 0.28–0.45s cubic/power3 ease-out.
- Emphasis words may scale to only `1.03–1.06`, italicize, underline, or color-hit in mint/forest/gold.
- Avoid meme bounces, yoyo, random glitches, and purple keyword hits.
- Every 0.5–1.5s should change one meaningful element: word group, proof card, connector, prompt text, result row, or camera crop.

### Camera and composition
- Treat the reel as a camera moving across an oversized designed canvas.
- Use three camera states: wide system map, close UI/prompt crop, artifact hero frame.
- Push-ins should be subtle: 3–7% over a scene; snap zooms only for proof hits or prompt submits.
- Crop large cards slightly off-frame to create scale and motion, but keep primary text inside Reels safe zones.
- Layer depth: warm paper background → connector/grid → cards/props → captions → foreground prompt/result UI.

### Transition vocabulary
- `receipt-stack-in`: cards slide 80–180px, rotate -2°→0°, shadow grows.
- `phrase-collage-build`: staggered caption groups, blur-up settle.
- `connector-draw`: dashed/orthogonal line draw-on, node pop at endpoint.
- `radial-pill-populate`: central topic then pills populate in 0.08–0.14s stagger.
- `prompt-bar-type`: hero prompt pill slides in, cursor types, green rim intensifies.
- `response-to-artifact`: AI result card shrinks/repositions while checklist/grid rows wipe in.
- `proof-board-land`: final board scales 0.94→1 with 3–5% camera push.

## Carousel adaptation
- Slide 1: editorial serif hook + one prop/metaphor.
- Slide 2: “how the system works” diagram with dashed container.
- Slide 3: product input UI: use case + quality standards.
- Slide 4: mascot/agent role introduction.
- Slide 5: green check vs red X evaluation criteria.
- Slide 6: output/inbox UI showing filtered artifact.
- Slide 7: save-worthy framework: `Input criteria → agent evaluates → only signal lands`.
- Slide 8: CTA tied to template/comment keyword.

## Reusable asset kits
When the user asks for a Greg-style / editorial AI-product Remotion or OpenNolan kit, create a reusable asset directory before building full templates: fonts, palette JSON, original SVG icons, original SVG shapes, 1080×1920 paper backgrounds, SFX placeholders or ElevenLabs-generated SFX, lightweight TSX starter components, asset ledger, zip, and visual preview/contact sheet. See `references/greg-style-kit-assets.md` for the base structure, QA checks, and SFX fallback.

When the user asks to generate **lots of assets/icons/backgrounds for future informational Reels**, produce an expanded reusable kit: Codex-native `$imagegen` PNG backgrounds/hero scenes/UI cards/sticker sheets plus deterministic SVG overlay icons/shapes, Remotion starter primitives, ledger, contact sheet, and zip. Use `references/greg-style-expanded-asset-kit.md` for the proven directory shape, prompt rules, Codex timeout recovery from `~/.codex/generated_images/<thread_id>/`, Python zip fallback, and verification checklist.

## Common mistakes
- Using dark neon AI aesthetics; this system is warm editorial/product, not cyberpunk.
- Showing real dense screenshots without abstraction/cropping.
- Mixing too many accent colors; use green/red/sage/gold with strict semantic roles.
- Treating mascot as decorative; it must represent agent role or quality judgment.
- Overfilling frames; negative space is part of the premium look.
- Using red casually; red must mean reject/fail.
- Delivering a zip without a preview/contact sheet; the user needs to inspect the vibe quickly before approving template build-out.