The complete handbook

Gridform turns a few lines of copy into a finished poster, then lets you refine every detail. It pairs a disciplined design system — a column grid, a modular type scale, and a small set of colour roles — with hundreds of starting layouts, generative exploration, and optional AI assistance. The result stays tasteful because type sizes always come from the scale and positions snap to the grid.

The one idea that matters

Your poster is rendered as a single inline SVG built from a plain data model. That same SVG is the source of truth for the live preview and for every export. There is no second render path and nothing is screenshotted, so what you see is exactly what you get — at any resolution, in any format.

Private by design

Everything you create lives in your browser. There is no account and no sign-up, and your work is saved locally on your device. Nothing leaves your machine unless you choose an action that needs the network — using an AI feature with your own key, or fetching a stock image. Exports and shared links never contain your keys.

Who it's for

• Anyone making a poster fast — start from a layout, type your copy, shuffle until it sings, export.
• Designers who want control — a real grid, a baseline, OpenType typography, masks, print marks, and true-vector PDF.
• Teams keeping things on-brand — a brand system, reusable looks, and channel resizing.

Open the app and you already have a finished poster on the canvas. From here you can make it yours in under a minute.

Your first poster

1. Open the Content tab in the left rail and replace the placeholder text — a title, a subhead, some meta. The layout reflows as you type.
2. Press S to shuffle the style, or open Design → Looks and click a preset to restyle in one tap.
3. Pick a Format (a print size or a social size) if you need something other than the default poster.
4. Press ⌘E to export — choose PNG, SVG, or a print-ready PDF.

The interface

Saving, undo, and sharing

• Autosave keeps your work in the browser as you go — close the tab and come back to it later.
• Undo / redo with ⌘Z and ⌘⇧Z.
• Share a design as a self-contained link or export the document to a file you can re-open.

A few ideas run through the whole product. Understanding them makes everything else click.

Layouts are data

Every layout is a small data object describing where things go on a grid — not a fixed picture. That is why a layout can carry your copy, adapt to a new format, and be shuffled, bred, or interpolated without ever breaking.

The grid & the type scale

Positions snap to a column grid with margins, gutters, and a baseline. Type sizes come from a modular scale — a ratio applied in steps, so sizes relate to one another instead of being arbitrary. Keeping size on the scale and position on the grid is what keeps even randomised output looking intentional.

Colour roles

Instead of hard-coded colours, elements reference roles: paper (background), ink (primary text), muted (secondary), and accent. Swap a palette and every element re-colours correctly, because each one knows its job rather than its hex value.

Slots vs. free objects

Seeds & locks

Randomness is deterministic: a seed always produces the same result, so you can reproduce a design exactly. Locks let you freeze what you like — layout, palette, fonts, finish — and shuffle only the rest.

The Templates tab is your starting point: a large, curated library of poster layouts spanning editorial, directory, hero-image, type-led, and grid styles. Browse, search by tag, and click to apply your content to a new structure instantly.

The Signature collection

The Signature chip at the top of the layout picker gathers fourteen compositional families designed and quality-gated to the library’s highest bar — staircase reading paths, annotation rails, colossal-versus-whisper scale duets, overlapping colour planes, banded rhythms, justified text slabs, carved whitespace, single-seam alignment, perimeter type rings, restated title registers, photo wells, crossing bands, corner pinwheels, and stepped skylines. Every one grades Excellent with legible type and clean composition before it ships, and each is marked with a small ◆ in the grid.

Social templates & the Social family

For modern software brands there’s a curated Social library: hundreds of ready-to-post templates browsable by use-case — Company, Product, Partnership, Growth, Events, Community, Hiring, Education, Customer Stories, Social Proof, Thought Leadership, and Brand — in every feed and story size (1:1, 4:5, 9:16). Open them from Create → Templates and filter by group, style, and format; each opens as a complete, editable poster. They’re built on a Social family of 192 use-case-tuned compositions (hero, split, bento, big-number, quote, list, band, frame, stack, corner, column, type-as-image, photo, grid, ticket, and tall story layouts) and a set of 24 modern colour systems in the Looks rail. Every template and layout clears the same quality gate as the rest of the library before it ships.

Ways to get a layout

