Sigil Playbook

Sigil Playbook — The Page Composition Skill

Read this before building any page in the Sigil aesthetic.

The Sigil Playbook codifies the small vocabulary of structural patterns that make any new page "just work." Originating from the Reticle design language (Dedalus monorepo), these 10 rules — 6 compositional moves + 4 supporting patterns — replace dozens of ad-hoc layout decisions.

Quick Reference: The 10 Rules

The Universal Shell (Already Exists)

Every page inherits the same skeleton via SigilFrame/SigilPageGrid:

SigilFrame
  SigilPageGrid  [margin | gutter | content (max 1280px) | gutter | margin]
    sticky nav (frosted: bg/80 + backdrop-blur-lg)
    flex-1 content
    footer

New pages automatically get visible gutters, margin rails, and the content column. You never have to think about outer chrome — it's inherited.

Move 1: The Gap-Pixel Grid

The single most repeated structural pattern. Import GapPixelGrid + GapPixelCell:

import { GapPixelGrid, GapPixelCell } from "@sigil-ui/components";

<GapPixelGrid columns={{ md: 3 }}>
  <GapPixelCell className="p-6">Product Card</GapPixelCell>
  <GapPixelCell className="p-6">Product Card</GapPixelCell>
  <GapPixelCell className="p-6">Product Card</GapPixelCell>
</GapPixelGrid>

How it works: Parent bg-[var(--s-border)] bleeds through gap-px as hairline dividers. Each cell gets bg-[var(--s-background)]. One pattern for product cards, pricing cards, blog cards, data tables, image galleries, and button groups.

Move 2: The Mono-Uppercase Label

The instrument-label voice. Import MonoLabel:

import { MonoLabel } from "@sigil-ui/components";

<MonoLabel>Infrastructure</MonoLabel>           // muted eyebrow
<MonoLabel variant="accent">FAQ</MonoLabel>     // primary-colored
<MonoLabel size="sm">Ships Immediately</MonoLabel>

When to use: Section eyebrows, filter labels, cart headers, announcement bars, badges, empty states, "No Image" placeholders, "Sold Out" badges, breadcrumb-style nav.

Move 3: The Section Border Stack

Sections separated by borders, not spacing. Import BorderStack:

import { BorderStack } from "@sigil-ui/components";

<BorderStack>
  <nav>...</nav>
  <section>Hero</section>
  <section>Features</section>
  <footer>...</footer>
</BorderStack>

Why: Borders are rhythm, not decoration. The page reads as a vertical stack of bands.

You can also use SigilSection with borderTop/borderBottom props inside a SigilFrame.

Move 4: The Accent Singleton

Exactly one color breaks the monochrome. Import AccentCTA and AccentActive:

import { AccentCTA, AccentActive } from "@sigil-ui/components";

// CTA button with glow
<AccentCTA>Get Started</AccentCTA>
<AccentCTA size="lg" glow>Add to Cart</AccentCTA>

// Active state (selected filter, size, etc.)
<AccentActive active={selectedSize === "M"}>M</AccentActive>

The treatment:

• CTAs: bg-[var(--s-primary)] + text-[var(--s-primary-contrast)] + glow hover
• Active: border-primary/40 bg-primary/10 text-primary
• Eyebrows: MonoLabel variant="accent" for section labels in primary color

Move 5: Tabular-Nums

Every number that compares to another number. Import TabularValue:

import { TabularValue } from "@sigil-ui/components";

<TabularValue>$2,400.00</TabularValue>
<TabularValue size="lg">128</TabularValue>
<TabularValue as="time" muted>2024-01-15</TabularValue>

When to use: Prices, pricing tiers, calculator results, blog dates, cart quantities, subtotals, metrics, stats. Mono + tabular makes columns align optically.

Move 6: Featured-Plus-Grid

Hero item in a collection. Import FeaturedGrid + GapPixelCell:

import { FeaturedGrid, GapPixelCell } from "@sigil-ui/components";

<FeaturedGrid columns={3}>
  <GapPixelCell className="p-8">Featured Post (2fr)</GapPixelCell>
  <GapPixelCell className="p-4">Side Post (1fr)</GapPixelCell>
  <GapPixelCell className="p-4">Card 1</GapPixelCell>
  <GapPixelCell className="p-4">Card 2</GapPixelCell>
  <GapPixelCell className="p-4">Card 3</GapPixelCell>
</FeaturedGrid>

Pattern: First child spans 2fr, second fills 1fr. Remaining children flow into a standard gap-pixel grid below, joined by marginTop: 1 for continuous hairlines.

Move 7: Density DNA

The type scale that creates the "dense technical document" feel. Import DensityText:

import { DensityText } from "@sigil-ui/components";

<DensityText role="chrome">INFRASTRUCTURE</DensityText>  // 10px mono uppercase
<DensityText role="counter">3</DensityText>               // 11px mono
<DensityText role="detail">Add to Cart</DensityText>      // 12px
<DensityText role="nav">Documentation</DensityText>       // 13px
<DensityText role="body">A description paragraph.</DensityText>  // 14px
<DensityText role="headline" as="h2">Build faster</DensityText>  // 2xl+ display

Supporting Patterns

Frosted Panel

Drawers, sidebars, sticky navbars:

import { FrostedPanel } from "@sigil-ui/components";

<FrostedPanel edge="left">Cart sidebar</FrostedPanel>
<FrostedPanel edge="bottom" variant="solid" as="nav">Navbar</FrostedPanel>

Card Cell

Cards designed for gap-pixel grids:

import { CardCell, GapPixelGrid } from "@sigil-ui/components";

<GapPixelGrid columns={{ md: 3 }}>
  <CardCell title="Edge Compute" footer={<MonoLabel>12 regions</MonoLabel>}>
    Deploy at the edge with sub-50ms cold starts.
  </CardCell>
</GapPixelGrid>

What Makes a New Page "Just Work"

Building a new page requires zero new design decisions:

That's the whole system. Ten rules, any page, one aesthetic.

Token Variables Used

All playbook components consume standard --s-* token variables:

No hardcoded colors, fonts, or spacing. Everything flows from the token system. Switch presets and every playbook component updates automatically.