Design systems, sewn in. Meet Seam.

A design tool for Mac. Start from a real design system, stay on brand automatically, and hand off clean code to developers.

Request beta access
See how it compares

Apple silicon or intel. Your files no account.

Screenshot of a design interface showing multiple mobile app screens for a pregnancy-related app in dark purple theme, including welcome, login, user info, medical conditions, and lifestyle input forms, alongside design tool panels and layers on a light gray background.
Skip to main content

Project

Your brand in, your system out.

Pick a base and a brand, and Seam builds the rest: colour ramps, type and spacing scales, light and dark modes, and real components bound to your tokens. Fill in your brand yourself, or hand Seam’s template to your own AI and import what it returns. You choose. Seam does the maths.

Design system interface showing a colour palette with categories: Primary, Neutral, Accent, Destructive, Success, Warning, and Info, each with a gradient of color swatches from light to dark. The sidebar includes sections: Foundation (Base, Constraints) and Brand (Colour, Type, Shape, Tone of voice, Hand-stitched). The interface notes all 50 color pairs pass WCAG AA accessibility standards.

A brand in a few choices, contrast checked as you go

Pick your colours. Seam makes each one an 11-step ramp and fills in dark mode, then checks every pair that sits together against WCAG. Fix one, or fix them all.

‍

User account settings panel in light mode showing fields for name as Sam Rivera and email as sam@example.com, with product updates toggle enabled, and buttons for Delete account, Cancel, and Save changes. Labels indicate Verified status and Pro plan.

See it before you use it

A real screen in your brand, in light and dark, as you set each choice.

A user interface component display showing five button variants labeled default, destructive, outline, secondary, ghost, and link arranged in rows. Each row contains multiple buttons with different styles: solid color, outlined, and icon-only with plus signs. Colors used include blue, red, white, black, and shades of pink and gray. Buttons vary in shape with rounded corners and some have border highlights around them.

shadcn/ui, built in

Button, Badge, Input, Switch, Card and Tabs, every variant, bound to your tokens and ready with their code.

Screenshot of a design tool panel titled 'Promo card' showing settings to adjust spacing with padding changes from 18 to 16 on top, right, bottom, and left sides; corner radius changing from 13 to 14; and color token update showing fill #7a2ff0 labeled as a raw color changed to primary. Each setting has a Snap button next to it.

Rules that keep work on system

Spacing, type, radii, colour and contrast. Turn on the lens to see what’s drifted, then snap it back.

Mark what a human makes

Flag the parts designed by hand. AI tools leave them alone.

Website interface showing a branded document generator with sections for Brand, Colour, Type, Shape, Tone of voice, and Hand-stitched. The main panel displays instructions to download a template named yourbrand.md, edit it, give it to AI, and import the results. Below are downloadable files named DesignSystem.md and constraints.md, each with copy and download buttons.

Your brand in, your system out

Give Seam’s brand template to your AI and import what it returns, choosing which changes to keep. Seam then writes your brand, the design system and its rules as three files your AI coding tools can follow.

You own it

Your files. Your disk.

Pick a base and a brand, and Seam builds the rest: colour ramps, type and spacing scales, light and dark modes, and real components bound to your tokens. You choose the brand. Seam does the maths.

Works offline
‍Every file, every page, wherever you are.

History travels with you
Named versions and autosaves live in the file.

Bring your Figma work
Import layers, text and styles from Figma.

Work together

Work live. Keep control.

Share a file through a folder you already use: iCloud Drive, Dropbox, Google Drive or OneDrive. When you're in it together, cursors and edits arrive live, encrypted end to end.

Three smartphone screens showing an electric vehicle app interface: (1) car status with battery at 64%, range 212 miles, locked exterior, climate set to 21°C, and charging at 100% limit; (2) overhead view of a locked white car with doors closed and an unlock button; (3) charging screen at 64% with 2 hours 10 minutes left to 80%, charge limit 80%, scheduled charging times, and a popup sharing a network code H7K2Q active for 5 minutes.

Same office, no internet.
Share over your network with a one-time code.

You choose who joins
You let each person in before the file opens for them.

Follow and light.
Present to the room, or follow someone'sview.

Work together

Dev Mode is free. Bring the whole team.

Developers inspect, measure and copy code without paying for a seat.

Whole screens as code.
full HTML page, or React with Tailwind, not just one layer at a time.

Code Connect, no setup.
Templates live in the file. No repo, no command line.

Checked before handoff.
Contrast, target size and alt text, and accessibility notes written into the code.

CSS
Tailwind
HTML
React
SwiftUI
Jetpack Compose
Design tokens

Prototype and motion

Prototype it. Animate it. Ship it.

Link screens with Smart animate, overlays and variables, then present on 16 devices. Give any frame a timeline and export it as CSS or GSAP, ScrollTrigger included.

User interface prototype showing a flow from Pulse screen with sleep, recovery, and strain metrics, to Health Monitor displaying heart rate, respiratory rate, blood oxygen, skin temperature, and steps, then to Sleep screen showing sleep performance, hours of sleep, efficiency, and sleep stages; an Interaction panel overlays showing click-triggered navigation to the Sleep screen with instant animation and reset options.
CSS
GSAP
GIF
MP4
SwiftUI
WebM
Lottie

