From Brand Book
to Product System

The Constraint

I started with a fixed 3:4 portrait ratio. It worked for jewellery — Kundan necklaces and chandbali earrings looked right in a tall frame.

Then Furniture pushed back. A carved walnut bookstand cropped at 3:4 lost half the piece. Instead of building category-specific cards, I made the ratio configurable.

The Solution — One Component, Four Ratios

The card has no knowledge of whether it is displaying a necklace or a bookstand.

Category identity lives in the photography and the editorial choice of ratio — not in the component.

Jewellery, Apparel

Why Not a Rectangle?

Hermès, Cartier, and Tiffany use rectangles because their identity lives in colour, material, or one iconic object. Swadesh is different — a marketplace spanning six categories, thousands of artisans, products from Rs 1,690 to Rs 11,99,990. There is no single iconic product. What unifies everything is India itself and the tradition behind its making.

The brand book's "Shapes of India" uses Indian architecture as the unifying visual principle — arches, jharokha windows, scalloped doorways. These forms are pan-Indian. They belong to no single region, religion, or dynasty. For products, rectangles only. For buttons, a subtle touch of India.

The Patta Reference

The wing endpoints reference the patta — a form from Indian manuscript and textile tradition. In palm-leaf manuscripts, the leaves curl inward at binding points. Over centuries, this natural curl was stylised into a deliberate visual signature across Banarasi brocades, Kanchipuram silks, and Phulkari embroidery.

The patta references craft itself — manuscripts (knowledge, tradition) and textiles (what Swadesh actually sells). A lotus would reference religion. A peacock would reference the state. The patta references the act of making.

What Was Rejected

Why Three Gradients?

The brand book says gold honours the craft. On real gold-embroidered work, light catches each surface at a different angle. A single gradient looks like cheap digital decoration. Three independent conic gradients simulate how light rotates across compound metalwork, so the gold reads as material rather than a Photoshop layer effect.

Why the Silence?

The brand book's own design pillar: "We allow the essence of the craft to take centre stage. Indian beauty is used only as highlights." The tertiary tier is that principle implemented at the component level. Decorative elements lose power through repetition, so the brand shape appears only at moments of commitment — not on every link.

Every interaction specified

I built this table because the same argument happened three sprints in a row. A developer would implement an animation, I would say it felt too slow, they would ask for a number, and I would guess. The table was the answer to the question every engineer eventually asks: what exact value do you want?

Figma Dev Mode has no fields for entry easing, exit easing, entry direction, exit direction, duration, or animation sequencing. This table does.

Dev impact: Animation review rounds dropped from three to one. Instead of "this feels wrong," the feedback became "this doesn't match row 14."

Motion tokenised

Figma lets you define colour variables and spacing variables. It has zero support for motion variables. Without tokens, each engineer picks their own timing — 200ms ease-in-out on the accordion, 400ms linear on the dropdown, 560ms ease-out on the checkbox. The platform starts feeling incoherent.

Four easing curves, each named by what it's for. A duration scale from 100ms to 1000ms. I treated motion the same way we treated colour and spacing: as a shared set of named values.

Dev impact: Engineers reference a token name in code instead of reverse-engineering values from a prototype video. And if a timing needs to change, updating the token updates every animation that uses it.

Sequences choreographed

Figma Dev Mode shows Frame A and Frame B. It doesn't show the journey between them. For the PDP scroll, there are six distinct states as the user scrolls — the states between start and finish mattered just as much as the two endpoints.

For someone configuring a bespoke piece of jewellery, how each form step transitions into the next changes whether the experience feels like a checkout or a consultation.

Dev impact: The sequences gave engineering enough detail to build the scroll behaviour and multi-step flows without needing another walkthrough.

Components specified

Beyond motion, I also documented component structure: how each component adapts across breakpoints, which states it needs, and how variants relate to each other. Writing it down once was faster than explaining it repeatedly.

Figma Dev Mode shows individual element properties. It doesn't show how a component adapts across breakpoints, which states are required, or how variants compose.

Dev impact: Engineering built the responsive navigation from this document. No follow-up questions about breakpoint behaviour.

The system

A Slack channel, a heuristic, and a removal date.

I set up a dedicated Slack channel where anyone — designer or engineer — could raise a request for a missing component. We reviewed every request against one heuristic: is this a one-off need or a repeating pattern? If only one screen needed it, it stayed local. If it kept appearing across category surfaces, it earned a place in the library.

When a component was replaced, it got a removal date. The original category header broke at tablet widths, so I replaced it with a configurable full-width text component. Six screens migrated in one sprint, and the old component came out of the library two weeks later.

That discipline is how the library stayed at 35 component sets instead of ballooning past a hundred.

The reality

Building took three months. Adoption took four more.

The first four teams adopted within weeks. They saw the library, tried it, and stopped rebuilding. The last two teams were different. They had working components. Their patterns were established. Switching meant rework with no visible user benefit.

I spent four months in pairing sessions — opening their Figma files, sitting with them, migrating screens one at a time. It would have been easier to mandate adoption from a distance, but that doesn't actually work.

If I did this again, I would start adoption from week one instead of waiting until the library felt "complete." A system that's 70% done but people are actually using is more valuable than one that's polished but sitting untouched in Figma.

Implemented

The architecture is already agent-ready.

Semantic token naming (Primary/Saffron, not red-500). Category-agnostic components that carry no business domain knowledge. The invariant/flexible separation — 8 things an agent generates from, 5 things a human controls. None of this was designed with AI in mind, but the structure turns out to be exactly what an agent would need to generate on-brand UI.

Structured

Context documents for agent consumption.

Design.md and Agents.md — structured files describing brand rules, token values, and component constraints. An AI agent reading these files gets enough context to generate brand-compliant UI without needing to dig through source code.

Primary/Saffron Base: #C45434
Primary/Gold: #EBB872
Surface/sand: #F9F6EF — never pure white
Neutral/100: #1E1E1E

# Rules
One product card for all categories.
Product images are the visual focus. UI chrome stays minimal.

How an agent uses this

An AI coding agent reads Design.md before generating any component. The primary colour is saffron, not generic red. Surfaces use sand, never white. One product card for all categories. The agent applies these constraints directly — no design context required.

The next step: DTCG-compliant token export and an MCP server that lets agents query the system as tools, not just read a file.