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

Typography Matcher

Identify the typefaces in a design, find the closest Google Fonts, and generate a fluid CSS type system.

· You bring Design· analysis.md· type-system.css

Build with it Open the canvas
Font Analysis
Claude Opus 5.5High

Analyze the typography in this design and create a detailed report in Markdown: # Typography Analysis ## Identified Fonts ### Headings - **Detected Font:** [name or "Custom/Unknown"] - **Characteristics:** serif/sans-serif, weight, x-height, contrast - **Google Fonts Match:** [exact or closest match] - **Alternatives:** [2-3 similar options] ### Body Text - **Detected Font:** [name] - **Characteristics:** [describe] - **Google Fonts Match:** [match] - **Alternatives:** [o…

38 lines · 977 charsEditorExpand
AttachmentsResponse
CODE$0.12Run
COMPOSEmarkdown
# Typography Analysis

*Design analyzed: **Fernway** — trail discovery dashboard ("Quiet trails near you")*

## Identified Fonts

### Headings
- **Detected Font:** Humanist/grotesque sans-serif, most likely **Inter**, **Figtree** or a similar neo-grotesque with rounded terminals (the logo wordmark "fernway" appears to use a heavier, tighter-spaced cut of the same family)
- **Characteristics:**
  - Sans-serif, low stroke contrast
  - Heavy weights used for display: H1 "Quiet trails near you" is roughly **700–800** with tight negative tracking
  - Large x-height and open apertures (see the *a*, *e*, *s* in "trails")
  - Compact, slightly condensed proportions in bold weights
  - Single-storey feel with a friendly geometry, well suited to an outdoors brand
- **Google Fonts Match:** **Figtree** (closest match for the display and card headings); **Inter** is a very close second
- **Alternatives:**
  1. **Plus Jakarta Sans** — similar friendly geometry with a slightly more premium feel
  2. **Manrope** — tighter proportions and strong bold weights
  3. **DM Sans** — softer and rounder, good for a calmer tone

### Body Text
- **Detected Font:** The same sans-serif family at regular weight, likely **Inter** or **Figtree** at 400
- **Characteristics:**
  - Regular weight (400) for descriptions such as *"Shaded woodland trails with river views…"*
  - Generous line height of about **1.5–1.6**
  - Muted warm-gray color that reduces contrast for a calmer reading tone
  - Medium weight (500) used for UI labels: filter chips, the sort dropdown and nav items
  - Figures appear proportional; tabular numerals are **recommended** for stats such as "8.4 km" and "280 m"
- **Google Fonts Match:** **Inter**
- **Alternatives:**
  1. **Figtree** — use it everywhere for a single-family system
  2. **Nunito Sans** — warmer and slightly rounder
  3. **Source Sans 3** — excellent legibility at small sizes

## Recommended Pairings

| Use Case | Font | Weight | Size |
|----------|------|--------|------|
| Logo / Wordmark | Figtree | 800 | 40px |
| H1 (Page title) | Figtree | 700 | 48px |
| H2 (Detail panel title, "Leigh Woods Loop") | Figtree | 600 | 28px |
| H3 (Card title / Section title, "Elevation profile") | Figtree | 600 | 20–22px |
| Big stat ("28.6 km") | Figtree | 700 | 36px |
| Stat value ("8.4 km", "280 m") | Inter (tabular-nums) | 600 | 20px |
| Subtitle / Tagline | Inter | 40…
Font Analysis105 lines · 6.4k chars
CODE
IMAGE
Upload Design
Upload Design16:9
IMAGE
Typography CSS
Claude Opus 5.5High

Based on the typography in this design, generate a complete CSS type system: /* Google Fonts import */ @import url('https://fonts.googleapis.com/css2?family=...'); :root { /* Font families */ --font-heading: '[Google Font]', system-ui, sans-serif; --font-body: '[Google Font]', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Font sizes - fluid scale */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem…

38 lines · 1.3k charsEditorExpand
AttachmentsResponse
CODE$0.13Run
COMPOSEcss
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Font families */
  --font-heading: 'Lexend', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Colors */
  --color-text: oklch(0.27 0.03 175);
  --color-text-muted: oklch(0.5 0.015 160);
  --color-text-subtle: oklch(0.6 0.01 160);
  --color-accent: oklch(0.66 0.18 40);
  --color-positive: oklch(0.5 0.1 150);

  /* Font sizes - fluid scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--color-text);
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Headings */
.heading-1, h1 {
  font: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-heading);
  letter-spacing: var(--tracking-tighter);
}
.heading-2, h2 {
  font: var(--weight-semibold) var(--text-2xl)/var(--leading-tight) var(--font-heading);
  letter-spacing: var(--tracking-tight);
}
.heading-3, h3 {
  font: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-heading);
  letter-spacing: var(--tracking-tight);
}
.heading-4, h4 {
  font: var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-heading);
  letter-sp…
Typography CSS179 lines · 5.5k chars
CODE
Run all

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

  • Font Analysismarkdown
    # Typography Analysis

*Design analyzed: **Fernway** — trail discovery dashboard ("Quiet trails near you")*

## Identified Fonts

### Headings
- **Detected Font:** Humanist/grotesque sans-serif, most likely **Inter**, **Figtree** or a similar neo-grotesque with rounded terminals (the logo wordmark "fernway" appears to use a heavier, tighter-spaced cut of the same family)
- **Characteristics:**
  - Sans-serif, low stroke contrast
  - Heavy weights used for display: H1 "Quiet trails near you" is roughly **700–800** with tight negative tracking
  - Large x-height and open apertures (see the *a*, *e*, *s* in "trails")
  - Compact, slightly condensed proportions in bold weights
  - Single-storey feel with a friendly geometry, well suited to an outdoors brand
  • Typography CSScss
    @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Font families */
  --font-heading: 'Lexend', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Colors */
  --color-text: oklch(0.27 0.03 175);
  --color-text-muted: oklch(0.5 0.015 160);
  --color-text-subtle: oklch(0.6 0.01 160);
  --color-accent: oklch(0.66 0.18 40);
  --color-positive: oklch(0.5 0.1 150);
How it runs

One stage, all at once.

What each stage reads, what it makes and what it cost on this run. Steps inside a stage don’t wait on each other, so they run side by side.

  1. 01

    Font Analysis & Typography CSS

    Reads your inputsMakes 2 files

    2 steps, side by sideClaude Opus 5.5$0.25

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: "typography-matcher" })
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.jsonDesign 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.cssPress 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 →