From Zero to Production in 7 Steps.
A complete walkthrough of building with Sigil — from first install to shipping a fully token-driven product page. Each step includes interactive visualizations so you understand the system, not just the commands.
Create a new Sigil project.
One command scaffolds everything: config file, token markdown, CSS variables, and your first preset. Works with Next.js, Remix, Vite, Astro, and more.
Project config — framework detection, component output path, active preset
Markdown overrides for the 519-token system
CSS custom properties compiled from your token layer
@sigil-ui/components and @sigil-ui/presets added as dependencies
Same components you trust. One layer for agents to edit.
Sigil's components are built on Radix + Base UI primitives — accessible, composable headless patterns. The token layer is the thin, agent-friendly control surface on top. Humans and AI agents both edit sigil.tokens.md; the components never change.
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.
Your token markdown file compiles into CSS custom properties. Every component reads those properties via var(--s-*). Change the source, everything downstream updates.
Runtime Panel
Create your own — or start from 46.
Your project needs its own visual identity. Create a custom preset interactively, fork a curated one as a starting point, or edit sigil.tokens.md directly. The file is yours — presets are just starting points.
Interactive scaffolding asks for your brand colors, fonts, and radius preference. Generates a complete token preset that you own.
Start from one of 46 presets, then customize. The preset writes to your token file — you can change any value afterward.
Open sigil.tokens.md and set core values yourself. Full control through the token layer — from colors to motion.
sigil preset create walks you through naming your preset, choosing a base, setting brand colors and fonts, and writing the result to your token file. Your project uses your preset — not a library preset.
Don't want to start from scratch? Use a curated preset as your base — then customize. Click the preset pills below to compare visual identities.
sigil preset create to build a custom preset with your brand colors, fonts, and radius — then edit sigil.tokens.md for full control.Structural
sigil · kova · cobalt · helix · hexEngineering precision, grids, measurements
Minimal
crux · axiom · arc · monoMaximum whitespace, clean, few elements
Dark
basalt · onyx · fang · obsid · cipher · noirDeep blacks, cinematic, dramatic
Colorful
flux · shard · prism · vex · dsgn · duskGradients, vibrant accents, playful
Editorial
etch · rune · strata · glyph · mrkrTypography-forward, print-inspired
Industrial
alloy · forge · anvil · rivet · brassMetallic, mechanical, utilitarian
Import what you need.
Components are copied into your project so you own the code. Every component reads from var(--s-*) tokens — no hardcoded colors, fonts, or spacing.
A Button reads --s-primary for fill, --s-radius-md for corners, --s-duration-fast for transitions. Change any token and the button updates instantly.
Each visual decision resolves to one named token, then every component reads the same CSS variable.
Fill
--s-primaryButton background, active rails, focus accents.
350+ token-driven components across 14 categories. Browse the full library →
Your token file is your design system.
Whether you created a custom preset or forked a curated one, sigil.tokens.md is now yours to fine-tune. Change any of 519 fields — colors, fonts, spacing, radius, shadows, motion — and every component updates instantly. This is how you build a unique visual identity without touching component code.
Compose with the playbook.
Ten compositional rules that make any page 'just work'. Gap-pixel grids, mono labels, border stacks, density text — the structural vocabulary of every Sigil page.
import {
SigilFrame, SigilSection, GapPixelGrid,
GapPixelCell, MonoLabel, TabularValue,
AccentCTA, DensityText, CardCell,
} from "@sigil-ui/components";
export default function PricingPage() {
return (
<SigilFrame>
<SigilSection borderTop>
<MonoLabel variant="accent">/ Pricing</MonoLabel>
<DensityText role="headline" as="h1">
Simple, transparent pricing.
</DensityText>
<GapPixelGrid columns={{ md: 3 }}>
<CardCell
title="Starter"
footer={<MonoLabel>Free forever</MonoLabel>}
>
<TabularValue size="xl">$0</TabularValue>
</CardCell>
<CardCell
title="Pro"
footer={<MonoLabel>Per month</MonoLabel>}
>
<TabularValue size="xl">$49</TabularValue>
</CardCell>
<CardCell
title="Enterprise"
footer={<MonoLabel>Custom</MonoLabel>}
>
<TabularValue size="xl">Custom</TabularValue>
</CardCell>
</GapPixelGrid>
<AccentCTA>Get Started</AccentCTA>
</SigilSection>
</SigilFrame>
);
}See the playbook in action across 17 production templates →
Run doctor. Deploy.
sigil doctor validates your entire setup — config, tokens, CSS, components, dependencies, and active preset. Green across the board means you're ready to ship.
AI agents use sigil.tokens.md as a contract. They edit the markdown, the compiler produces deterministic CSS, and components update without drift.
sigil init generates .sigil/AGENTS.md with instructions for any AI coding agent.
Ready to build?
You've seen the full workflow. One file, 519 tokens, 350+ token-driven components, 46 presets. The design system that compiles from a token layer.
npx create-sigil-app