Your design system, ready before the first screen
One-Shot helps solo designers and small product teams set up colour, type, grid, spacing, elevation and shape as one connected foundation. Start from your brand colour or a style starter, then take it into code, design tools and AI workflows.
A silent 31 second recording. The brand colour changes from indigo to teal and every palette regenerates. The type scale ratio increases and every text role grows. The component preview switches to dark. Export shows the code, AI assistant and Figma destinations.
Try it with a brand colour
Pick a colour or switch to dark, and all six foundations regenerate on the spot. Until you choose, the demo cycles through a few.
One system, from first decision to finished handoff
The foundations are connected, so a change to one carries through to the components and every export. The examples below come from the system above, and change with it.
Start from your brand or a style starter
Enter one brand colour or choose a curated style starter. One-Shot generates all six foundations, in light and dark, with responsive type.
Starting points
- Your brand colour#4F38C9, as chosen above
- Warm editorialCream surfaces, a warm coral accent and measured serif headings.
- Quiet precisionCool charcoal surfaces and a restrained lavender accent for focused product work.
- Clear schedulingGeometric headings and rounded, monochrome controls make everyday tasks feel clear.
- Technical minimalMonochrome surfaces, fine outlines and clear typography for precise interfaces.
And 8 more style starters
Refine it and check as you go
Adjust colour, type, grid, spacing, elevation and shape, and see every change on real components. Checks point out weak contrast and inconsistent values, with suggested fixes.
Contrast checksWCAG 2 · light
- Body text18.6:1Meets 4.5:1
- Secondary text12.4:1Meets 4.5:1
- Primary button9.8:1Meets 4.5:1
Checks support your review. They don’t certify accessibility.
Take it into the tools you use
Export CSS variables, Tailwind and shadcn/ui themes, DTCG tokens and a design.md brief for coding assistants, or import into Figma with the One-Shot importer.
tokens.css285 variables
:root {--colour-palette-brand-primary-500: rgb(79 56 201 / 1);--colour-palette-brand-primary-600: rgb(63.3457 46.8614 161.5983 / 1);--colour-action-primary-default: var(--colour-palette-brand-primary-600);--colour-focus-ring: var(--colour-palette-brand-primary-600);--spacing-card: var(--spacing-scale-6);--shape-radius-card: var(--shape-radius-scale-lg);…}
- CSS variables
- Tailwind
- shadcn/ui
- DTCG tokens
- design.md
- Figma
- Paper
The Figma importer runs as a development plugin in Figma Desktop. Paper import uses a local agent connected to Paper’s MCP server. Live assistant connections over MCP are being tested during the private beta.
Join the waiting list
One-Shot is in private beta. Leave your details and we’ll email you when we can offer you access.
- Joining doesn’t create an account or give you access yet.
- We’ll only contact you about access to One-Shot.
- We’re opening access gradually, so we can’t promise a date.