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

Brand Kit

Feed 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.

· You bring Logo + brand brief· style-guide.md· og-image· theme.css

Build with it Open the canvas
IMAGE
Upload Logo
Upload Logo1:1
IMAGE
Brand Style Guide
Claude Opus 5.5High

Analyze the connected logo and brand brief and create a comprehensive DESIGN.md brand guide. Include: - Logo roles, usage, clear space, minimum size, approved backgrounds, and misuse rules - Semantic color tokens with light and dark values - Typography, spacing, radius, and component tokens - Brand voice, writing guidelines, imagery, iconography, and motion rules Be specific and actionable. This should be a usable source-of-truth document for downstream image, SVG, code, an…

9 lines · 500 charsEditorExpand
AttachmentsResponse
STYLE$0.37Run
DIRECTLoam — Rooted Neighbourly
Colors
primary#4F2542
primary-hover#3E1C34
primary-subtle#F1E6EC
accent#E8C454
secondary#5E7A5A
secondary-subtle#E6EEE2
background#FDF9F1
surface#FFFFFF
Typography
displayNunito · 56px · 800
heading-1Nunito · 36px · 800
heading-2Nunito · 26px · 700
heading-3Nunito · 20px · 700
body-largeInter · 18px · 400
Voice
warmpatientquietly nerdyneighbourlypracticalencouraging

Like a knowledgeable neighbour leaning over the fence. Calm and specific, happy to share the Latin name, never smug, never twee. Loam celebrates small wins and treats a dead plant as information, not failure.

STYLE
Generate OG Image
GPT Image 2.5 SunburstAutoStyles

Create this brand's Open Graph image (1200x630), the card shown when a link is shared. Follow the connected DESIGN.md and brand brief: - Place the connected logo exactly as supplied: do not redraw, recolor or restyle it - Set the tagline from the brief as the one line of type, in the DESIGN.md heading typeface and colors - Build the background from the DESIGN.md palette and imagery rules, with generous margins - No invented claims, URLs or extra copy, no device mockups - It m…

6 lines · 540 charsEditorExpand
AttachmentsResponse
IMAGE$0.07Run
IMAGE
OG Image
OUT_N4.PNG16:9
IMAGE
Tailwind Theme
Claude Opus 5.5High

Use the connected DESIGN.md brand guide and logo as ground truth. Generate a complete Tailwind CSS v4 theme configuration: Generate CSS with @theme directive containing: 1. Colors (using oklch for better color manipulation): --color-primary: [extracted from logo] --color-primary-50 through --color-primary-950 (full scale) --color-secondary: [complementary color] --color-accent: [for CTAs, links] --color-background, --color-foreground --color-muted, --color…

25 lines · 944 charsEditorExpand
AttachmentsResponse
CODE$0.24Run
COMPOSEcss
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&family=Inter:wght@400;500;600&family=Fraunces:ital,opsz,wght@1,9..144,400&family=JetBrains+Mono:wght@500&display=swap');

