Efecto Graphic Design

Efecto — Graphic Design Guide

Design graphic assets — presentations, pitch decks, event posters, email headers, blog images, OG cards, business cards, resumes, menus, infographics, invitations, newsletters, and documents — using the Efecto design tool.

Setup

This skill requires the Efecto MCP server. Check if it's available by looking for tools like create_session, add_section, or get_document in your tool list.

If Efecto tools are NOT available, install the MCP server:

Claude Code

claude mcp add efecto -- npx -y @efectoapp/mcp

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

Windsurf / VS Code / Other MCP Clients

{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

Once installed, you'll have access to 68 MCP tools, including image search and native animation authoring. The MCP server connects your agent to the Efecto design canvas at efecto.app.

How It Works

1. Your agent creates an Efecto session via MCP (create_session)
2. You open the returned design URL in your browser
3. The agent pushes design commands — you see every change live
4. Iterate with natural language until the design is perfect

Using Efecto Tools — Quick Reference

Session Workflow

Every design starts with a session:

create_session  label: "Pitch Deck"

Returns { sessionId, documentId, designUrl }. Tell the user to open the URL, then call wait_for_connection (blocks until paired). If the user already has an Efecto URL with ?session=..., call attach_session with that URL instead of creating a duplicate session. Never call create_session twice to "reconnect" — a paired session refuses overwrite without force: true. Use session_status to inspect routing ({ all: true } for the full session list).

Building Designs

The primary workflow is: create artboard → add sections with JSX → refine with updates.

# 1. Create an artboard
create_artboard  name: "Slide 1"  width: 1920  height: 1080  backgroundColor: "#1a1a1a"  className: "flex flex-col"

# 2. Add content with JSX (most efficient way to build)
add_section  parentId: "<artboard-id>"  jsx: '<section name="Title Slide" className="flex flex-col items-center justify-center gap-6 p-24 w-full h-full">
  <h1 name="Presentation Title" className="text-7xl font-extrabold text-white text-center">Your Title Here</h1>
  <p name="Presentation Subtitle" className="text-2xl text-gray-400">Subtitle text</p>
</section>'

# 3. Read current state to get node IDs
get_document

# 4. Fine-tune with batch updates
batch_update  updates: [
  { nodeId: "abc", className: "text-8xl font-black text-white" },
  { nodeId: "def", textContent: "New text" }
]

All 68 Tools

Scoped reads (large docs). get_document returns the whole tree by default — on multi-artboard docs that can blow past tool-result token caps. Prefer scoped modes: outline: true (one-line summary per top-level child), artboardId: "..." (single artboard), maxDepth: N (cap descent; 0 = artboard header only, 1 = top-level children). Response includes an approx-token count so you can decide whether to widen. Drill into a subtree with get_node_tree after.

Routing inspection. session_status returns the legacy single-session shape by default (sessionId, paired, browserConnected, knownSessions). Pass { all: true } for the list shape — every session in this MCP process with isActive/paired flags. If this MCP process restarted, attach_session with the current browser URL makes that session active again.

JSX Format for add_section

Write standard HTML tags with Tailwind className. The tag determines the node type:

<div>/<section>/<nav>  → frame       <img>     → image
<h1>-<h6>/<p>/<span>   → text        <button>  → button
<a>                    → link        <svg>     → icon
<input>                → input       <video>   → video

Icons: <svg icon="arrow-right" className="w-5 h-5 text-gray-600" />

Critical Gotchas

• Artboard className must include flex flex-col — without it, children overlap at (0,0)
• Artboard backgroundColor is a property, NOT a className — use backgroundColor: "#1a1a1a", not className: "bg-gray-900"
• Never use arbitrary hex in className — bg-[#f9f9f9] silently fails. Use named colors (bg-gray-50) or inline style
• Use grow instead of flex-1 — flex-1 doesn't work in Efecto
• Buttons ignore children — use a flex container with <span> + <svg> instead
• Always add w-full on direct children of artboards

Required Structure and Quality Gate

• Name meaningful layers. Give every section, layout group, card, text block, control, image, and icon a concise semantic name attribute (for example, <section name="Title Slide">, <div name="Metric Group">, <h1 name="Presentation Title">). Never ship generic names such as Frame, Text, or Icon; unnamed purely decorative leaves are the only exception.
• Declare nested layout. Every frame with two or more children must explicitly include flex or grid in className, including nested wrappers. Add the matching direction, alignment, gap, and wrapping classes; do not rely on implicit block flow.
• Meet WCAG AA contrast. Normal text must reach 4.5:1 and large text 3:1. Evaluate text against its effective rendered background: use its own background when present, otherwise walk through ancestor frames to the artboard, including opacity/alpha compositing. Resolve semantic theme tokens in the active mode before judging contrast.
• Audit until clean. After building or editing, call audit_design. Fix every contrast-ratio, implicit-block-container, and generic-layer-name finding with batch_update or replace_section, then call audit_design again. If you use repair_design, inspect its changes and re-audit. Do not declare completion until all three finding types are zero, and use get_document to confirm meaningful layers retain semantic names.

Images — Use Real Photos, Not Placeholders

Use search_images to find free, high-quality stock photos from Lummi. No session required — call it anytime.

search_images
  query: "conference stage audience"
  orientation: "horizontal"
  luminance: "dark"
  limit: 4

Then apply images to your designs:

• Image node: add_node with type: "image", src: "<url>", alt: "...", className: "w-full h-[400px] object-cover rounded-2xl"
• Background fill: set_fill with fill: { type: "image", url: "<url>", size: "cover" }
• In JSX: <img src="<url>" alt="..." className="w-full h-[400px] object-cover rounded-2xl" />

Tips for graphic design: Match orientation to your artboard (vertical for posters/stories, horizontal for banners/presentations, square for social cards). Use luminance: "dark" for dark-themed designs. Search before designing — build layouts around real images, not empty gray boxes.

Shader Nodes & Visual Effects

Add visual effects to graphic designs with shader nodes. Use add_node with type: "shader".

Generative Backgrounds

Create eye-catching backgrounds without images:

add_node
  parentId: "<artboard-id>"
  type: "shader"
  shaderType: "meshGradient"
  className: "w-full h-full"

Shader types: meshGradient (organic blending), dotGrid (tech/data), voronoi (organic cells), liquidMetal (premium), chrome (reflective), pulsar (energy), blackHole (dramatic), glass (frosted), spiral (playful), particles (atmospheric), fireworks (celebration).

Apply Effects to Images

Process photos with ASCII, dither, halftone, glitch, or art effects:

search_images  query: "portrait"  orientation: "vertical"  limit: 1
add_node
  parentId: "<artboard-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "halftone-mono"
  effectEnabled: true
  className: "w-full h-full"

Effect categories: ASCII (ascii-standard, ascii-dense, ascii-minimal, ascii-blocks), Dither (dither-floyd-steinberg, dither-atkinson), Halftone (halftone-mono, halftone-cmyk), Glitch (glitch-vhs, glitch-digital), Art (art-kuwahara, art-crosshatch, art-lineart, art-engraving, art-stipple).

Post-Processes

Stack additional effects: grain, vignette, bloom, scanlines, noise, pixelate, sepia, color-tint.

add_node
  parentId: "<id>"
  type: "shader"
  shaderType: "meshGradient"
  postProcesses: [
    { type: "grain", enabled: true, settings: { intensity: 0.3 } },
    { type: "vignette", enabled: true, settings: { intensity: 0.5 } }
  ]
  className: "w-full h-full"

Best for: Presentation backgrounds, poster visuals, event graphics, blog hero images, OG cards with distinctive visual treatments.

Native Animation

Graphic assets can use native Efecto layer animations when the user asks for motion, slides, reels, or presentation playback. Do not use Tailwind animate-*, transition-*, or duration-* classes.

Workflow: inspect the target, call list_animation_presets, then apply a compact plan with apply_animation_plan. Animate hierarchy first: background or hero visual, headline, supporting detail, CTA or event details, then secondary ornaments. Use update_artboard with timelineDuration when the motion needs a deliberate ending.

Good defaults: 0.35-0.6s for hero/title motion, 0.18-0.35s for smaller details, 0.04-0.12s stagger, ease-out entrances, ease-in exits. For title text, use appearBy: "word" or "line"; reserve "char" for kinetic poster moments. For poster, slide, and frame reveals, prefer explicit mask presets (mask-in, fade-mask-in, slide-mask-in, scale-mask-in) and set maskStyle, maskDirection, or maskOrigin when the reveal shape matters.

Mindset: Design for the Context

Every graphic has a context that dictates the rules:

• Presentation slides are projected or screen-shared — big text, simple layouts, one idea per slide
• Event posters are scanned quickly — bold headline, essential details (date, place, CTA), strong visual identity
• Email headers are 600px wide and compete with dozens of other emails — punchy, branded, action-oriented
• Blog hero images set the tone for an article — atmospheric, typographic, or illustrative
• OG/share cards are the first impression of a link — they need to work at thumbnail size AND full size

The common thread: less is more. Every element must earn its place.

Presentations & Pitch Decks

Artboard Sizes

Slide Design Rules

1. One idea per slide. If you need bullet points, each bullet should be its own slide.
2. 30pt rule. At 1920px width, nothing smaller than text-3xl (30px). If projected, even text-4xl is the minimum.
3. 6 words per line, 6 lines max. Less is better. If you have a paragraph, you have a document, not a slide.
4. Full-bleed visuals. When using an image, let it fill the entire slide. Overlay text on a solid dark block (not a gradient — use solid colors).
5. Consistent grid. Pick a layout system and stick with it across all slides. Title always in the same position.
6. Slide numbers. Subtle but present — helps navigation during Q&A.

Slide Types

Title Slide

<section className="flex flex-col items-center justify-center gap-6 p-24 bg-gray-900 w-full h-full">
  <span className="text-xl font-semibold text-blue-400 uppercase tracking-widest">Q4 2026 Update</span>
  <h1 className="text-7xl font-extrabold text-white text-center leading-none tracking-tight">Building the Future of Design</h1>
  <p className="text-2xl text-gray-400 font-medium">Acme Inc. / October 2026</p>
</section>

Section Divider

<section className="flex flex-col items-start justify-center gap-4 px-24 py-16 bg-blue-600 w-full h-full">
  <span className="text-xl font-bold text-blue-200 uppercase tracking-widest">Part 02</span>
  <h2 className="text-6xl font-extrabold text-white leading-tight">Product Strategy</h2>
</section>

Content Slide (Text + Visual)

<section className="flex items-center gap-16 px-24 py-16 bg-white w-full h-full">
  <div className="flex flex-col gap-6 grow">
    <h2 className="text-4xl font-bold text-gray-900 leading-snug">Revenue grew 3x in 12 months</h2>
    <p className="text-2xl text-gray-500 leading-relaxed">We hit $10M ARR ahead of schedule, driven by enterprise adoption and a 95% retention rate.</p>
  </div>
  <div className="w-[600px] h-[500px] bg-gray-100 rounded-3xl"></div>
</section>

Big Number / Stat Slide

<section className="flex flex-col items-center justify-center gap-6 p-24 bg-gray-900 w-full h-full">
  <span className="text-9xl font-black text-blue-400">3x</span>
  <h2 className="text-4xl font-bold text-white text-center">Revenue growth in 12 months</h2>
  <p className="text-xl text-gray-500">$3.2M to $10M ARR</p>
</section>

Quote Slide

<section className="flex flex-col items-center justify-center gap-8 px-32 py-24 bg-gray-50 w-full h-full">
  <p className="text-4xl text-gray-700 text-center leading-relaxed italic">"The best tool we've adopted this year. Our design velocity doubled."</p>
  <div className="flex items-center gap-4">
    <div className="w-16 h-16 bg-gray-300 rounded-full"></div>
    <div className="flex flex-col">
      <span className="text-xl font-semibold text-gray-900">Jamie Rivera</span>
      <span className="text-lg text-gray-500">Head of Design, Linear</span>
    </div>
  </div>
</section>

Closing / CTA Slide

<section className="flex flex-col items-center justify-center gap-8 p-24 bg-gray-900 w-full h-full">
  <h2 className="text-6xl font-extrabold text-white text-center">Let's build together</h2>
  <p className="text-2xl text-gray-400 text-center">hello@acme.com</p>
  <div className="flex items-center gap-2">
    <div className="w-10 h-10 bg-blue-600 rounded-lg"></div>
    <span className="text-xl font-bold text-gray-400">Acme Inc.</span>
  </div>
</section>

Pitch Deck Flow (10 slides)

1. Title — Company name, tagline, date
2. Problem — What pain exists (one stat or quote)
3. Solution — What you do (one sentence + visual)
4. Demo / Product — Screenshot or mockup (full-bleed)
5. Market — TAM/SAM/SOM or market size stat
6. Traction — Key metrics (big numbers)
7. Business Model — How you make money (simple diagram)
8. Team — Founders + key hires (photos + one-line bios)
9. Ask — What you need (funding amount, partnerships)
10. Closing — Contact info, thank you

Speaker Notes

Every slide artboard has a speakerNotes field — plain text the presenter sees in Efecto's Present + Control mode. Set it whenever you author a slide.

• Pass speakerNotes to create_artboard and update_artboard.
• Read existing notes via list_artboards (the field appears in the result) or get_document (rendered as a speakerNotes="..." attribute on the Artboard tag).
• Write the speaker's script, not the slide content. The slide is the headline; the notes are what gets said out loud.
• 2–4 sentences per slide. Anchor the point + transition to the next slide.
• Leave blank when the slide is self-explanatory (title cards, one-word statement slides).

create_artboard:
  name: "03 — Traction"
  width: 1920
  height: 1080
  backgroundColor: "#0a0a0a"
  className: "flex flex-col"
  speakerNotes: "Walk through the 3x ARR growth. Highlight that 80% came from enterprise upgrades, not net-new logos. Set up the next slide on retention by saying 'and the reason this is durable is...'."

Presentation Playback

The end user launches a deck from the Play dropdown in Efecto: Prototype (in-app emulator), Present (single-window fullscreen), or Present + Control (audience window + speaker controller with current slide, next slide, notes, timer). Slide order follows the layer-panel order by default; the controller has a visual (y, x) toggle for spatially-laid-out decks. Your job is to author slides + notes — the user picks playback mode.

Event Posters & Flyers

Artboard Sizes

Event Poster Hierarchy

Every event poster needs these 4 elements in this priority order:

1. What — The event name (largest text, the visual anchor)
2. When — Date and time (second-largest, must be instantly readable)
3. Where — Location or "Online" (clear and prominent)
4. CTA — "Register now" / "Get tickets" / "RSVP" (button or highlighted text)

Everything else (speakers, sponsors, descriptions) is secondary.

Event Poster Template

<section className="flex flex-col justify-between p-16 bg-gray-900 w-full h-full">
  <div className="flex items-center justify-between">
    <span className="text-lg font-bold text-gray-400 uppercase tracking-widest">Design Conf 2026</span>
    <div className="w-12 h-12 bg-blue-500 rounded-xl"></div>
  </div>
  <div className="flex flex-col gap-6">
    <h1 className="text-7xl font-black text-white leading-none">The Future of Interface Design</h1>
    <div className="flex flex-col gap-2">
      <p className="text-3xl font-bold text-blue-400">March 15, 2026</p>
      <p className="text-2xl text-gray-400">San Francisco / Moscone Center</p>
    </div>
    <button className="w-fit px-10 py-4 text-xl font-bold text-gray-900 bg-white rounded-2xl">Get Tickets</button>
  </div>
</section>

Conference Talk Slide

<section className="flex items-end gap-8 p-16 bg-gray-900 w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <span className="text-lg font-semibold text-purple-400 uppercase tracking-wider">Keynote</span>
    <h1 className="text-5xl font-extrabold text-white leading-tight">Designing with AI: What Changes and What Doesn't</h1>
    <div className="flex items-center gap-3">
      <div className="w-12 h-12 bg-gray-700 rounded-full"></div>
      <div className="flex flex-col">
        <span className="text-lg font-semibold text-white">Pablo Stanley</span>
        <span className="text-lg text-gray-500">Founder, Efecto</span>
      </div>
    </div>
  </div>
</section>

Email Headers & Newsletter Graphics

Artboard Sizes

Email Design Rules

• 600px max width is the universal email constraint. Design at 600px or 1200px (retina 2x).
• Simple layouts only. Email rendering engines are stuck in 2005. Stick to single-column or two-column max.
• Big, obvious CTA. One primary action per email. Make the button impossible to miss.
• Minimal text. The email body handles the message — the graphic is just the visual hook.
• Brand-heavy. Logo, brand colors, consistent header across all emails. Recognition matters in an inbox.

Email Header Template

<section className="flex items-center justify-between px-8 py-6 bg-gray-900 w-full h-full">
  <div className="flex items-center gap-3">
    <div className="w-8 h-8 bg-blue-500 rounded-lg"></div>
    <span className="text-xl font-bold text-white">Acme Weekly</span>
  </div>
  <span className="text-lg text-gray-400">March 2026</span>
</section>

Newsletter Hero Template

<section className="flex flex-col items-center justify-center gap-6 px-12 py-12 bg-blue-600 w-full h-full">
  <h1 className="text-4xl font-extrabold text-white text-center leading-tight">What we shipped this week</h1>
  <p className="text-xl text-blue-100 text-center">3 features, 2 fixes, 1 big announcement</p>
  <button className="px-8 py-3 text-lg font-bold text-blue-600 bg-white rounded-xl">Read the update</button>
</section>

Blog & Article Hero Images

Artboard Sizes

Blog Hero Tips

• Blog heroes set the mood, not deliver information. They can be more abstract and atmospheric.
• Title text on the hero is optional — many blogs render the title in HTML below the image.
• If including text: text-5xl to text-6xl, centered, with plenty of breathing room.
• Solid color backgrounds with minimal text work well for a clean, modern look.
• Use image fills (set_fill with type "image") for photographic heroes.

Blog Hero Template

<section className="flex flex-col items-center justify-center gap-6 px-16 py-16 bg-gray-900 w-full h-full">
  <span className="text-lg font-semibold text-blue-400 uppercase tracking-widest">Engineering</span>
  <h1 className="text-5xl font-extrabold text-white text-center leading-tight max-w-[900px]">How we reduced build times by 80%</h1>
  <p className="text-xl text-gray-500 font-medium">March 2026 / 8 min read</p>
</section>

OG Images & Share Cards

Artboard Sizes

OG Image Best Practices

OG images appear when someone shares a URL. They render at different sizes depending on the platform (300px on Slack, 500px on Facebook, 120px in some chat apps).

1. Title is king. The page title or article headline should dominate the image. text-5xl to text-6xl.
2. Brand anchor. Logo or brand name in a corner — consistent across all OG images.
3. No fine details. Renders tiny on many platforms. Simple layout, high contrast, big text.
4. Left-aligned text works well — many platforms crop the right edge on mobile.

OG Image Template

<section className="flex items-center gap-12 px-16 py-12 bg-white w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <div className="flex items-center gap-2">
      <div className="w-8 h-8 bg-blue-600 rounded-lg"></div>
      <span className="text-lg font-bold text-gray-400">acme.com</span>
    </div>
    <h1 className="text-5xl font-extrabold text-gray-900 leading-tight">How we reduced build times by 80%</h1>
    <p className="text-xl text-gray-500">A deep dive into our new CI/CD pipeline.</p>
  </div>
  <div className="w-[250px] h-[250px] bg-blue-100 rounded-3xl"></div>
</section>

Certificates & Awards

Artboard Sizes

Certificate Template

<section className="flex flex-col items-center justify-center gap-8 p-24 bg-white w-full h-full border-8 border-gray-200">
  <div className="flex items-center gap-3">
    <div className="w-10 h-10 bg-blue-600 rounded-lg"></div>
    <span className="text-2xl font-bold text-gray-900">Acme Academy</span>
  </div>
  <span className="text-xl text-gray-400 uppercase tracking-widest font-semibold">Certificate of Completion</span>
  <h1 className="text-5xl font-extrabold text-gray-900 text-center">Advanced Design Systems</h1>
  <p className="text-2xl text-gray-500 text-center">Awarded to</p>
  <p className="text-4xl font-bold text-blue-600">Jane Smith</p>
  <div className="flex items-center gap-12">
    <div className="flex flex-col items-center gap-1">
      <span className="text-lg text-gray-400">Date</span>
      <span className="text-lg font-semibold text-gray-700">March 6, 2026</span>
    </div>
    <div className="flex flex-col items-center gap-1">
      <span className="text-lg text-gray-400">Instructor</span>
      <span className="text-lg font-semibold text-gray-700">Pablo Stanley</span>
    </div>
  </div>
</section>

Business Cards

The most constrained and craft-dependent format in graphic design. Every pixel matters.

Core Principles

• Restraint is everything. A business card has ~30 cm² to work with. Every element must earn its place.
• Hierarchy through scale contrast. Name LARGE, title medium, contact details small. Three levels, max.
• Whitespace is luxury. The most memorable cards are the ones with the most breathing room. Resist filling space.
• One signature element. A bold color block, an oversized initial, a geometric accent — pick ONE.

Artboard Setup

• Standard: 336x192 (3.5" x 2" at 96 DPI) or 672x384 for higher fidelity
• Two artboards for front/back: "Front" and "Back"
• Front: name + title + brand. Back: contact details + address.
• Position side-by-side: x=0 for front, x=width+60 for back

Front Layout Patterns

• Classic: Logo top-left, name center or left-aligned, title below name. Clean, professional.
• Bold: Name in text-3xl or text-4xl spanning most of the card. Title in text-xs uppercase tracking-widest.
• Minimal: Just the name, centered, with generous margins. Nothing else on front.
• Asymmetric: Name left-aligned, large color block or accent shape on right third.
• Branded: Full-bleed brand color with reversed (white) text.

Back Layout Patterns

• Info stack: Left-aligned column: phone, email, website, address. Small icons optional.
• Two-column: Contact left, address right.
• Centered: All info centered, separated by subtle dividers or spacing.

Typography

• Name: text-xl to text-3xl, font-bold or font-extrabold. This is the HERO of the card.
• Title/role: text-xs to text-sm, font-medium, text-muted-foreground. Quiet, subordinate.
• Contact: text-xs, font-normal. Legible but small. Use tracking-wide for all-caps labels.
• NEVER use more than 2 font weights on a business card. Bold + normal. That's it.

Color Rules

• TWO colors max (plus black/white). Brand color + neutral.
• Full-bleed color backgrounds make cards stand out physically.
• Dark cards (bg-zinc-950, bg-slate-900) feel premium.

Rules

• NO paragraphs. No sentences. Just name, title, contact data.
• NO decorative borders around the entire card — they feel dated.
• ALWAYS include: name, title/role, at least email and phone.
• Horizontal orientation is standard. Vertical is bold and distinctive — suggest it for creative professionals.

Resumes / CVs

A single-page professional document that must be scannable in 6 seconds.

Core Principles

• Scannable in seconds. Recruiters spend 6-10 seconds per resume. Visual hierarchy is critical.
• Information-dense but organized. Resumes pack a lot of content. The design's job is to make density feel clear, not cluttered.
• Conservative elegance. Bold design choices should be subtle — a strong color accent, a distinctive layout — not experimental.
• Content is king. The text matters more than the styling. Never sacrifice information space for visual decoration.

Artboard Setup

• US Letter: 816x1056 (8.5" x 11" at 96 DPI)
• A4: 794x1123 (210mm x 297mm at 96 DPI)
• Single artboard — resumes should be ONE page.

Layout Patterns

• Two-column (most popular): Narrow sidebar (w-1/3) for contact, skills, education + wide main column (w-2/3) for experience, projects.
• Single-column: Full-width, traditional. Header -> Summary -> Experience -> Education -> Skills. Classic and ATS-friendly.
• Top header + single column: Bold header band with name + contact, then single-column content below.
• Asymmetric: Sidebar with accent color background for visual distinction.

Section Hierarchy

1. Name + contact — text-2xl to text-3xl font-bold, followed by email, phone, location, LinkedIn in text-xs
2. Experience — company + role + dates, with 2-3 bullet achievements each
3. Education — degree, school, year
4. Skills — grouped by category (Languages, Frameworks, Tools)
5. Optional: Summary (2 lines max), Projects, Certifications

Typography

• Name: text-2xl to text-3xl, font-bold. The only large text on the page.
• Section headers: text-sm uppercase tracking-widest font-bold — acts as visual anchors
• Company/role: text-sm font-semibold for company, font-medium for role
• Body/bullets: text-xs to text-sm, font-normal. Compact but readable.
• Dates: text-xs, text-muted-foreground, right-aligned or inline

Color Strategy

• ONE accent color for section headers, sidebar, or name. Subtle — not a rainbow.
• Dark: slate-900 or zinc-900 for body text. Never pure black.
• Accent choices: blue-700 (professional), emerald-700 (creative), slate-700 (conservative), amber-700 (warm)
• Sidebar background: muted accent like slate-50, blue-50, or a subtle tint

Rules

• ONE page. No exceptions unless explicitly asked for multi-page CV.
• NO photos unless explicitly asked (photos on resumes are culturally variable).
• NO icons for contact info — they waste space. Just text.
• NO decorative elements. Every pixel should convey information.
• USE consistent date formatting: "Jan 2023 - Present" or "2023 - Present"
• USE real-sounding content, not "Lorem ipsum." Realistic job titles, companies, and bullet points.

Flyers (Detailed Design Guide)

Extends the "Event Posters & Flyers" section above with deeper layout patterns, color psychology, and typographic rules for standalone promotional flyers.

Core Principles

• Impact from 3 feet away. Flyers compete for attention on bulletin boards, in stacks, on screens. The headline must PUNCH.
• Essential info only. WHAT + WHEN + WHERE + HOW (to attend/buy/register). Everything else is noise.
• Bold visual hierarchy. Three tiers: (1) Headline/event name — massive, (2) Key details — medium, (3) Fine print — small.
• Energetic composition. Flyers should feel dynamic — angled text, color blocks, overlapping elements, strong contrast.

Artboard Setup

• Standard flyer: 816x1056 (US Letter) or 794x1123 (A4)
• Half-page: 816x528 or compact 540x720
• Social/digital flyer: 1080x1080 (square) or 1080x1350 (4:5)

Layout Patterns

• Stacked bold: Giant headline top, image/graphic middle, details bottom. Reads top-to-bottom.
• Full-bleed image + overlay: Photo fills the card, semi-transparent overlay for text readability. Dramatic.
• Split composition: Color block top (headline) + white/dark bottom (details). Clean separation.
• Diagonal energy: Angled divider between image and text zones. Feels active and dynamic.
• Centered stack: Everything centered, stacked vertically. Works for elegant/minimal events.
• Typographic: No image — pure type. Giant headline, details in contrasting weight/size. Bold and editorial.

Typography

• Headline: text-5xl to text-9xl, font-extrabold or font-black, tracking-tight. ALL CAPS is encouraged.
• Date: text-xl to text-2xl, font-bold. Consider uppercase tracking-widest for emphasis.
• Details: text-sm to text-base, font-normal. Quiet but readable.
• MAX 2 text sizes for details (date + location should be similar). Headline is the outlier.

Color Psychology for Events

• Concert/party: Neon on black (emerald-400, fuchsia-500, cyan-400 on zinc-950). High energy.
• Conference/professional: Dark blue or slate on white. Clean authority.
• Community/cultural: Warm tones (amber, orange, rose) on cream or dark backgrounds.
• Sale/promotion: Red + yellow/white. Urgency colors. bg-red-600 text-white.
• Art/gallery: Monochromatic or black + one accent. Minimalist sophistication.

Rules

• NO tiny text. If the date isn't readable at arm's length, it's too small.
• NO walls of text. A flyer is NOT a brochure. Max 3-4 short text blocks.
• ALWAYS include date, time, location, and how to attend. Missing info = useless flyer.
• CONTRAST is mandatory. Text must be instantly readable over any background.

Restaurant / Cafe Menus

A functional document that must be beautiful, scannable, and make food sound irresistible.

Core Principles

• Scannability first. Customers scan menus in an F-pattern or Z-pattern. Category headers must be instantly visible.
• Make food the hero. The item names and descriptions should dominate — not the decoration.
• Price alignment. Prices must be easy to find but not dominant. Right-aligned, consistent formatting.
• Atmosphere through design. The menu IS the restaurant's brand. Its style should match the dining experience.

Artboard Setup

• Single page menu: 816x1056 (letter) or 794x1123 (A4)
• Folded menu (each panel): 408x528 or similar half-page
• Compact/table tent: 540x720 or 480x640
• For multi-page: create multiple artboards side-by-side

Layout Patterns

• Single column: Category by category, top to bottom. Best for short menus (< 20 items).
• Two column: Left column + right column. Maximizes items per page. Use for larger menus.
• Centered elegant: Everything centered, generous spacing. Perfect for fine dining with fewer items.
• Grid cards: Items in card-style blocks with image placeholders. Modern, casual restaurants.
• Asymmetric: One wide feature column + one narrow specials/drinks column.

Section Structure

STARTERS          <- Category header: text-lg to text-xl, font-bold, uppercase tracking-widest

Bruschetta ............... $12    <- Item name: text-sm font-semibold, price right-aligned
  Tomato, basil, balsamic         <- Description: text-xs text-muted-foreground

Burrata Salad ............ $16
  Heirloom tomato, arugula, olive oil

Typography

• Restaurant name: text-3xl to text-5xl, distinctive. This sets the tone.
• Category headers: text-lg to text-xl, font-bold, uppercase, tracking-wide. Clear dividers.
• Item names: text-sm to text-base, font-semibold. The star of each line.
• Descriptions: text-xs to text-sm, font-normal, text-muted-foreground. Appetizing but compact.
• Prices: text-sm, font-medium, right-aligned or after dot leaders.

Style by Restaurant Type

• Fine dining: Minimal, serif-feeling (use font-light + tracking-wide). Lots of whitespace. Dark bg or ivory.
• Casual/bistro: Warm tones, slightly playful. Rounded corners on sections. bg-amber-50 or bg-stone-50.
• Modern/trendy: Clean sans-serif, dark theme (bg-zinc-950), accent color for specials. Minimal ornament.
• Cafe: Light, airy. bg-white or bg-stone-50. Small illustrations encouraged.
• Bar/cocktail: Dark and moody. bg-zinc-950 or bg-slate-900. Gold or amber accents. Atmospheric.

Rules

• NO prices hidden or hard to find. Price transparency builds trust.
• NO more than 7-9 items per category. Too many choices paralyze diners.
• ALWAYS include: restaurant name, categories, item names, descriptions, prices.
• USE appetizing language: "house-made", "slow-roasted", "seasonal", "fresh" — not "good" or "tasty."
• Dietary markers (V, VG, GF) should be subtle: text-xs, after the item name, muted color.

Infographics / Data Visualization

A visual narrative that makes data compelling, memorable, and shareable.

Core Principles

• Story first, data second. An infographic tells a story. The data supports it. Lead with the narrative arc, not the raw numbers.
• One key insight. Every infographic should have ONE takeaway the viewer remembers. Everything else supports that insight.
• Visual encoding. Numbers become shapes, sizes, colors, positions. Never just text + numbers — translate data into visual patterns.
• Top-to-bottom flow. Infographics read like a scroll. Clear sections with clear transitions.

Artboard Setup

• Standard: 800x2400 to 1080x3200 (tall, scrollable)
• Social-friendly: 1080x1920 (9:16) or 1080x1350 (4:5)
• Presentation: 1920x1080 (landscape, one key chart)
• Use one tall artboard, NOT multiple. Infographics are single continuous pieces.

Section Flow

1. Title banner — Bold headline that frames the story. "The State of...", "How X Changed Y", "By the Numbers: Z"
2. Key stat — One massive number (text-7xl to text-9xl) that hooks attention. "73% of..." or "$4.2 Trillion"
3. Context section — 2-3 sentences explaining why this matters. text-base, max-w-xl.
4. Data sections (2-4) — Each visualizing one aspect of the data. Different visual encoding per section.
5. Comparison — Side-by-side or before/after. Shows contrast clearly.
6. Conclusion/CTA — Key takeaway restated, source credits.

Data Visualization Patterns (Using Efecto Nodes)

Since Efecto doesn't have native chart components, represent data visually with layout:

• Bar chart: Horizontal frames with width proportional to value. Label left, bar right.
• Stat cards: Large number (text-6xl font-bold) + label (text-xs uppercase). Grid of 3-4.
• Comparison columns: Two columns side-by-side, each with stacked items. Color-coded.
• Timeline: Vertical line (w-0.5 bg-border) with alternating left/right content nodes.
• Icon array: Grid of small icons (w-4 h-4) where colored vs muted represent proportions.
• Ranked list: Numbered items with bars showing magnitude. 1-5 items.

Typography

• Title: text-3xl to text-5xl, font-extrabold, tracking-tight. Sets the topic.
• Key stat: text-7xl to text-9xl, font-black. The eye-catcher.
• Section headers: text-xl font-bold. Separates data sections.
• Labels: text-xs uppercase tracking-widest font-medium. Data annotations.
• Body text: text-sm, max 2-3 lines per section. Support, not bulk.
• Source: text-xs text-muted-foreground, bottom of infographic.

Color Strategy

• One primary data color +

…(truncated)