Chapter 04
Shape & surface
Depth in Inkwell is made from paper, not shadow. Surfaces step lighter or darker, edges are hairlines, and corners are generously round.
Built with
- Tailwind @theme radii
- Hairline borders
- Layered surfaces
Depth
Three layers of paper.
Instead of drop shadows, each layer is simply a slightly different tone of the same paper. Stack them and the hierarchy appears on its own, in light and in dark.
Inset
- 01
--background
The page. The ground everything else sits on.
- 02
--background-elevated
Cards and raised panels, one step off the page.
- 03
--background-surface
Inset wells and the deepest layer.
Edges
Hairlines, not boxes.
Sections are separated by a single pixel of tinted violet or cream, never a heavy rule. There are two strengths: --border for structure and --border-subtle for lines inside lists.
--border
Around components, and between sections. The .rule helper draws it.
--border-subtle
Inside lists and dense layouts, where a full border would crowd.
Corners
The radius scale.
Six steps, from a soft nudge to a pill. Cards use the larger ones; buttons and badges go fully round.
xs
0.375rem
sm
0.5rem
base
0.75rem
lg
1rem
xl
1.5rem
2xl
2rem
--radius-xs: 0.375rem;--radius-sm: 0.5rem;--radius: 0.75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-2xl: 2rem;Interaction
Lift and glow.
Instead of a stock shadow, interactive things rise a couple of pixels and throw a violet glow, drawn from --primary so it follows the theme. Hover the card.
Hover me
A card that lifts.
Two pixels up, one soft violet glow.
transition-all duration-300 ease-outhover:-translate-y-1hover:shadow-[0_18px_40px_-14px_var(--primary)]motion-reduce:transition-none motion-reduce:hover:translate-y-0