@theme {
  /* Brand: Loam Plum (#4F2542) */
  --color-primary: oklch(0.333 0.076 340);
  --color-primary-hover: oklch(0.28 0.066 340);
  --color-primary-foreground: oklch(0.983 0.011 85);
  --color-primary-subtle: oklch(0.935 0.015 345);
  --color-primary-50: oklch(0.975 0.008 345);
  --color-primary-100: oklch(0.935 0.015 345);
  --color-primary-200: oklch(0.87 0.035 343);
  --color-primary-300: oklch(0.77 0.065 342);
  --color-primary-400: oklch(0.66 0.09 341);
  --color-primary-500: oklch(0.55 0.1 340);
  --color-primary-600: oklch(0.46 0.095 340);
  --color-primary-700: oklch(0.39 0.085 340);
  --color-primary-800: oklch(0.333 0.076 340);
  --color-primary-900: oklch(0.28 0.066 340);
  --color-primary-950: oklch(0.2 0.048 340);

  /* Secondary: Sage Growth (#5E7A5A) */
  --color-secondary: oklch(0.54 0.06 140);
  --color-secondary-foreground: oklch(0.983 0.011 85);
  --color-secondary-subtle: oklch(0.935 0.02 135);

  /* Accent: Sun Yellow (#E8C454) - small highlights only */
  --color-accent: oklch(0.83 0.13 90);
  --color-accent-foreground: oklch(0.26 0.06 340);

  /* Surfaces & text */
  --color-background: oklch(0.983 0.011 85);
  --color-foreground: oklch(0.23 0.03 340);
  --color-surface: oklch(1 0 0);
  --color-surface-raised: oklch(0.953 0.017 80);
  --color-muted: oklch(0.953 0.017 80);
  --color-muted-foreground: oklch(0.54 0.03 340);
  --color-card: oklch(1 0 0);
  --color-card-foreground: oklch(0.23 0.03 340);
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: oklch(0.23 0.03 340);

  /* Lines & focus */
  --color-border: oklch(0.9 0.02 75);
  --color-border-strong: oklch(0.79 0.03 65);
  --color-input: oklch(0.79 0.03 65);
  --color-ring: oklch(0.83 0.13 90);

  /* Status */
  --color-success: oklch(0.53 0.1 148);
  --color-warning: oklch(0.62 0.13 70);
  --color-danger: oklch(0.52 0.16 25);
  --color-destructive: oklch(0.52 0.16 25);
  --color-scrim: oklch(0.23 0.03 340 / 0.45);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Nunito', 'Quicksand', system-ui, sans-serif;
  --font-display: 'Nunito', 'Quicksand', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, ser…
Tailwind Theme109 lines · 4.1k chars
CODE
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
Run all

A real run, unedited3 generations · $0.68 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.

  • OG Image
    OG Image
  • Brand Style GuideDESIGN.md
    ---
version: alpha
name: Loam — Rooted Neighbourly
description: "A warm, patient design system for Loam, the neighbourhood houseplant swap and care app. Built on deep plum, cream paper and a single sun-yellow dot."
colors:
  primary: "#4F2542"
  primary-hover: "#3E1C34"
  on-primary: "#FDF9F1"
  primary-subtle: "#F1E6EC"
  accent: "#E8C454"
  on-accent: "#3A1A30"
  secondary: "#5E7A5A"
  secondary-subtle: "#E6EEE2"
  background: "#FDF9F1"
  • Tailwind Themecss
    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&family=Inter:wght@400;500;600&family=Fraunces:ital,opsz,wght@1,9..144,400&family=JetBrains+Mono:wght@500&display=swap');

@theme {
  /* Brand: Loam Plum (#4F2542) */
  --color-primary: oklch(0.333 0.076 340);
  --color-primary-hover: oklch(0.28 0.066 340);
  --color-primary-foreground: oklch(0.983 0.011 85);
  --color-primary-subtle: oklch(0.935 0.015 345);
  --color-primary-50: oklch(0.975 0.008 345);
  --color-primary-100: oklch(0.935 0.015 345);
  --color-primary-200: oklch(0.87 0.035 343);
  --color-primary-300: oklch(0.77 0.065 342);
  --color-primary-400: oklch(0.66 0.09 341);
  --color-primary-500: oklch(0.55 0.1 340);
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 Style Guide

    Reads your inputsMakes DESIGN.md

    1 stepClaude Opus 5.5$0.37

  2. 02

    Generate OG Image & Tailwind Theme

    Reads your inputs and stage 01Makes Tailwind Theme and 1 image

    2 steps, side by sideGPT Image 2.5 SunburstClaude Opus 5.5$0.31

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: "brand-kit" })
update_canvas({ canvas_id, updates: [/* your inputs */] })
run_workflow({ workflow_id: canvas_id })
MCP docs
Where it fits

Part of a bigger job.

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.svgPress KitTurn 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.In — Logo + briefOut — 6 landscape pages · DESIGN.md · press-kit.pdf

What will you create?

Start building
Workflow reference →