Marketing site.
The canonical palette, default density, and the one surface where the expressive layer is allowed to lead. This is also where the type scale finally runs to display sizes and where the 10% pattern ceiling had to be enforced against a design that looked better breaking it.
The surface
A year of patterns, stored as thirty numbers.
Generative kolams for brand systems. Every pattern is reproducible from its seed, so your asset library is a config file rather than a folder.
Free while in beta · no card required
Three things it does
Every pattern is continuous by construction, symmetric by constraint, and identical on every machine that asks for the same seed.
Never breaks
The line closes on itself, always. Not checked after the fact — guaranteed by the way the tiles compose.
Reproducible
Same seed, same pattern, every time. Commit five numbers instead of a folder of SVGs nobody can regenerate.
Themes with you
The pattern colour is a semantic role. Fork your palette and the kolams come along.
Pricing
One primary action on the page. The featured plan is the only element permitted to break symmetry.
- Unlimited patterns
- SVG export
- Seed history
- Everything in Solo
- Brand palette forks
- Token export
- Shared libraries
- Everything in Studio
- Design-system sync
- Audit log
Draw the first one.
It takes about four seconds and you keep the seed.
The pattern budget
This surface is the reason the 10% ceiling exists, and the place it was hardest to hold.
The first version put the hero kolam behind the headline — full bleed, 15% opacity, dots hidden. It looked, honestly, better than what shipped. It measured roughly 18% coverage at the 1280px breakpoint and considerably more at 375px, where the pattern kept its size while the text reflowed around it.
Two things were wrong with it, and only one was the number. Text sat directly on line work with no opaque surface between them, which the pattern layer rules forbid outright — reduced opacity is not a substitute for a solid ground. And the coverage failed at the smallest viewport, which is where the rule is measured.
The fix was to move the kolam out from behind the text and give it its own panel. Coverage fell to about 9%, the headline got a clean ground, and the hero became a two-column layout that holds its structure down to 820px instead of degrading into text-over-texture.
Full-bleed kolam behind the headline at 15% opacity. ~18% coverage; text on line art with no opaque surface. Looked better, broke two rules.
Kolam in its own panel beside the headline, at full strength with dots visible. ~9% coverage, text on solid ground, and a layout that survives narrow viewports.
What it stresses
Held up
- The type scale at the top end. This is the first surface to use
--ezhuthu-h1and the display face at size. The √2 ratio gives enough distance between the headline and the lede that no intermediate step was wanted. - One primary per view, four times. Every band has exactly one primary button and they are all the same action. The emphasis budget from principle 03 turns out to be ordinary marketing-page discipline.
- The featured plan is the only deliberate asymmetry on the page — an accent top border at
--kambi-3. One break, and it reads instantly. - Generated icons. The three feature marks are 3×3 kolams with different seeds. No icon set, no illustrator, and they fork with the palette.
Worth noting
- Comfortable density suits this surface better than default. Try the switch — a marketing page at P = 10 reads more confidently than at P = 8, which suggests the tier naming is product-shaped rather than surface-shaped. A real adoption would probably pin this page to comfortable.
- The draw-on animation runs once on the hero and is removed entirely under reduced motion. It is decoration on a page the user sees once, which is the only place a 600ms animation is defensible.
- No new components. The pricing plan is a card with a different border treatment; the nav is flex and links. Marketing surfaces are where teams usually fork the component library, and this one did not need to.