# Outlex Marketing Design System — Agent Reference

Status: approved for local agent enforcement on 2026-06-13. Public release or deploy still requires an explicit release action.

Canonical base references:

- Brand: `https://design.outlex.ai/brand.md`
- Tokens: `https://design.outlex.ai/tokens-v2.css`
- Component grammar: `https://design.outlex.ai/GRAMMAR.md`
- Marketing guide: `https://design.outlex.ai/marketing.md`

## Core Direction

Marketing visuals use the v2 Precision + Atmosphere system, adapted for editorial campaign assets:

- Minimal copy.
- One strong message per asset.
- One real user pain per asset.
- Direct second-person body copy when the asset is product-led.
- Dark premium legal/workspace imagery.
- Outlex mark in the header.
- Small mono label/category.
- Large Newsreader/Tiempos editorial headline.
- One sage accent phrase.
- Restrained footer with Outlex and URL.

The eSignature/product-update image is a style direction and a signature-specific asset. New campaign backgrounds should share the mood, lighting, negative-space discipline, hierarchy, directness, and premium legal-workspace texture, but must not reuse the same pen/paper/glass composition unless the asset is about signatures, approvals, or contract execution.

The output standard is not "a good concept." The output standard is a ready-to-use asset or copy draft that explains what the user can now do, why it matters, and how the visual should be produced.

## Agent Operating Model

Every marketing agent that briefs, recommends, creates, or QA's a visual must:

1. Read `brand.md`, `voice-marketing.md`, and this `marketing.md`.
2. Identify the asset class.
3. Identify buyer pain, old workflow, new workflow, usage instruction, and proof/source.
4. Select a template ID or asset system.
5. Output the required asset contract.
6. State whether the background, image, icon, favicon, screenshot, or video direction is approved.
7. Render or request the required sizes.
8. Run the QA gate.
9. Stop before publishing, scheduling, or canonicalizing until founder approval is explicit.

## Asset System Coverage

| Asset Class | Default Direction | Approval Requirement |
|---|---|---|
| Social images | Minimal dark editorial templates with one headline and one accent phrase | Every new mockup and background needs approval |
| Email hero images | 1200px-wide editorial hero with a single CTA or product update | Every new hero needs approval before send/schedule |
| Blog and OG covers | 16:9 dark editorial cover with center-safe Open Graph crop | Every campaign/image family needs approval |
| Campaign hero images | Website/social hero imagery with responsive crop plan | Every landing/campaign mockup needs approval |
| Product screenshots | Real product UI only, used when UI is the subject | Requires product-state and copy approval |
| Background images | Campaign-specific legal/workspace imagery with dark negative space | New images are mockups until approved |
| Icons | Functional monoline signals, currentColor, Lucide-compatible | New reusable/custom icons need approval |
| Favicons/app icons | Outlex mark only, size-tested, no wordmark | Every variant needs approval |
| Social avatars | Mark on dark field, circular-crop safe | Every variant needs approval |
| Video/motion | Slow editorial motion, muted-safe, real UI only when shown | Storyboard/frame set needs approval before production |

## Template IDs

| Template ID | Use |
|---|---|
| `social-product-update-portrait` | LinkedIn portrait launch and product update visuals |
| `email-product-update-hero` | Product update and newsletter hero modules |
| `blog-cover-editorial` | Blog, essay, and SEO cover images |
| `linkedin-founder-post` | Founder POV and thought-leadership visuals |
| `campaign-hero-editorial` | Launch, webinar, demo, and landing campaign hero visuals |

## Asset Routing

| Need | Use | Required Output |
|---|---|---|
| Product update | `social-product-update-portrait` plus optional `email-product-update-hero` | 1200x1500, 1200x1200 crop, email hero if needed |
| Founder POV | `linkedin-founder-post` | 1200x1500, short quote/headline, one accent phrase |
| Blog/essay | `blog-cover-editorial` | 1600x900 plus 1200x630 Open Graph variant |
| Launch/event landing | `campaign-hero-editorial` | 1600x900 plus portrait social adaptation |
| Feature icon | Icon system | SVG at 24, 32, 48; currentColor; 1.5px stroke |
| Product capability icon | Icon system | SVG at 48 or 64; reusable icons need approval |
| Favicon/app icon | Mark-only icon system | 16, 32, 48, 180, 192, 512px checks |
| Social avatar | Mark-only icon system | 400x400, circular-crop safe |
| Video teaser | Video sequence system | 1080x1350, 10-20 seconds, muted-safe |
| Website hero loop | Video sequence system | 1920x1080, 8-15 seconds, static fallback |

## Required Agent Contract

