One file.
Every detail.
Your design system, written in markdown. Edit colors, type, spacing, and motion in DESIGN.md. Every component follows.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
One file. Every detail. Color, type, spacing, and motion. Every component follows.
Choose your building blocks.
Try the forms, tables, charts, and controls below. Each is a real React component. Open the docs for its code, props, and examples.
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.
Change one file. Update every component.
Set colors, fonts, spacing, and motion in DESIGN.md. Compile the file once to update every component that uses those tokens.
Your design decisions
Choose a value. The preview updates from the compiled tokens.
--s-primary: oklch(0.48 0.19 275);
--s-radius-card: 0px;
--s-card-content-padding-x: 16px;Your components, updated
The card, input, badge, and button use the same token spec.
Create a workspace
This is a live example. Try the form and change a token.
Find your starting style.
Start with a preset, then adjust it to fit your product. Each defines colors, type, spacing, borders, and motion. Compare a few here, or use the bottom bar to change this entire site.
Workspace settings
A working form, styled by the Sigil preset.
Choose a preset
Switch presets to compare the same form. Its colors, typography, spacing, and corners update together.
Use Sigil in your project:
npx @sigil-ui/cli preset sigilSee how the pieces fit together.
Explore complete pages built with Sigil. See how components, layouts, and presets work together before building your own.
Add Sigil to your app.
Start a new Next.js project or set up Sigil in an existing app. Both paths connect your components to a shared set of design tokens.
Create a new app.
Create a Next.js app with Sigil components and tokens already connected.
Use your existing app.
Detect your framework and configure Sigil tokens, styles, and agent instructions.