Content-aware relayout

Layouts adapt to what you give them. Add more copy and text reflows; change the format and the structure re-fits the new proportions instead of stretching. You stay in control — the engine just keeps the composition coherent.

The Design tab is where a poster gets its personality — palette, type pairing, scale, finish, and accent all live here.

Looks

Looks are one-tap aesthetic presets. Each one combines a palette, a font pairing, an optional print finish, and an optional motion preset. There are signature looks plus families organised by mood — neutral, editorial, vivid, dark, warm, cool, pastel, bold, and more — so you can change the entire feel in a click. Save your current design as a custom look to reuse it.

The Style panel

• Scale — the modular ratio that governs type sizing.
• Type pairing — a display + text combination chosen to work together.
• Palette & accent — the colour set and the single highlight colour.
• Paint — fill text or backgrounds with a gradient or a pattern.
• Print finish — grain, halftone, riso, paper, photocopy, or duotone, with an intensity slider. Finishes are baked into the export so the file matches the preview.

Colour Lab

Open Mini Apps → Colour Lab to build palettes with live legibility grades and colour-blind previews (protanopia, deuteranopia, tritanopia, and grayscale), so your choices read clearly for everyone.

Set the artboard from Design → Format. Sizes are grouped so you can find the right one fast.

Toggle portrait / landscape at any time. Crucially, changing format adapts the design — text rewraps, scale adjusts, and objects reposition to suit the new proportions — rather than stretching a fixed picture.

Typography is the heart of the studio. The Type tab holds the typeface library and a full set of refinements.

The typeface library

Over 140 self-hosted families across ten categories — neo-grotesque, grotesque, geometric, humanist, rounded, display, serif-display, serif-text, slab, and monospace. Browse by category or search, and lean on the curated pairings when you want a safe, expressive combination. Fonts are self-hosted, so they render and export identically offline.

Refinements

Craft is on by default. New posters ship with the full typographic craft pass — kerning, optical margin alignment, optical sizing, baseline lock, balanced line breaks, widow control, and hyphenation — already enabled. The Craft pass switch at the top of the Refine panel flips the whole profile at once; individual toggles fine-tune it. Documents you saved earlier keep exactly the settings they had.

Edit slot text in the Content tab — one field per slot. Beyond the layout, you can place free objects anywhere on the canvas.

The six object kinds

Editing on the canvas

• Select by clicking; multi-select with ⇧-click or a marquee.
• Move by dragging — smart guides snap to edges, centres, equal gaps, and the baseline.
• Resize with handles; rotate; nudge with the arrow keys (further with ⇧).
• Align & distribute, group, lock, flip horizontally / vertically, and change z-order.
• Set a custom colour on any text, independent of the palette roles.

Craft tools

The Inspector

The right-hand panel adapts to your selection. For a slot, it offers per-element type and colour overrides plus a contrast guard. For a free object, it offers kind-specific controls, layer tools (lock, hide, duplicate, delete), blend mode and opacity, rotation, masks, and constraint pins for auto-layout.

Add an image by uploading a file, pasting a URL, pasting from the clipboard (⌘V), or generating a procedural one — patterns, gradients, or flowing abstract noise-fields from Abstract Studio and the other Mini Apps. The Image panel and the Inspector give you a full darkroom.

Framing

• Fit — cover or contain; set a focus point so the right part stays in frame, and zoom to taste.
• Mask — clip to a rounded, circle, hexagon, or arch frame.

Treatment & grade

• Treatments — duotone, posterize, grain, invert, threshold, blur, motion blur, and a darkening overlay.
• Darkroom grade — exposure, contrast, saturation, temperature, tint, hue, highlights, shadows, vignette, and grain, all baked export-safe.

When you want options, the studio generates them — always tasteful, never random for its own sake.

Shuffle & Surprise

Press S to shuffle the style or R to surprise with a fresh design. Set an explicit seed to reproduce a result, and use locks to hold what you like while the rest re-rolls. Both are quality-gated: each press grades several candidates and gives you the best one that reads cleanly — no more duds.

Explore board