```yaml
asset_request:
  campaign_name: ""
  asset_goal: "announce | educate | convert | remind | invite | explain"
  audience: "founder | COO | CTO | investor | partner | customer | press"
  channel: "linkedin | email | blog | website | paid | event | video | favicon | app_icon | avatar | icon"
  asset_class: "social_image | email_hero | blog_cover | campaign_hero | screenshot | background | icon | favicon | app_icon | avatar | video"
  template_id: ""
  dimensions: ""
  user_moment: ""
  buyer_pain: ""
  old_workflow: ""
  new_workflow: ""
  usage_instruction: ""
  proof_or_source: ""
  headline: ""
  accent_phrase: ""
  label: ""
  category: ""
  body_copy: ""
  cta_label: ""
  background_direction:
    family: "signature_contract_execution | legal_operations | ai_legal_research | founder_operator | infrastructure | event_demo"
    subject: ""
    mood: "dark editorial, premium, precise"
    required_negative_space: "left | center | right | top"
    reference_match: "match mood, contrast, typography, and composition discipline; do not copy exact backdrop unless signature/contract execution"
    forbidden_elements:
      - readable fake text
      - gavels/scales/courtrooms
      - logos
      - generic SaaS gradients
  icon_direction:
    needed: false
    icon_role: ""
    style: "monoline 1.5px, currentColor, semantic token"
  video_direction:
    needed: false
    duration: ""
    format: ""
    motion_style: ""
  approval_required: true
```

## Required Rules

- Fetch and follow `brand.md` before any visual work.
- Use the canonical Outlex mark SVG with gradient preserved.
- Never use `display:none` for SVG symbol containers.
- Display face stays weight 400.
- Inter is max 600.
- Accent only one word or short phrase.
- No generic SaaS gradients, gavels, scales, courtrooms, fake 3D, or cluttered feature cards.
- Product screenshots appear only when the UI is the subject.
- No internal launch names, MVP language, ticket numbers, or unsupported compliance claims.
- Product-led copy starts from buyer pain or a concrete product truth, not "introducing," "unlock," "streamline," or "AI-powered."
- Use "you" for product updates, email, landing pages, and social captions unless the format is explicitly founder-first.
- Do not use law-firm-backed, provider-network, external-authority, or borrowed-halo positioning unless explicitly approved for the current asset.

## Background Rules

Use generated or real editorial legal/workspace imagery:

- dark negative space for headline,
- subtle paper/desk/contract/glass texture,
- low-key lighting,
- restrained sage/teal highlights,
- no readable fake text,
- no logos,
- no people unless explicitly founder/customer/event-led.

Product-update image prompt recipe:

```text
Dark editorial legal workspace photograph, premium European legal-operations mood,
low-key directional light, deep near-black negative space on [left/bottom],
subtle sage/teal highlight, [asset family subject] visible but not busy,
real desk/document/workflow texture, cinematic depth of field, no readable text,
no logos, no people, no gavels/scales/courtrooms, no SaaS gradient art.
Composition leaves room for a large lower-left Newsreader headline and restrained footer.
```

## Product-Update Reference Pattern

Use this pattern for launches, feature updates, release notes, email heroes, product social images, and product-led LinkedIn assets.

### Composition

- Top-left: Outlex mark inside a subtle rounded square, then a mono category label.
- Top-right: one short product area label in sage or muted mono.
- Background: dark legal/workspace photograph or generated image, with most detail on the right or upper half and enough dark negative space for the headline.
- Main headline: large Newsreader/Tiempos 400, lower-left, one line break chosen by rhythm.
- Accent: one short sage italic word or phrase inside the headline.
- Body: one short second-person paragraph naming the painful old workflow and the better new one.
- Footer: thin divider, Outlex descriptor on the left, URL on the right.

### Copy Formula

```text
[Capability], now [specific product placement or workflow change].

You [specific user/counterparty/team] [new behavior] in one place -
no more [painful workaround], [lost context], or [manual chase].
```

Good:

- "Negotiation, now built into the document."
- "You and your counterparty work in one place - every comment, version, and diff tracked."
- "One source of truth, not a chain of Final_v7.docx emails."

Reject:

- "Introducing our negotiation workflow."
- "Unlock seamless collaboration."
- "A comprehensive AI-powered legal solution."

### Worked Example: Negotiation Product Update

Use this as the minimum specificity bar for product-update visuals.

