FormatKit: A Design Language for Every Medium

If you've tried to build design output in Claude Code, you know the moment it breaks.

Claude gives you beautiful reasoning. Smart layout logic. Good typographic decisions. It can write copy, structure a brief, think through a visual hierarchy. And then you need to turn that reasoning into an actual rendered artifact — a poster at 300dpi, a carousel with five slides, a motion piece with timed transitions, a print layout with bleed marks — and the floor drops out.

The reasoning is there. The rendering isn't.

FormatKit exists because I hit that wall and decided to build through it instead of around it.

Every output type is expressed as a code-first component. A poster is a component. A carousel is a component. A social card is a component. A motion sequence is a component. Each component is parametric — it accepts brand tokens (colors, type, voice, layout rules) and content (copy, images, data) as inputs and renders a finished output.

One component, fed different brand systems, produces different results. The same poster component renders a luxury serif layout for one brand and a bold sans-serif layout for another. The design logic is in the component. The brand identity is in the tokens. The content is in the input. All three are separate and composable.

This is what I mean by a design language. Not a template library. Not a file collection. A language — a set of composable primitives that can express any design output in any medium, hydrated to any brand, at runtime.

Two paths.

Import from Figma. If your team already designs in Figma, you can bring those designs into FormatKit. The import reads your components, extracts the parametric structure, and converts them into FormatKit components that hydrate to your brand tokens. Your existing design work becomes the starting point.

Vibe-code in Claude. If you'd rather describe what you want than design it manually, you can author FormatKit components conversationally using Claude Code. Describe the layout, the behavior, the animation, and Claude generates the component. You iterate in natural language until it matches your intent. No Figma required. No design tool required. The component is code from the start.

Both paths produce the same thing: a FormatKit component that lives in your template library and renders to your brand at runtime.

FormatKit components are code. They're authored as structured definitions that describe layout, typography, color, spacing, animation, and content slots. Each component is:

Parametric. Brand tokens are variables, not hard-coded values. Change the brand, the component adapts.

Animated. Motion is native to the component, not layered on afterward. A poster component and a motion component share the same design logic with different output behaviors.

Multi-format. The same component can render as a static image, a video frame, a PDF page, or an interactive web element. The output format is a parameter, not a separate component.

Versionable. Components are diffable, branchable, and trackable. The team's design system has version history the same way their codebase does.

Six months ago, the design production problem was about headcount. Teams couldn't keep up with the volume. The answer was supposed to be hire more people or outsource more.

That conversation is over. Everyone is trying to use AI now. The new problem isn't we don't have enough designers. The new problem is Claude can think about design but can't render it at production quality. Every developer, every studio, every design team trying to build design tooling in Claude Code is hitting the same wall: the reasoning is brilliant, the output layer doesn't exist.

FormatKit is the output layer. One component language that sits between Claude's reasoning and your brand's production pipeline. It turns what Claude thinks into what your brand ships.

If you're building design tooling in Claude Code and you need the rendering and format infrastructure underneath — I built it. Message me and I'll show you what's possible.

syvon.ai