The set
The seven strokes renovare.org uses, named by shape. Previews are small; downloads are full resolution.
Recipes
| Placement | Stroke | Opacity | Blend |
|---|---|---|---|
| Home hero | Loop Vertical | 5% | multiply |
| Page hero | Wavy | 30% | multiply |
| Footer (Green) | Drop | 50% | multiply |
| Newsletter panel (Green) | Drop | 100% | multiply |
| Behind portraits, light band | Wavy Relaxed | 50–60% | multiply |
| Behind portraits, dark band | Wavy Relaxed | 20% | screen |
| Photo collage | Wavy Relaxed | 25% | multiply |
| Card media | Loop Small | 20% | multiply |
| Podcast show page hero | Loop Small | 30% | multiply |
Formation
Renovaré Book Club
HTML + Tailwind
<div class="relative overflow-hidden flex flex-col items-center text-center gap-4 py-16 px-6">
<div class="pointer-events-none absolute inset-0 flex items-center justify-center mix-blend-multiply opacity-30">
<img src="https://ik.imagekit.io/renovare/images/brushstrokes/tr:w-1500,f-auto/brushstroke_wavy.png" alt="" class="w-[140%] max-w-none h-auto">
</div>
<p class="relative font-sans font-bold leading-tight tracking-wider uppercase text-lg text-primary">Formation</p>
<h1 class="relative font-display font-normal leading-none text-4xl sm:text-5xl md:text-6xl lg:text-7xl">Renovaré Book Club</h1>
</div>
Stay in touch
HTML + Tailwind
<div class="relative overflow-hidden flex flex-col items-center text-center gap-4 py-16 px-6">
<div class="pointer-events-none absolute inset-0 flex items-center justify-center mix-blend-screen opacity-20">
<img src="https://ik.imagekit.io/renovare/images/brushstrokes/tr:w-1500,f-auto/brushstroke_wavy_relaxed.png" alt="" class="w-[140%] max-w-none h-auto">
</div>
<h2 class="relative font-display font-normal leading-none text-3xl sm:text-4xl">Stay in touch</h2>
</div>Rules
- At most one brushstroke in view at a time.
- Always behind content; never over text or faces.
- Only the supplied gray strokes. Don’t recolor, outline or sharpen them.
- Let the stroke run off the edges of the screen; it should feel like a horizon, not a shape.
- On the web, load strokes from ImageKit as AVIF (
f-avif,q-60); they’re blended so faintly that the compression doesn’t show.
Extras
Earlier brushstroke exports, kept until we confirm which duplicate the set above. Need something new? Paint it with the Procreate brush.
