May 28, 2026 · 1 min read
Four feels, one diagram
sket separates what a diagram says from how it dresses. A tour of the theme system — drama, flat, paper, and shad — and why styling is a view, not data.
Most tools store style on the shape: this box is blue, that border is 2px. It feels harmless until the diagram grows, the palette drifts, and someone spends a Friday afternoon "making it consistent."
sket shapes carry no color at all. A shape knows its position, its size, its
text, and optionally a variant — a semantic slot like secondary or
ghost. Everything visual comes from the active feel, a set of CSS tokens
applied at render time.
The four personalities
- Drama — interactive lighting, depth, a cursor spotlight. The demo-day theme.
- Flat — borders only, zero shadows. For people who think in wireframes.
- Paper — cream surfaces, ink lines, hatch textures. The sketchbook your architecture deserves.
- Shad — if your product is built on shadcn/ui, your diagrams can match your design system exactly.
Each feel pairs with light and dark modes, and because this very page is rendered from the same tokens, the theme switcher on the home page re-skins everything you're reading right now.
Hierarchy is computed, not painted
The deeper a shape nests, the brighter its surface tint and the tighter its corner radius — derived from spatial containment, not manual styling. Drop a box inside another and it looks contained, immediately, in every feel. The visual hierarchy is emergent, which is a fancy way of saying: you can't get it wrong.
Diagrams in this post are live — drag the page's theme around and watch them follow. Or open one in sket and make it yours.