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.
Four layers. One editable surface.
Tokens define every visual primitive. Presets bundle them into complete identities. Components consume them via CSS variables. Pages compose components. You only ever edit the token layer.
FULL STACK
Four layers with a single rule: visual decisions flow in one direction. Edit the bottom, and everything above updates.
Each layer has one job. Tokens define. Presets bundle. Components consume. Pages compose.
Select a layer to isolate it and see what it contains.
Changes flow upward — edit a token and every layer above inherits it automatically.
Edit one file. Everything recompiles.
sigil.tokens.md compiles to 519 CSS custom properties. Every component reads them. Change a value, and 350+ components update — no manual edits across files.
Runtime Panel
Every line in sigil.tokens.md maps to a CSS variable. Edit a value and see the component update live.
Radix primitives. Token-driven styling. One import.
Each component bundles the behavior primitive, animation engine, and token bindings it needs. Select one to see what ships inside.
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.