Patterns
Softriver drew seven patterns, each as a 1080 px square swatch rather than a
repeat. BrandPattern from @tempio/ui/brand crops one swatch to fill its
frame, from the edge its placement names: band from the right, panel from
the bottom-left corner, share from the centre. A placement outside those
three is a type error.
<section className="relative overflow-hidden bg-sidebar">
<BrandPattern name="rib-line" placement="band" tone="dark" />
<div className="relative">…</div>
</section>The parent is relative overflow-hidden, and content after the pattern takes
relative so it paints above it. The pattern file is a mask over a fill, so
only its shapes paint and the parent’s ground shows between them: the dark
tone paints them white at 8% over the purple, the light tone plum at 6% over
the paper. Four of the seven cover the whole frame with overlapping shapes, so
their mask reads each shape’s lightness rather than its outline. Text on a
pattern needs a scrim or display-size type.
Below, band and panel sit on the sidebar purple with the dark tone, and
share sits on the paper with the light tone. The lines under each name are
the kit’s register for that pattern, its rule for type, and where the kit
puts it.
Stone Course
stone-course · Steps · Solid, dark. Tint within one step of the ground; large type only, or a scrim.
Where the kit puts it: Section backgrounds, card surfaces, deck backdrops.
Sunlit Course
sunlit-course · Steps and gradient · Solid, bright. A surface, not a backdrop for copy.
Where the kit puts it: OG and share images, hero crops, cover slides.
Dry Joint
dry-joint · Steps · Hairline, dark. The quietest; long copy and dense UI sit on it cleanly.
Where the kit puts it: Section backgrounds, empty states, docs and pricing pages.
Tracery
tracery · Arch and gradient · Hairline, bright. Type over the magenta end, or a scrim.
Where the kit puts it: Hero textures, OG images, full-bleed section breaks.
Scalework
scalework · Arch · Solid, dense. Keep type off it.
Where the kit puts it: Dividers and section breaks, banner bands, avatar fields.
Arcade
arcade · Arch · Solid, bold. Never behind the lockup; crop to a corner or bottom edge.
Where the kit puts it: Hero corners and footers, poster backs, merchandise.
Rib Line
rib-line · Arch · Hairline, dark. Best under text; runs vertically, suits documentation.
Where the kit puts it: Long-form backgrounds, sidebars and rails, empty screens.