Semantic token architecture
Separate primitive values from semantic tokens like action.primary.background, with clear usage roles for hover, focus, and disabled states. This is the core of a scalable system.
Guided design-system foundations for Figma
Turnproductcontextintoareal design system.
Specly guides you from color, type and spacing to semantic tokens, accessibility-aware pairings, Figma Variables, documentation and developer-ready exports — one workflow, fully previewable.
tokenssemantic
action.primary
indigo.500
feedback.success
green.500
accent.highlight
amber.400
radius.lg12px
space.416px
Figma · Preview● working
0%
The problem
A real design system is many connected decisions
Most teams stitch these together by hand across disconnected tools. Specly coordinates them into one coherent foundation.
- Color systems, ramps, light/dark and contrast pairings
- Type scale, weights, line-heights and readability
- Spacing, density, radius and layout logic
- Primitive values mapped to semantic tokens
- Figma Variables, Styles, collections and modes
- Accessibility-aware pairings and state colors
- Documentation that explains the why
- Developer-ready exports and handoff
How it works
From a blank file to a structured foundation
A guided path — no random “generate” button. You make the decisions; Specly keeps them coherent.
- 01
Add Specly in Figma
Launch the plugin in a new or existing file and create a project.
- 02
Share product context
Name, audience, platforms and brand direction — so choices fit your product, not a template.
- 03
Walk the guided wizard
Color, typography, spacing, radius, semantic tokens and accessibility-aware options, with safe defaults.
- 04
Preview the system
See ramps, token relationships, contrast indicators and documentation before anything touches your file.
- 05
Sync to Figma
Generate Variables, Styles, collections and modes — previewable and safe to apply.
- 06
Document & hand off
Generate documentation and export developer-ready tokens: DTCG, JSON, CSS variables and Tailwind.
What's inside
Every part of a foundation, connected
Specly is not just a palette tool, a token exporter, or a checker. Its value is how these parts work together.
Color system generation
Brand, neutral and functional colors with OKLCH-aware ramps, light/dark modes, gamut checks and contrast-aware pairings.
Typography foundations
Google Fonts search and preview, a generated type scale, heading and body styles wired to tokens.
Spacing, radius & density
Compact, balanced or roomy scales plus radius and layout tokens for consistency beyond color.
Safe Figma sync
Create Variables, Styles, collections and modes — always previewable, so you know what changes before it applies.
Accessibility-aware guidance
Contrast relationships, foreground/background pairings and light/dark behavior, surfaced as checks and warnings.
Documentation generation
System overview, token usage and rationale — generated as readable docs and Figma frames.
Developer handoff
Export DTCG-compatible tokens, JSON, CSS variables and Tailwind config — reviewable, developer-ready output.
AI-assisted guidance
Optional suggestions for color direction, fonts and rationale, grounded in your product context.
Semantic architecture
Primitives, semantics, and real usage — kept separate
The deeper value: a raw value becomes a meaningful token, and that token drives the component. Change the primitive once; the whole system follows.
primitive01
indigo.500oklch(.66 .19 274)
semantic token02
action.primary.background→ {indigo.500}
usage03
Get started
…and every state stays in the system:
action.primary.hoveraction.primary.activeaction.primary.focusaction.primary.disabledaction.primary.foreground
Who it's for
Built for whoever owns the foundation
From first-time founders to design-system-aware teams — guided choices for beginners, real control for experts.
Product & UI designers
Founders & solo builders
Developers
Agencies & studios
Design-system-aware teams
Small product teams
Pricing
Free to explore. Pay when you ship.
The free tier proves the workflow. Production output unlocks per design-system lineage, with Pro and Agency for ongoing work.
Prices below are placeholders — not final
Free
$0forever
Explore the full guided flow and prove it works.
Start free- Full guided setup & preview
- Charts & accessibility indicators
- Small proof sync to Figma
- 1–2 sample documentation frames
- Sample export templates
Most popular
Project
$29one-time
Production access for one design-system lineage.
Unlock a project- Full generated system (1 project)
- Full Figma sync
- Full token names & semantic chains
- Full documentation for the project
- Basic refinements & updates
Pro
$19/ month
Recurring value across multiple projects.
Go Pro- Multiple active projects
- Full sync across projects
- Developer exports & version history
- Documentation regeneration
- AI credits & advanced a11y guidance
Agency
$99/ month
Repeatable, client-ready system creation.
Talk to us- Higher project limits
- Client-ready documentation
- Multiple client systems
- Export bundles & reusable templates
- Advanced handoff
FAQ
What Specly is — and isn't
Clear boundaries, honest claims.
Give your product a foundation worth building on.
Join the waitlist and be first in when Specly opens up. Free to explore — no full system locked away until you're ready.