Sign inStart building
Workflows
Use cases Create & edit screens Icons for your brand Live shaders Rebrand a page Prebuilt workflows Campaign Studio UI Component Extractor App Screens Wireframe Flow Animation Capture Typography Matcher Design System Starter Logo Icon Generator Brand Kit Press Kit Site Redesign Brand Explorer Mood Board Design Critique Retexture Router SVG Generator Video Generator View all 19 workflows
MCPModelsPricingDocsSign inStart building
Prebuilt workflow · Design systems & tokens

Press Kit

Turn a logo and a short brief into an on-brand press kit — cover, story, logo usage, colors, and type — as landscape pages you export to one PDF.

· You bring Logo + brief· 6 landscape pages· DESIGN.md· press-kit.pdf

Build with it Open the canvas
Gen All
Cover Page
Claude Opus 5.5HighDESIGN.md

Design the press-kit COVER page: the brand logo, the brand name as a large wordmark, a one-line tagline, and a subtle on-brand background (gradient or pattern from the palette). Minimal and premium. Author ONE complete self-contained HTML document (Tailwind via CDN) that renders as a SINGLE full-bleed LANDSCAPE slide — wider than tall. ALL content must fit within the frame with NO scrolling and nothing below the fold. Use the connected DESIGN.md brand guide and logo as the s…

3 lines · 673 charsEditorExpand
AttachmentsResponse
SCREEN$0.29Run
COMPOSEDesktop
Cover
SCREEN
IMAGE
Upload Logo
Upload Logo1:1
IMAGE
Brand Guide
Claude Opus 5.5High

Analyze the connected logo and brand brief and produce a comprehensive DESIGN.md brand guide: logo usage rules, semantic color tokens (light and dark), typography, spacing, radius, and component tokens, plus brand voice and visual style. This is the single source of truth for every press-kit page.

1 line · 298 charsEditorExpand
AttachmentsResponse
STYLE$0.29Run
DIRECTLoam — Rooted Neighbourly
Colors
primary#512645
primary-strong#3A1A31
accent#E8C547
secondary#5E7A55
background#FDFAF3
surface#F6EFE3
surface-raised#FFFFFF
foreground#2A1224
Typography
displayFraunces · 64px · 600
headingFraunces · 36px · 600
subheadingNunito Sans · 22px · 700
bodyNunito Sans · 17px · 400
labelNunito Sans · 14px · 700
Voice
warmpatienta little nerdyneighbourlypracticalquietly optimistic

Like the knowledgeable neighbour who hands you a pothos cutting in a jam jar and tells you exactly how much light it wants. Friendly and specific, never saccharine or pun-heavy.

STYLE
Brand Story Page
Claude Opus 5.5HighDESIGN.md

Design the BRAND STORY page: a headline, 2–3 short paragraphs of mission/positioning drawn from the brief, and a supporting stat or pull-quote. Editorial layout. Author ONE complete self-contained HTML document (Tailwind via CDN) that renders as a SINGLE full-bleed LANDSCAPE slide — wider than tall. ALL content must fit within the frame with NO scrolling and nothing below the fold. Use the connected DESIGN.md brand guide and logo as the single source of truth for colors, typ…

3 lines · 636 charsEditorExpand
AttachmentsResponse
SCREEN$0.30Run
COMPOSEDesktop
Brand Story
SCREEN
COMPOSEText

Loam — the neighbourhood houseplant swap and care app. Tagline: Grow what your neighbours grow. Industry: consumer app, home & garden. Tone: warm, patient, a little nerdy, never twee. Mission: greener rooms without buying new — trade cuttings with people nearby, and keep them alive. Facts: launched in three cities; 40,000 cuttings swapped; first product, the Loam Pot self-watering planter. Press contact: press@loam.example Website: loam.example Socials: @loamswap

TEXT
Logo Usage Page
Claude Opus 5.5HighDESIGN.md

Design the LOGO USAGE page: the primary logo, clear-space and minimum-size guidance, approved backgrounds, and 2–3 misuse examples marked as incorrect. Follow the DESIGN.md logo rules. Author ONE complete self-contained HTML document (Tailwind via CDN) that renders as a SINGLE full-bleed LANDSCAPE slide — wider than tall. ALL content must fit within the frame with NO scrolling and nothing below the fold. Use the connected DESIGN.md brand guide and logo as the single source o…

3 lines · 659 charsEditorExpand
AttachmentsResponse
SCREEN$0.53Run
COMPOSEDesktop
Logo Usage
SCREEN
Color Palette Page
Claude Opus 5.5HighDESIGN.md

Design the COLOR PALETTE page: large swatches for the primary/secondary/accent/neutral tokens, each with its name, HEX value, and a short usage note. Pull exact values from the DESIGN.md color tokens. Author ONE complete self-contained HTML document (Tailwind via CDN) that renders as a SINGLE full-bleed LANDSCAPE slide — wider than tall. ALL content must fit within the frame with NO scrolling and nothing below the fold. Use the connected DESIGN.md brand guide and logo as the…

