harvey-design-system-mcp: Instructions file for Codex

Prototype Instructions

Run the local server yourself and open the preview in the browser available to this environment. Do not give the user server-start instructions when you can run it.

Before making substantial visual changes, use the Product Design plugin's get-context skill when the visual source is unclear or no longer matches the current goal. When the user gives durable prototype-specific design feedback, preferences, or decisions, record them in AGENTS.md.

When implementing from a selected generated mock, treat that image as the source of truth for layout, component anatomy, density, spacing, color, typography, visible content, and hierarchy.

Use Harvey's actual HarveySerifFont for display and header typography. Do not substitute Instrument Serif. Keep the proprietary font unbundled unless redistribution rights are established; the prototype may load the official WOFF2 from Harvey's public asset endpoint and must retain a documented failure fallback.

Keep the website presentation-only. It explains the design system and MCP for a human demo, but it must not hold API keys, submit model jobs, or render media. The installed Harvey MCP supplies brand-governed plans and audits; your AI agent of choice orchestrates built-in GPT Image, the separate fal MCP, and HyperFrames. Public-facing copy must say “your AI agent of choice” rather than naming Codex as the required host.

On first use and for every image, motion, or video production request, the Harvey MCP should recommend the companion setup without blocking plan-only work: create a fal.ai API key at https://fal.ai/dashboard/keys, connect https://mcp.fal.ai/mcp with the key stored only in the agent's secret configuration, and install the HeyGen HyperFrames skills with npx skills add heygen-com/hyperframes before invoking /hyperframes. Never collect or echo a real fal key.

Harvey image and film direction has two canonical modes. warm-prismatic-people uses credible professionals in candid work, warm amber practicals, a cool window edge, rich detailed blacks, foreground glass, gentle optical bloom, and restrained translucent edge echoes. architectural-oblique uses sharp upward or downward views of modern glass-and-steel structures, graphic diagonals, stable facade grids, cool glass, and small warm reflections. Never regress to generic enterprise stock, empty glossy offices, direct-to-camera sales posing, cold flat lighting, or arbitrary legal clichés.

Harvey's current production geometry uses two small, deliberate radii: 4px on buttons, inputs, selects, and compact controls; 8px on large media, editorial cards, and selected feature panels. Keep structural grid seams and full-bleed section boundaries square, and reserve pills/circles for media and carousel controls. The observed current warm-paper surface is #F2F1F0, with 32px desktop and 28px compact page gutters.

Motion examples must show an end product, not only abstract timing diagrams. The canonical partnership announcement is exactly 10 seconds over one uninterrupted architectural-oblique plate. Default to a full-frame Harvey Ink legibility overlay and Ivory identity/copy; do not place the lockup or goal on a floating white card or rectangle. Keep the lockup inside the center 50% of frame and optically center the visible artwork rather than centering unequal source canvases: a 3px angled divider stays fixed while Harvey is unmasked sliding left from center and the authorized partner identity is unmasked sliding right. Both identities stay at full opacity for the entire entrance and begin completely outside their divider-side overflow masks, so the artwork appears through a hard mask edge with no logo dissolve. In the visible web demo, render both identities approximately 50% larger than the initial implementation and keep the divider, optical lockup center, and frame on the same horizontal axis. At 3.6 seconds, crossfade overlays only and reveal the goal statement word by word at a 70–110ms stagger; center-align the eyebrow and goal by default in a field no wider than roughly 50% of frame, unless an intentionally approved alternate layout is selected. Leave a clean architectural tail from 9.4–10.0 seconds. Use cubic-bezier(0.22, 1, 0.36, 1) / power3.out, stable type, and long reading holds. All logos, partner identity, claims, captions, and actions stay separate from generated footage; unsourced or unauthorized partnership work is visibly concept-only and cannot be published.