Press V to open the board. Choose a creative direction — Surprise, Bold, Calm, Minimal, Editorial, Image, Mono, Warm, or Cool — and the studio generates a shortlist, grades each candidate on contrast, hierarchy, alignment, and balance, removes near-duplicates, and ranks the best. Click one to adopt it.

Morph

Place two finished designs at the ends of a slider and scrub a continuous path between them. Layout and palette blend smoothly (colour in a perceptual space), and discrete choices snap to the nearer parent — every point along the way is a valid, usable design.

Resonance

Resonance reads the mood of your copy across dimensions like warmth, energy, weight, era, and formality, then suggests a palette and type to match. Nudge the mood sliders, tap a one-tap vibe, or turn on “style as I write” to keep the design in step with the words.

Creative studios

The Create menu opens focused studios that generate art-directed work you can drop straight onto the canvas — each on the single-SVG path, so what you preview is what you export.

AI is optional and additive. Most of the studio works with no key at all; the AI tools use your own provider key, supplied once and stored only in your browser.

What needs a key

What each one does

• Compose with AI — describe a poster in words; get a full layout, type, palette, and objects.
• Quick command — say what to change (“make the title bigger and warmer”) and it's applied live.
• Design Crew & Multi-Agent Studio — a team of specialist roles propose, critique, and refine candidates.
• Art Direct — elevate the whole composition in one move.
• Campaign / Content / Localize / Carousel / Deck — turn one brief into many assets, copy variants, translations, a content series, or a presentation.
• Brand Brain — store your brand voice and rules so the AI tools stay on-brand.
• Generate image · AI — turn a prompt into an image, placed straight into a slot.

The Motion tab brings a poster to life. Pick a preset, set the speed, and toggle looping — entrances like rise, fade, slide, and stagger, plus continuous moves like a slow pan, float, or pulse.

For full control, the keyframe editor choreographs each element individually — entrance timing, easing, and transforms. When you're happy, export to MP4, WebM, GIF, or an animated SVG that plays in any browser.

Press ⌘E to open Export. Because the preview is the source of truth, the file always matches the canvas.

Formats

Print controls

• Press marks & bleed — crop and registration marks with a bleed margin.
• CMYK soft-proof — preview how colours land in print gamut (a simulation, not an ICC conversion).
• Colour separations — output per-channel plates.
• Presets — ready social sizes and print sizes (A-series, US sizes, posters) at the right DPI.

Beyond a single file

The Review tab helps you ship work that holds up.

• Critique — a live score out of 100 with a grade, across four dimensions: contrast (perceptual legibility), hierarchy, alignment, and balance. One click fixes legibility issues.
• Linter — flags specific, located problems: overlaps, near-misses on alignment, too many type sizes or weights, accent overuse, off-grid objects, and awkward column widths. Each finding points to the element and offers a fix.
• Contrast — perceptual (APCA) legibility ratings so text clears a readable threshold on its background.
• Proof — CMYK and colour-blind soft-proof modes to check how the design reads in print and for different vision.
• Publish Gate — a final quality check with auto-fixes before you export.

Define a brand once, then produce unlimited work that is provably on-brand — a complete define → book → produce pipeline, all on the single-SVG path so every export matches its preview.

Build a brand — guided

Build a brand (under Produce) walks anyone through seven small steps — start from a name and one colour, a logo, or a curated start; then colours, typography, logo & imagery, words & voice, review, and produce — with a live poster preview and a readiness meter coaching the next best step at every stage. Each step is a curated slice of the same brand the Advanced studio edits, so you can switch between the two freely. You can keep several brands: switch, start new, duplicate, or delete from the Builder's brand chips or the Advanced studio's header switcher — every brand tool follows the active one.

Colours are fully yours: derive the palette from a seed (curated swatches, any picker colour, or a typed hex, with four harmony schemes) — or flip to Custom and set Paper, Ink, Primary, and Dark exactly as you like. Your picks are kept verbatim while everything derived around them stays readable, and a live contrast readout flags a hard-to-read ink with a one-tap Fix readability.

Brand System · Advanced

The Advanced studio is the full identity workspace — mood, identity, colour, UI, imagery, fonts, iconography, and AI guidelines — deriving a consistent light-and-dark token set, accessible by construction. Share a brand as a link, and Apply to editor pushes its palette, accent, type, and logo onto the current poster in one step.

