What is a preset

A Sigil preset is a complete token bundle — colors, typography, spacing, radius, shadows, motion, and grid settings. Apply one and every component in your app updates in lockstep. No manual overrides. No class hunting.

npx @sigil-ui/cli preset cobalt

Browsing presets

# List all 46 presets with categories and descriptions
npx @sigil-ui/cli preset list

# Inspect a specific preset
npx @sigil-ui/cli preset cobalt

Or use the CLI init flow to pick one interactively:

npx @sigil-ui/cli init

Applying a preset

Via the CLI

npx @sigil-ui/cli preset cobalt

This compiles the preset tokens to CSS and updates your project's --s-* variables.

Via code

import { cobalt } from "@sigil-ui/presets/cobalt";

Then pass it to the Sigil compiler or write the tokens into your stylesheet.

Categories

Structural

Engineered precision. Grid lines, cross marks, disciplined layouts.

Preset	Description	Primary hue	Display font
Sigil	Cross marks + grid lines, soft indigo	Indigo	Nacelle
Kova	Hard-forged clarity, disciplined structure	Teal	Inter
Cobalt	Blue metallic, chemical precision	Cobalt	Inter
Helix	DNA spiral, biological precision	Teal	Inter
Hex	Hexagonal grid, honeycomb geometry	Amber	Space Grotesk

Minimal

Maximum whitespace. Pure essentials. Nothing wasted.

Preset	Description	Primary hue	Display font
Crux	Decisive minimal, pure essentials	Neutral	Nacelle
Axiom	Mathematical purity, axiomatic	Blue	Inter
Arc	Curved trajectories, flowing forms	Sky	Satoshi
Mono	Monochrome monospace, terminal aesthetic	Neutral	Space Mono

Dark

Deep blacks, premium surfaces, dramatic contrast.

Preset	Description	Primary hue	Display font
Basalt	Volcanic dark stone, dense and grounded	Slate	Inter
Onyx	Pure black gemstone, ultra-dark premium	Purple	GT America
Fang	Sharp edges, aggressive contrast	Red	Space Grotesk
Obsidian	Volcanic glass, mirror-dark	Slate	GT America
Cipher	Encrypted aesthetic, crypto-noir	Green	Space Grotesk
Noir	Film noir, cinematic dark, warm highlights	Amber	GT America

Colorful

Dynamic palettes, gradients, expressive energy.

Preset	Description	Primary hue	Display font
Flux	Dynamic gradients, energetic flow	Blue-purple	Satoshi
Shard	Crystalline fragments, prismatic facets	Cyan	Satoshi
Prism	Light spectrum, rainbow celebration	Rainbow	Satoshi
Vex	Puzzle-like complexity, intricate	Fuchsia	Satoshi
DSGN	Design tool aesthetic, Figma-inspired	Purple	Inter
Dusk	Twilight gradient, sunset transition	Rose-violet	Satoshi

Editorial

Typographic craft. Serif pairings. Inky textures.

Preset	Description	Primary hue	Display font
Etch	Acid-etched lines, engraved precision	Emerald	Söhne
Rune	Ancient symbols, mystical marks	Violet	Fraunces
Strata	Geological layers, earthy tones	Amber	Söhne
Glyph	Letterform-focused, editorial	Indigo	Söhne
Marker	Hand-drawn marks, sketch aesthetic	Black	Fraunces

Industrial

Heavy foundations. Metallic palettes. Utilitarian craft.

Preset	Description	Primary hue	Display font
Alloy	Fused metals, warm steel + copper	Copper	Space Grotesk
Forge	Molten heat, orange-red glow	Orange	Space Grotesk
Anvil	Heavy industrial, weighty foundations	Iron	Space Grotesk
Rivet	Mechanical precision, utilitarian	Amber	Inter
Brass	Warm metallic, vintage patina	Gold	Fraunces

Edgeless

Open, ambient systems for softer pages without visible structural chrome.

Preset	Description	Primary hue	Display font
Vast	Expansive open space, warm editorial tones	Terracotta	Fraunces
Aura	Ethereal dark with luminous violet glow	Violet	General Sans
Field	Clean utilitarian open space	Green	Space Grotesk
Clay	Warm terracotta, handcrafted feel	Terracotta	DM Serif Display
Sage	Botanical calm and understated elegance	Green	Libre Baskerville
Ink	Deep indigo immersion	Indigo	Plus Jakarta Sans
Sand	Warm golden desert surfaces	Amber	Instrument Serif
Plum	Luxurious deep plum and mauve surfaces	Magenta	Playfair Display
Moss	Dark forest organic-tech energy	Green	Space Grotesk
Coral	Soft coral, warm and friendly	Coral	Outfit
Dune	Golden desert warmth with sharp edges	Amber	Instrument Serif
Ocean	Deep teal, calming depth	Teal	General Sans
Rose	Dusty rose, refined serif type	Rose	Fraunces

Creating a custom preset

npx @sigil-ui/cli preset create

Or manually create a TypeScript file:

presets/my-brand.ts

import type { SigilPreset } from "@sigil-ui/tokens";

export const myBrand: SigilPreset = {
  name: "my-brand",
  metadata: {
    description: "Custom brand theme",
    author: "Your team",
    version: "1.0.0",
  },
  tokens: {
    colors: {
      primary: "oklch(0.55 0.20 145)",
      "primary-hover": "oklch(0.50 0.23 145)",
      "primary-muted": "oklch(0.88 0.05 145)",
      // ... all required color tokens
    },
    typography: {
      "font-display": '"Your Font", system-ui, sans-serif',
      "font-body": "system-ui, -apple-system, sans-serif",
      "font-mono": '"Fira Code", ui-monospace, monospace',
    },
    // spacing, radius, shadows, motion, sigil...
  },
};

Activate it by adding it to your project and selecting it with the CLI:

npx @sigil-ui/cli preset my-brand
npx @sigil-ui/cli doctor

Comparing presets

Use sigil diff to see what changes between two presets:

npx @sigil-ui/cli diff --preset sigil --preset cobalt

Presets