```yaml
asset_request:
  campaign_name: "Negotiation product update"
  asset_goal: "announce"
  audience: "founder | COO | legal operator"
  channel: "linkedin"
  asset_class: "social_image"
  template_id: "social-product-update-portrait"
  dimensions: "1080x1350"
  user_moment: "A contract is ready for counterparty comments, but every round usually turns into email attachments and unclear versions."
  buyer_pain: "You lose the source of truth once negotiation leaves the document."
  old_workflow: "Email Final_v7.docx, collect comments in side threads, then reconcile versions manually."
  new_workflow: "Work with the counterparty inside the document, with comments, versions, and diffs tracked in one place."
  usage_instruction: "Open the document, start negotiation, invite the counterparty, and keep the review trail attached to the contract."
  proof_or_source: "Use only if the negotiation workflow is shipped or approved for launch."
  headline: "Negotiation, now built into the document."
  accent_phrase: "Negotiation"
  label: "New in Outlex"
  category: "Product update"
  body_copy: "You and your counterparty work in one place - every comment, version, and diff tracked. One source of truth, not a chain of Final_v7.docx emails."
  cta_label: "See the workflow"
  background_direction:
    family: "signature_contract_execution"
    subject: "dark contract page, pen, and desk texture with right-side detail and lower-left negative space"
    mood: "dark editorial, premium, precise"
    required_negative_space: "left"
    reference_match: "match the reference image's low-key lighting, contract texture, large lower-left serif headline, sage accent, and restrained footer"
    forbidden_elements:
      - readable fake text
      - gavels/scales/courtrooms
      - logos
      - generic SaaS gradients
  approval_required: true
```

Production prompt:

```text
Dark editorial legal workspace photograph, premium European contract-negotiation mood,
low-key directional light, deep near-black negative space on the lower-left,
contract page and pen visible with detail concentrated on the right side,
subtle sage/teal reflection, cinematic depth of field, no readable text,
no logos, no people, no gavels/scales/courtrooms, no SaaS gradient art.
Composition leaves room for a large lower-left Newsreader headline, one sage italic word,
a short second-person body paragraph, and a quiet footer.
```

QA expectation: the finished asset should feel like the reference image in the first three seconds, explain the user pain without the caption, and give a designer enough production detail to render without inventing layout, copy, or background direction.

## Image Families

| Family | Use For | Visual Motifs |
|---|---|---|
| Signature/contract execution | eSignature, approval, document completion | Paper edge, pen, signature area, glass reflection |
| Legal operations | Legal Hub, workflow, matter tracking | Folders, binder edge, desk grid, calm workspace |
| AI/legal research | Lexi, research, answers, citations | Layered documents, subtle screen reflection, citation-like texture without readable text |
| Founder/operator | Founder posts, strategic POV, market thesis | Laptop edge, notebook, contract folder, early/late light |
| Infrastructure | Platform, launch, campaign heroes | Abstract desk geometry, low-key glass, subtle light beams |
| Event/demo | Webinar, briefing, workshop, demo | Staged workspace, date/time metadata, no fake event UI |

## Product Screenshot Rules

- Use product screenshots only when the product UI is the subject.
- Screenshots must be real product UI, current, and free of customer data.
- Crop the UI to support the message instead of creating a feature collage.
- Avoid fake UI, invented legal text, decorative dashboard cards, and impossible product states.

## Icon, Favicon, And Avatar Rules

- Icons are functional signals, not decoration.
- Use Lucide-compatible monoline geometry: 1.5px stroke, round caps/joins, `currentColor`.
- No filled duotone icon sets.
- No brand gradient except the Outlex mark.
- Feature icons may use one small semantic accent dot or stroke.
- Favicons, app icons, social avatars, and launcher icons use the Outlex mark only.
- Never put the wordmark in favicon sizes.
- Test favicon/app icon variants at 16, 32, 48, 180, 192, and 512px before approval.

## Video And Motion Rules

- Use editorial restraint: slow push-in, parallax, soft light sweep, or precise UI transition.
- All videos must work muted.
- No bouncy SaaS motion, fast zooms, spinning 3D, particle clutter, or fake product reveal.
- Product UI motion must show real product states.
- Standard sequence: atmosphere open, mono label, headline, optional product/detail reveal, CTA/URL hold, Outlex mark.
- Export a static fallback frame for every video.

Every new background image or visual mockup must be presented for approval before campaign use or public publication.

## Production Workflow

1. Pick campaign type.
2. Pick template ID.
3. Identify buyer pain, old workflow, new workflow, usage instruction, and proof/source.
4. Write one message and one accent phrase.
5. Generate or select a campaign-specific background.
6. Replace top-level template variables.
7. Render all required sizes.
8. QA brand, contrast, crop, text fit, claims, tone, buyer-pain fit, and reference match.
9. Present the full mockup set for approval.
10. Publish only after approval.

## QA Gate

Fail the asset if:

- more than one idea competes for attention,
- headline does not fit,
- copy does not speak to a real user pain,
- the product moment is not understandable without extra explanation,
- background is unrelated to the campaign,
- the signature backdrop is reused for unrelated topics,
- visible text appears in the generated background,
- mark treatment is incorrect,
- copy includes unsupported legal/compliance claims,
- the visual was not approved.

## Required Final Handoff

```markdown
## Visual Handoff

- Template ID:
- Source file:
- Preview/export:
- Dimensions:
- Asset class:
- Background/image status: approved | needs approval | placeholder
- Icon/favicon/video status: approved | needs approval | not applicable
- Claims status: approved | needs legal review | no claims
- QA result: pass | needs revision
- Reference match: pass | needs revision
- Buyer-pain fit: pass | needs revision
- Approval needed from:
```