Work together

Keep your references beside your work.

Every file and folder can have a Stash. Paste images, links, colours and notes, and Seam lays them out. Pull a palette from a photo, or find a reference by colour.

User interface showing color swatches with hex codes on left, a photo of a pregnant woman gently holding her belly in front of wooden doors in center, and small notes describing color usage and photography style on right, all on light grey background with dotted grid.

Capture from anywhere
Send your clipboard directly to your Stash.

Drag straight in
Drag straight in. References drop onto the canvas as layers.

A palette from a photo.
Pull colours out of any image you paste.

Everything else you reach for.

User account settings interface for 'SunnySide' showing light and dark mode previews; both display user name Sam Rivera, email sam@example.com, product updates toggle on, status labels Verified and Pro plan, and options to delete account, cancel, or save changes.

Dark mode for your brand

Seam builds a dark version of your brand from the light one, contrast checked. Switch any frame between modes in a click.

Interface of an animation timeline showing slide-in animations for 'Top bar', 'Wordmark', and 'Rings', with a blue vertical time indicator at 420 milliseconds and duration set to 2000 milliseconds.

Motion

Give any frame a timeline. Stagger, ease and follow paths, then export as CSS, GSAP, GIF, video or Lottie.

User interface panel labeled 'Auto layout' showing width set to 194 with Fill, height set to 164, alignment and spacing options, and a checked box for 'Clip content'.

Auto layout

Wrap, hug and fill, with grid tracks you size and drag on the canvas. Figma's shortcuts, so there's little to relearn.

Four rounded squares in a horizontal row with equal spacing of 16 units between each; colors from left to right are dark navy, bright purple, pink, and teal, on a light background.

Intuitive spacing

Drag a layer and pink markers show when the gaps match. Even spacing, without measuring by eye.

Box model

Padding and borders as rings you click, type into or drag. The same model developers see in Dev Mode.

Grid of four health and wellness content cards for moms, including podcast on mindfulness, articles on nutrition and when to call a midwife, and a video on safe exercise during pregnancy.

Grid

Columns and rows you size as fixed, fill or hug. Drag tracks on the canvas, and let layers span cells.

Colorful rectangular card with rounded corners featuring a semi-transparent glass-like smaller rectangle on the left with the text 'Glass card Noise texture Drop shadow' and a solid dark circle partially behind the glass rectangle on a gradient background from orange to purple.

Effects

Glass, noise, texture and progressive blur, alongside shadows. Every effect stays editable.

Dark mode user interface design tool showing a project named Sunnyside with a design page open; the screen displays multiple mobile app login screen mockups with options for email login, sign up, and social logins including Google, Facebook, and Apple, and a forgot password screen, alongside a sidebar with design components and navigation options.

Seam, in light or dark

Seam itself comes light or dark, or follows your Mac. Easy on the eyes, late into the night.

Screenshot of a UI design editor showing text elements and their CSS properties, including a message encouraging community connection and support.

Version history

Every version saved in the file. Compare any two side by side or overlaid, and restore in one step.

Screenshot of a design interface showing a card element with rounded corners, overlay text partially visible, and an annotation box detailing interaction properties including padding 24px, corner radius 24px, fill color #22003F, vertical layout, and 100% opacity.

Annotations and measurements

Notes, specs and saved measurements pinned to layers. They update as the design changes.

Work together

Seam feels familiar but a little different

Figma is the standard. Here’s where Seam goes further.

Stylized black geometric logo consisting of two interlocking shapes resembling linked diamonds or leaves inside a rounded square with a gradient grey.

Seam

A base design system library built in

Add your brand in a snap or let AI do the leg work

Contrast checked as you change the brand

Writes your system for your AI tools

Dev Mode free for everyone

Whole screens as HTML or React

Files on your Mac, not a cloud

Works fully offline

Figma professional

Start from a community kit

Variables added by hand

Check by hand, or with a plugin

Design system files for AI

Needs a paid seat and the MCP server

One layer at a time

Files in Figma’s cloud

Only files you already had open

FAQs

Questions, answered.

Something else? Get in touch.

Yes, while it's in beta. Later, designing will need a licence. Opening files, Dev Mode and exporting stay free.

Shadcn/ui's tokens and components, your brand on top, and rules to keep work on system. It's yours to change, and more bases can follow.

Seam gives you your brand as a template. Fill it in yourself, or ask your own AI to, then import it and choose which changes to keep. Seam then writes three files for your AI coding tools: your brand, the design system and its rules. No accounts or connections.

Yes. Export with the Seam plugin for Figma, then open the file in Seam. Layers, text and styles come across today. Components, variables and prototypes are on their way.

Not for your files. To work live with others during the beta, you sign in with Google.

Only people with access to the file. Live sessions are encrypted end to end, so nothing in between can read them.

Not yet. Seam is Mac first, for Apple silicon and Intel.

Yes, Dev Mode is completely free. Giving anyone with a code access to only the dev tools they need.