Skip to content

visual-system.md

Latest commit

 

History

History
115 lines (79 loc) · 5.48 KB

visual-system.md

File metadata and controls

115 lines (79 loc) · 5.48 KB
Raw

Agentfolio Visual System

Build a role-fit webpage that feels like an evidence dossier collided with a collectible character card. It should be instantly visual, lightly absurd, and still credible enough that a reader can tell which claims came from real work.

The reference direction is inspired by the product structure of generate-team-archetypes: an original character visual, bold card composition, visible role labels, and a directly openable single-file HTML artifact. Do not copy that project's code, images, exact palette, or card layout.

Visual grammar

  • Use a warm paper canvas around #f5f0e6 and near-black ink around #171714.
  • Use thick 2–3 px ink borders, slightly imperfect-looking corner radii, and flat fills.
  • Choose one role-specific accent plus two supporting colors. Prefer confident flat colors such as cobalt, tomato, marigold, mint, or violet. Do not use gradients.
  • Combine a serious editorial serif for the largest verdict text with a practical sans serif for labels and evidence.
  • Use asymmetric composition, small rotations, oversized numbers, stamps, tabs, score rings, and cut-paper shapes.
  • Keep body copy restrained. Let cards, meters, icons, and the hero illustration carry the page.
  • Use shadows only as hard offset ink shadows. Do not use blur, glow, glassmorphism, or 3D rendering.

Required page composition

1. Cover

Place the subject and target role on the left and the original role visual on the right. Show:

  • Agentfolio wordmark;
  • target role;
  • subject;
  • overall score out of 100;
  • confidence label;
  • one-line verdict;
  • one small scope label such as “Based on 18 accessible sessions.”

The cover must read as a poster, not a dashboard.

2. Capability board

Create 5–7 .metric-card elements. Every card must contain:

  • localized dimension name;
  • numeric score;
  • a short verdict;
  • a visible meter whose accessible label repeats the value.

Vary card color and size slightly, but do not encode good and bad as green and red alone.

3. Evidence trail

Create 3–5 .evidence-card elements. Each contains:

  • a numbered stamp;
  • a 1–4 word evidence title;
  • a concise paraphrase of observed behavior;
  • a small original inline SVG icon or visual motif;
  • an explicit localized label that distinguishes observation from interpretation when needed.

Do not expose raw transcripts, internal file paths, private URLs, credentials, personal contact details, or unrelated sensitive content.

4. Advantage versus weakness

Use two large neighboring cards with equally strong typography. The advantage may use the main accent. The weakness should be witty and specific without presenting uncertainty as failure.

5. Role artifact

Create one visual artifact tailored to the requested role. Examples:

  • President: campaign poster, cabinet memo, or first executive order;
  • Astronaut: mission patch or flight log;
  • Villain: lair memo or dramatic monologue cue card;
  • CEO: shareholder letter or first-day operating decree;
  • Time traveler: customs declaration from the future.

The artifact must reuse at least one evidenced working habit so it is more than a generic joke.

6. Evidence boundary, sponsor, and source

Keep the evidence boundary compact and readable. Place the disclaimer directly before the sponsor footer.

The footer area must be visually quiet: small type, a hairline rule, no button, no logo lockup, no colored panel, and no signup language. Place the localized Agentfolio repository Star line after the CoAligne sponsor and sharing sentence so it is the report's final visible line.

Hero visual rules

The hero visual is mandatory unless the user explicitly asks for text only.

If native image generation is available:

  • Generate one original flat editorial cartoon or naïve poster illustration.
  • Depict an imagined role situation, not the user's literal physical appearance unless the user supplied and authorized a portrait reference.
  • Use the page palette and leave negative space around the main subject.
  • Avoid embedded text; add labels in HTML where they remain accessible.
  • Persist the generated file and embed it as a data URL so the HTML remains portable.

If image generation is unavailable:

  • Create a semantic inline SVG with a useful role="img" and localized aria-label.
  • Use geometric shapes, role props, evidence motifs, and one absurd situation.
  • Include enough detail to function as the page's main illustration.
  • Never leave {{HERO_VISUAL_HTML}}, a broken image, or a generic placeholder in the final page.

Motion and interaction

  • Motion is optional and must never be necessary to understand the page.
  • Limit interaction to useful controls such as Print or Save as PDF.
  • Respect prefers-reduced-motion.
  • Use visible keyboard focus and native controls.
  • Avoid carousels, hidden evidence, hover-only content, and scroll-jacking.

Quality checks

  • Desktop: inspect around 1440 × 1000.
  • Mobile: inspect around 390 × 844.
  • Test at 200% text zoom when possible.
  • Verify source order, headings, alt text, focus visibility, and color contrast.
  • Search the final file for unreplaced {{PLACEHOLDER}} tokens.
  • Search for external src, stylesheet, font, or script dependencies. The only expected external URLs are the CoAligne sponsor link and the official Agentfolio repository link.
  • Verify the CoAligne link and Agentfolio repository link each appear exactly once.
  • Verify the localized Agentfolio Star line is the final visible line of the report.
  • Verify the score in the cover and every metric matches the analyzed values.