Roha Shop — UI Design in Figma.

01 — Context

Roha sells a small, deliberate catalogue — template kits, icon sets, Notion systems. The shop needed an interface that matched the studio’s own voice: a quiet kind of warm. That meant resisting the usual e-commerce reflexes — no urgency banners, no carousel, no twelve-product grid — and designing something closer to a well-kept shelf than a marketplace.

This was an internal project, which made it both easier and harder: no client to convince, but also no one else to blame for an unclear decision.

02 — Approach

Before touching a single screen, we built the foundation in Figma as proper styles and variables, drawn straight from the Roha brand guidelines:

• Color as semantic tokens — surface/paper, surface/cream, accent/terracotta, ink — so a theme change is one variable, not a hundred manual edits.
• Type as a fixed scale: Bricolage Grotesque for display, Geist for everything readable, Geist Mono for the small metadata.
• Components with variants — product card, price tag, buy button, status pill — built once and reused.

“A two-person studio can’t afford a design file that only its author can navigate.”

03 — Execution

The shop is intentionally small: a storefront (the shelf), a product detail page, and the supporting states — empty, sold-out, coming-soon.

The storefront leads with breathing room. Products sit on cream cards against paper, one terracotta accent per card and no more. The product detail page does the persuading: what’s included, who it’s for, an honest scope of what the buyer is getting — written plainly, because Roha’s audience of founders and indie designers can smell filler.

Every interactive state was prototyped in Figma — hover, press, sold-out — so the build phase is a translation job, not a guessing game.

04 — Results

The result is a Figma file that does double duty: it’s the source of truth for the live shop build, and it’s a reference kit for future Roha work. The components, tokens, and naming conventions established here are now the starting point for the next project rather than something reinvented each time.

For a studio capped at two parallel projects by design, that reuse isn’t a nice-to-have — it’s how the math works.