3 lines · 675 charsEditorExpand
AttachmentsResponse
SCREEN$0.37Run
COMPOSEDesktop
Color Palette
SCREEN
Typography Page
Claude Opus 5.5HighDESIGN.md

Design the TYPOGRAPHY page: the heading and body typefaces with a specimen scale (display → caption), weights, and a short usage note per style. Use the DESIGN.md typography tokens. Author ONE complete self-contained HTML document (Tailwind via CDN) that renders as a SINGLE full-bleed LANDSCAPE slide — wider than tall. ALL content must fit within the frame with NO scrolling and nothing below the fold. Use the connected DESIGN.md brand guide and logo as the single source of t…

3 lines · 656 charsEditorExpand
AttachmentsResponse
SCREEN$0.36Run
COMPOSEDesktop
Typography
SCREEN
Contact Page
Claude Opus 5.5HighDESIGN.md

Design the CONTACT / boilerplate page: the logo, a short company boilerplate paragraph, a press contact name and email, the website, and social handles from the brief. Clean, footer-style layout. Author ONE complete self-contained HTML document (Tailwind via CDN) that renders as a SINGLE full-bleed LANDSCAPE slide — wider than tall. ALL content must fit within the frame with NO scrolling and nothing below the fold. Use the connected DESIGN.md brand guide and logo as the sing…

3 lines · 670 charsEditorExpand
AttachmentsResponse
SCREEN$0.31Run
COMPOSEDesktop
Contact
SCREEN
Run all

A real run, unedited7 generations · $2.45 of walletBrand and inputs are fictional, made in Vmotif · 2026-09-24

What came back

Straight off the canvas.

Everything below is what this run returned, untouched.

  • Cover
    Cover
  • Brand Story
    Brand Story
  • Logo Usage
    Logo Usage
  • Color Palette
    Color Palette
  • Typography
    Typography
  • Contact
    Contact
  • Brand GuideDESIGN.md
    ---
version: alpha
name: Loam — Rooted Neighbourly
description: "Warm, patient design system for Loam, the neighbourhood houseplant swap and care app: deep plum soil, sunny seed-yellow, oat-paper surfaces."
colors:
  primary: "#512645"
  primary-strong: "#3A1A31"
  on-primary: "#FDF9F1"
  accent: "#E8C547"
  on-accent: "#2A1224"
  secondary: "#5E7A55"
  background: "#FDFAF3"
  surface: "#F6EFE3"
  surface-raised: "#FFFFFF"
How it runs

Two stages, in order.

What each stage reads, what it makes and what it cost on this run. Each stage starts once the one before it finishes. Steps inside a stage don’t wait on each other, so they run side by side.

  1. 01

    Brand Guide

    Reads your inputsMakes DESIGN.md

    1 stepClaude Opus 5.5$0.29

  2. 02

    6 screens

    Reads your inputs and stage 01

    • Cover Page
    • Brand Story Page
    • Logo Usage Page
    • Color Palette Page
    • Typography Page
    • Contact Page

    6 steps, side by sideClaude Opus 5.5$2.16

From your agent

Or let your agent run it.

This run went through the Vmotif MCP server, the way Claude Code, Cursor or any MCP client drives it: seed the canvas, fill the inputs, run the graph.

create_canvas({ premade_workflow_id: "press-kit" })
update_canvas({ canvas_id, updates: [/* your inputs */] })
run_workflow({ workflow_id: canvas_id })
MCP docs
More in Design systems & tokens

Extract a coherent, on-brand system — colors, type, tokens, and theme files ready to drop into a codebase.

Color PaletteExtract a full color scale from any image as oklch CSS variables and Figma-ready design tokens.In — ImageOut — variables.css · tokens.jsonTypography MatcherIdentify the typefaces in a design, find the closest Google Fonts, and generate a fluid CSS type system.In — DesignOut — analysis.md · type-system.cssDesign System StarterBuild a starter system from a brand reference: tokens, globals.css, a Tailwind config, base components, and a preview board.In — Brand assetsOut — tokens.json · globals.css · tailwind.config.ts · components.tsx · previewLogo Icon GeneratorTurn a brand name and brief into three deliberately different logo icon concepts — a monogram, an abstracted category metaphor, and a personality mark — each as a production-ready SVG.In — Brand name + briefOut — 3 concept SVGs · lockup.svgBrand KitFeed in a logo and a short brief and get a written style guide, an OG image drawn from it, and a Tailwind v4 theme, all on-brand.In — Logo + brand briefOut — style-guide.md · og-image · theme.css

What will you create?

Start building
Workflow reference →