An Agent-First
Design System.
350+ components, 46 presets, 519 tokens. One token file controls every color, font, radius, and animation. Agents and humans edit the same surface.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Deploy to Production
Select the target for this deployment.
Last deployed 4m ago
Edit Tokens
Token-driven styling. Changes apply everywhere.
You can add more later.
Allow the wallpaper to be tinted.
Set your budget range ($200 – $800).
Project Analytics
7,200 / 10,000 requests this cycle.
Kevin pushed 3 commits to main
2m agoBuild #847 deployed to production
5m agoAccount
Created
Workspace
Configure
Invite
Team
This will be your team URL slug.
Plan
Choose the plan that fits your needs.
You can change these settings later.
Browse the full component system.
Start with blueprint-level primitives, then drop in finished components that already inherit the active preset.
Component
From project intent to production UI.
DESIGN.md, presets, guidelines, skills, MCPs, and proven upstream libraries enter one constraint pipeline. Sigil absorbs them into tokens and adapters, then emits coherent components and pages without forking behavior libraries.
FULL STACK
Four layers with a single rule: visual decisions flow in one direction. Edit the bottom, and everything above updates.
Intent enters once, compiles into constraints, wraps proven behavior, and ships as coherent UI.
Select a layer to isolate it and see what it contains.
Sigil maintains the contract and adapters — not duplicate copies of upstream libraries.
DESIGN.md is the source of truth.
The human-readable spec compiles to 519 CSS custom properties, Tailwind theme values, and W3C tokens. Change the intent once and 350+ components update without scattered edits.
Runtime Panel
Every design decision maps to a named token. Edit the spec and watch the compiled interface update live.
Own the constraints. Reuse the primitives.
Sigil wraps Base UI, Radix, charting, carousel, and other proven libraries with one token contract. Upstream owns difficult behavior; Sigil owns the visual language, adapters, and agent-editable surface.
Every library listed here ships automatically when you use this component. No extra imports.
Radix UI
radixAccessible primitives — focus management, keyboard nav, ARIA patterns
radix-ui.com →Radix UItailwind-mergeEvery visual property resolves to one named token. No hardcoded values — components read CSS variables directly.
Each visual decision resolves to one named token, then every component reads the same CSS variable.
Fill
--s-primaryButton background, active rails, focus accents.
Same components. Completely different identity.
Each of the 46 presets rewrites all 519 tokens at once — colors, fonts, spacing, radius, motion, everything. Not a theme toggle. A different design language.
Every component.
sigil preset create to build a custom preset with your brand colors, fonts, and radius — then edit sigil.tokens.md for full control.46 curated bundles. One command writes the token layer.
Pick a base, set brand colors and fonts, and a custom preset is generated.
Open sigil.tokens.md and change any of 519 fields. Your file is the source of truth.
Set up, switch presets, audit, and validate — from the terminal.
One CLI to scaffold projects, swap visual identities, generate docs, bridge existing systems, and verify everything works.
Projected UI without leaving CSS.
Isometric scenes, prisms, exploded boxes, tilt cards, and depth stacks all inherit the active token system.
17 templates. Real sites, real presets.
SaaS landing pages, dashboards, e-commerce, portfolios, dev docs — each built with a different preset to show how the same components produce different products.
Get started in 30 seconds.
One command creates the token file, installs the CSS variable pipeline, drops in starter components, and writes the agent instructions your project needs.
Scaffold
Detects your framework, package manager, Tailwind setup, and where token CSS should land.
Pick a system
Start from one of 46 presets or let the installer recommend one from your product type.
Ship components
Components already read var(--s-*), so agents can change the system without touching React.
The generated project tells humans and AI the same rule: edit tokens, not component styling.
Start building.
350+ components. 46 presets. 519 tokens. One file controls everything — start building in 30 seconds.