Brand Book

Build a multi-page Brand Book set in the brand's own colours and type — cover, essence, logo, colour, typography, grid & spacing, iconography, imagery, voice, applications, and a closing page. Toggle sections in or out, choose a cover treatment (standard, minimal, or bold), preview every page live, then download the whole book as print-ready vector PDFs — or export a single page. Flip on Real designs and the "In use" page fills with actual produced work — three on-brand designs generated and placed for you.

Produce on-brand assets

One action turns a saved brand into a batch of unique, on-brand creatives. Pick the channels — posters, banners, social, screen, photo, or stationery (business cards in both orientations, letterhead, email header) — set a tone (bold, calm, editorial, and more) and a count, and the studio fans out distinct compositions, re-stamps each with the brand so it is on-brand by construction, and expands every design across the chosen sizes. Every card carries an On brand ✓ badge and a quality grade you can sort by; open any design straight in the editor, download one, regenerate just that one (same copy, fresh composition) from its hover action, or Export kit for the whole set as a zip. Turn on Elevate to art-direct each design a step further, and — with your own AI key — vary the copy across the batch (without a key, your brand copy carries every design).

Stay on brand

In the Review tab, Brand check grades the live poster against your saved brand — colours, type, accent, and logo — with a per-rule readout and an overall score. A single Make on-brand tap snaps any drift back into line. Your brand logo rides along: where a layout has a logo slot it fills it, and everywhere else it is placed as a clean corner sign-off — transparent, correctly sized, with an equal optical margin on any format.

Mini Apps

On Windows, use Ctrl in place of ⌘.

• Start from a layout, not a blank page. Type your copy first, then flip layouts with [ / ] to find the right structure.
• Keep hierarchy clear. One dominant element, then supporting levels. Two type sizes often beat five.
• Use one accent. A single highlight colour does more than several competing ones.
• Let alignment do the work. Shared edges read as intentional; the smart guides and the linter help you hit them.
• Lock what you love. Freeze the layout or palette, then shuffle the rest to explore without losing the part you've decided on.
• Check the Review tab before exporting. A quick pass on contrast and the linter catches the small things.
• Mind the medium. Soft-proof for print; pick Display-P3 for vivid screens; export transparent for stickers.

Do I need an account?

No. There's no sign-up. The studio runs in your browser and your work is saved locally.

Where is my work stored?

On your device, in the browser. Export to a file or share a link to keep a copy or move it elsewhere.

Does it work offline?

Yes for the core studio — layouts, type, editing, and export are all local. Only optional actions (AI features, stock images) use the network.

What about the AI features and my key?

They're optional and use your own key, stored only in your browser. Requests go directly to the provider; your key is never embedded in exports or shared links, and you own any provider cost.

Will my export match the preview exactly?

Yes — the preview and the export are the same SVG, so colours, type, and effects carry over precisely at any resolution.

Why can't I export video sometimes?

Video encoding depends on your browser's built-in encoder. When it isn't available, use GIF or animated SVG.

The whole studio is also available to AI assistants and scripts through a Model Context Protocol server. It runs locally on your machine and drives the very same engine — the same one inline SVG, deterministic by seed — so an assistant can design, refine, reformat, and produce real posters for you, returning PNG, SVG, print-ready PDF, and JPG inline. 29 tools, most needing no API key.

What an assistant can do

Connect it

1. With Node 20+ installed, add the server to any MCP client — a desktop assistant, an IDE, or an agent. Nothing to clone or build: npx fetches the published gridform-mcp package on first run and caches it.
2. For Claude Desktop, add this to claude_desktop_config.json (the key is optional):

{
  "mcpServers": {
    "gridform": {
      "command": "npx",
      "args": ["-y", "gridform-mcp"],
      "env": { "ANTHROPIC_API_KEY": "sk-ant-..." }
    }
  }
}

The engine tools work immediately with no key. The AI tools use a key you supply — per call, or in the client's environment.

Browse & scaffold

Beyond tools, the server publishes resources — JSON catalogs of the layouts, looks, formats, palettes, fonts, and vibes, plus rendered specimen sheets you can preview — and ready-made prompts for briefing, critiquing, planning a campaign, and localizing.