Four rules borrowed intact.
Each of these is a working constraint from kolam practice, not a metaphor for one. A principle earns its place by ruling things out — so each is stated with the decisions it forbids and a way to test whether it was followed.
01 · Nothing is chosen. Everything is derived.
pulli — the dot. The kolam begins by laying out the grid. Every line that follows is answerable to it.
The practice. A kolam artist does not improvise the composition and then fit dots to it. She lays the pulli first — a count, a shape, a spacing — and the drawing that follows is constrained by that grid absolutely. The grid is not a guide. It is the specification.
The rule. Every geometric value in this system is expressed as a function of the pitch P and the loop radius r = P/2. A value that cannot be written that way does not enter the system.
Why it holds. Most design systems have a spacing scale and a radius scale that were chosen independently and then reconciled by eye. Here they share a generator, which is why a rounded corner and a padding step are never nearly harmonious — they are the same arithmetic.
Ruled out
- Magic numbers.
padding: 13pxis a review block, not a nit. - Independent scales. No separate radius ramp chosen for looks.
- Per-component exceptions. A component that needs a bespoke value is a component whose spec is wrong.
- Optical tweaks in product code. Corrections belong in the primitive layer where they can be audited, not scattered across features.
Worked example — a button
Nothing here was picked. Each line is read off the lattice.
- Height5.5 P → 44px
- Horizontal padding3 P → 24px
- Gap to icon1 P → 8px
- Corner radius2 r → 8px
- Focus ringkambi-2 → 2px
- Ring offsetkambi-2 → 2px
02 · Continuity over interruption.
sikku — the tangle. In the looped form, a kolam is drawn as one line that never lifts from the floor and closes on itself.
The practice. The defining constraint of a kolam is that the line is continuous. It weaves through the whole grid and returns to where it began. A break is not a variation; it is a failure of the form.
The rule. Interfaces preserve a traversable path. Every state a user can reach has a route back that does not require undoing work or reloading. Transitions move things along that path rather than replacing one screen with another.
Why it holds. This is the principle that does the most product work. It converts a stylistic idea into a set of interaction requirements that a team can actually argue about in a design review.
Ruled out
- Dead-end modals. Any overlay that can only be left by completing or cancelling into an unknown state.
- Destructive actions without a return. Deletion offers undo for the length of a toast, or it offers a confirmation. Never neither.
- Teleporting state. An element that appears in a new location without a transition connecting the two.
- Lost work on navigation. Leaving a form preserves its contents or warns before discarding them.
- Orphan pages. Every route is reachable from navigation, not only from a link someone was sent.
03 · Symmetry is structure; asymmetry is signal.
samam — evenness. Most kolams are built on a symmetry group, and the eye reads any break in it immediately.
The practice. Kolams are typically four-fold symmetric — invariant under quarter-turn rotation and both mirrors. That regularity is what makes an intentional deviation legible at a glance, from across a courtyard.
The rule. Layouts default to lattice balance: even gutters, mirrored margins, aligned optical centres. Breaking symmetry is a deliberate act reserved for priority — one primary action per view, one emphasised card per grid, one highlighted row per table.
Why it holds. Emphasis is a currency and most interfaces are inflationary. Making symmetry the default and asymmetry the exception puts a hard budget on emphasis: spend it more than once per view and it stops meaning anything.
Ruled out
- Two primary buttons in one decision.
- Competing emphasis — a badge, a highlight, and a callout on the same row.
- Arbitrary asymmetric layout adopted for visual interest with no hierarchy behind it.
- Uneven gutters as a styling choice rather than a response to content.
The three symmetry groups
The generator exposes the same vocabulary the layout rules use, so a team can talk about pattern and page in one language.
d4 — both mirrors and the diagonal. Full balance. The default for layout.
d2 — horizontal and vertical mirrors only. Directional without being lopsided.
free — no constraint. Reserve it. This is what emphasis costs.
04 · Made to be erased.
kāllai — morning. The kolam is swept away and drawn again the next day. Permanence was never the point.
The practice. A kolam lasts a day. It is walked over, rained on, and swept up, and the next morning a different one is drawn in the same place. The value is in the drawing, not in the artefact.
The rule. Components are versioned to be replaced. Deprecation is a normal, scheduled event with a migration path — not an admission of failure and not a reason to keep a parallel legacy directory alive indefinitely.
Why it holds. The most common way a design system dies is accretion: nothing is ever removed, so every component has three variants, and eventually nobody can tell which one is current. A system that plans its own sweeping stays legible.
Ruled out
- Permanent legacy directories. A deprecated component gets one minor version, then goes.
- Silent removal. Every sweep ships with a codemod and a migration note.
- Undocumented history. Removed components stay in the ledger with the reasoning that removed them.
- Hand-drawn pattern assets. They cannot be re-derived when the pitch changes, so they cannot be swept and redrawn.
The full lifecycle — timing, notice periods, and the annual breaking release — is specified in Governance → Deprecation.
When principles conflict
Principles that never collide are decoration. These do collide, so the precedence is written down rather than relitigated in every review.
| Tension | Wins | Because |
|---|---|---|
| Derivation vs. target size | target size | A 6px pitch derives a 33px control. Accessibility outranks arithmetic; the floor is absolute and documented as the system's one legitimate override. |
| Continuity vs. safety | safety | A genuinely irreversible action may interrupt. Continuity requires a return path where one can exist — not the removal of confirmation where it cannot. |
| Symmetry vs. hierarchy | hierarchy | Symmetry is the default, not the goal. When content has a real priority order, breaking symmetry is the correct move — that is what the exception is for. |
| Erasure vs. stability | stability, for one version | Sweeping is scheduled, never immediate. Consumers get a full minor version with warnings and a codemod before removal. |
| Expression vs. legibility | legibility | Pattern density is capped at 10% of viewport regardless of how good it looks. The rule exists precisely for the cases where it looks good. |
Testing compliance
Each principle has a check that can be run rather than argued.
Automated
- Derivation. Lint CSS for length literals outside
tokens.css. Anypx,remoremvalue in component code fails, except values inside a documented accessibility floor. - Continuity (pattern). Assert every generated kolam has zero path endpoints used other than exactly twice.
- Symmetry. Assert the D4 tile grid is invariant under transpose and both mirrors.
- Contrast. Recompute every published contrast figure from the palette in CI; fail the build if a claim drifts from the measurement.
Manual review
- Continuity (product). For each new view: can the user get back without losing work? Name the route.
- Emphasis budget. Count the emphasised elements per view. More than one requires justification in the PR.
- Pattern density. Screenshot at the smallest supported viewport and estimate coverage. Over 10% is a change request.
- Sweep readiness. Does this component have a removal story, or is it being added forever by default?