← Demos
Demo
Featured
Design

On Design Systems

Why constraints breed creativity — and how a token-driven architecture makes every component a downstream consumer.

Apr 22, 2026
Articles
Design

On Design Systems

Apr 22, 2026

Why constraints breed creativity — and how a token-driven architecture makes every component a downstream consumer.

Tokens

The Token Manifesto

Apr 18, 2026

519 configurable fields, 33 categories, one source of truth. Edit the spec, not the components.

Engineering

Why OKLCH Matters

Apr 14, 2026

Perceptual uniformity, wider gamut, and predictable lightness. The case for a modern color space.

Philosophy

Preset Philosophy

Apr 10, 2026

46 presets, seven aesthetic families. How visual identity becomes a single function call.

Engineering

Component Architecture

Apr 6, 2026

forwardRef, className passthrough, var(--s-*) only. Anatomy of a token-driven component.

Design

The Color of Intent

Apr 2, 2026

Semantic color tokens map meaning to hue. Primary, destructive, muted — each carries weight.

Engineering

Shipping at Scale

Mar 28, 2026

Turbo, tsup, pnpm workspaces. How we build 350+ components across six packages.

Philosophy

Design Constraints

Mar 24, 2026

Constraints don't limit expression — they channel it. Context tells agents what looks good; constraints make it impossible to look bad.

FAQ

© 2026 The Sigil Journal · Built with sigil-ui
Studiodefault
Presets
primary
secondary
background
surface
text
border
accent
success
warning
error
info
display
body
mono
heading wt
600
heading trk
-0.025em
base size
16px
page margin
24px
section pad
64px
card pad
24px
grid gap
24px
stack gap
12px
global
8px
button
8px
card
12px
input
6px
border w
1px
style
card border
card shadow
btn shadow
glow
spring
Type
Duration
0.20
Bounce
1.00
easing
cubic-bezier(0.16, 1, 0.3, 1)
fast
150ms
normal
200ms
slow
300ms
hover scale
1.02
press scale
0.98
hover lift
-1px
stagger
50ms
weight
transform
hover
active scale
0.98
min-width
0px
letter sp
0.000em
icon gap
8px
shadow
hover
border
shadow
padding
24px
title size
1px
title wt
desc size
0.875px
aspect
outline
height
36px
focus ring
2px
focus ring
h1 size
2.25px
h2 size
1.875px
h3 size
1.5px
h4 size
1.25px
weight
tracking
-0.020em
leading
1.20
pattern
pattern α
0.03
noise
gradient
grad angle
180°
height
50px
blur
12px
border
padding
24px
item gap
24px
min-height
600px
padding Y
80px
content-max
680px
layout
title size
56px
desc size
18px
padding Y
64px
max-width
600px
layout
title size
36px
padding Y
48px
columns
4
gap
36px
content-max
1200px
rail-gap
24px
grid-cell
50px
cross-stroke
1.5px
navbar-h
50px
bento-gap
16px
grid lines
dots
cell borders
cell bg
Gutter
Margin
content
hero
navbar
rail visible
enabled