NodlumeStripes & rulings · Lines
Notebook ruling CSS texture
Notebook ruling is a single set of horizontal one-pixel rules at a pitch of twenty-eight pixels — roughly a line of body text — so the surface reads as the lined page of a notebook. It is the texture for anything about writing: a notes app, a journal, a compose box, an empty state that invites the first line.
Set the pitch to match the line-height of the text that sits on it, or the rules fight the type; that alignment is the whole trick. Keep it under seven percent, and keep it out of interfaces that are not about writing — under a dashboard it reads as a striped bug. Run it at 90° and it becomes a pinstripe.
Under text
Reading-size copy on the texture, so the alpha is judged by legibility rather than by taste.
A card on top
Separated without a second border.
Recipe
- Kind
- Lines
- Ink
- theme foreground at 7%
- Pitch
- 28px
- Line
- 1px
- Angle
- 0°
- Ink color
- color-mix(in oklab, var(--foreground) 7%, transparent)
CSS
.notebook-ruling {
background-image: repeating-linear-gradient(0deg, color-mix(in oklab, var(--foreground) 7%, transparent) 0 1px, transparent 1px 28px);
}Tailwind
bg-[image:repeating-linear-gradient(0deg,_color-mix(in_oklab,_var(--foreground)_7%,_transparent)_0_1px,_transparent_1px_28px)]
Token
--texture-notebook-ruling: repeating-linear-gradient(0deg, color-mix(in oklab, var(--foreground) 7%, transparent) 0 1px, transparent 1px 28px);
Notebook ruling, answered
- How is the notebook ruling texture made in CSS?
- Notebook ruling is one repeating linear gradient, where the first stop is the band and the period is the pitch. Its ink is the theme's foreground color mixed to 7% with color-mix, so the same declaration re-tints itself when the theme switches between light and dark mode. The full declaration is repeating-linear-gradient(0deg, color-mix(in oklab, var(--foreground) 7%, transparent) 0 1px, transparent 1px 28px) — copy the CSS rule, the Tailwind classes or the custom property above, or open it in the playground to change the pitch, the ink or the alpha.
- How do I use the notebook ruling texture in Tailwind CSS?
- Copy the Tailwind tab: it is one or two arbitrary-value classes, bg-[image:…] for the gradient and bg-[size:…] for the pitch where the kind needs one, with spaces written as underscores. Tailwind v3 and v4 both accept the form. For a value you reuse across the site, register the Token tab's custom property in your theme and reference it from a utility.
- How subtle should the notebook ruling texture be?
- Most line textures work between three and eight percent of the foreground; this preset sits at 7%. Where two layers cross, the crossings stack to roughly double strength, so halve the per-layer alpha you would use for a single stripe.