Gorka Molero

Creative technologist / AI engineer
Remote, location-independent Email GitHub EngineeringAgentsDesign SystemsCreative WorkBefore AIMusic

2012–2026 · Components, tokens and themes

Design systems

Shared components and tokens I've built, for product teams and for my own products.

Chessable Edge

Frontend engineer, Chessable · 2020–2022 · React, Clutch, npm, Storybook

Chessable Edge was Chessable's design system and UI component library. We built it in React with Clutch, a visual builder for React, and published it to npm as @chessable/edge, with its core split into a package of its own. Three teams were using it in production.

The video is the guide for developers I made for the teams adopting it. It covers what Edge is, how Clutch works, how to get started, and where the system was going next: a shared process, a public roadmap and documentation generated with Storybook.

Chessable Edge, the guide for developers I made for the teams adopting it.

openroadie

Roadie · 2026 · React, Tailwind, Storybook

openroadie's interface runs on @roadiehq/ui, a design system I co-led. It has about sixty components documented in Storybook, from forms, tables and drawers to the AI elements for agent conversations: messages, reasoning, tool calls and chain of thought. Its tokens cover color for light and dark themes, type, sizing, motion and z-index, and the code editor has a token set of its own.

A 45-second tour of the design system in Storybook, from the basic components to the AI elements, with the switch from light to dark.
Chain of thought component from @roadiehq/ui.
Chain of thought, dark
Tool call component from @roadiehq/ui.
Tool call, with its input and output
Step flow component from @roadiehq/ui.
Step flow
Conversation component from @roadiehq/ui.
Conversation
Dialog component from @roadiehq/ui.
Dialog
Card component from @roadiehq/ui.
Card
Combobox component from @roadiehq/ui.
Combobox
Table component from @roadiehq/ui.
Table
Dropdown menu component from @roadiehq/ui.
Dropdown menu
Chain of thought component from @roadiehq/ui.
Chain of thought
1 / 10

The design system on GitHub

Koda

Own project · 2026 · React, Radix, Tailwind, Storybook

Koda's interface runs on @koda/ui, the design system I built for it. It has forty components documented in Storybook, from buttons, dialogs and file trees to the parts of an agent session: tool calls, approval and question cards, the composer and the badge that shows who shared a session. Its tokens cover color for four themes, type, spacing, radius, motion and z-index, and a lint rule rejects hardcoded colors and sizes anywhere in the app. Every story also runs as a test in all four themes, with accessibility checks.

A tour of the design system in Storybook, from the color tokens and brand pieces to the agent patterns, the four themes and the two app screens.
A collaborator's view of a shared Koda workspace, built from @koda/ui.
A collaborator's view of a shared workspace
The host's Koda workspace in the Light theme.
The host's workspace, in the Light theme
Approval card component from @koda/ui.
Approval card, for a collaborator with control
Question card component from @koda/ui.
Question card, in the Dim theme
Tool call component from @koda/ui.
Tool call, with its result
Composer component from @koda/ui.
Composer, in someone else's shared session
Terminal frame component from @koda/ui.
Terminal, as a read-only mirror
Color tokens from @koda/ui.
Color tokens
The KODA logo from @koda/ui.
The KODA mark
1 / 9

The Storybook The design system on GitHub

This portfolio

Own project · 2026 · Astro, Tailwind CSS, Terrazzo, Storybook

The site you're reading runs on its own design system. Its colours, sizes, spacing and timings live in 193 design tokens in the W3C format, and Terrazzo builds them into CSS variables and the Tailwind theme. Every page is composed from 23 Astro components, each documented in Storybook with its states, and a DESIGN.md sets out the rules for people and for AI agents.

The masthead component in Storybook, with the portfolios menu open.
The masthead in Storybook, with the portfolios menu open
The token catalogue in Storybook, read from the token files.
The token catalogue, read from the token files
The text link component in Storybook.
The text link, the site's one kind of button
1 / 3

The Storybook The source on GitHub

Earlier

  • BBVA CellsUI engineer on Cells, a hybrid component library and design system for BBVA's mobile apps, built on Polymer and web components and shown at Google I/O 2016. 2015–2016.
  • William HillA hybrid component library and design system for the sportsbook redesign. I prototyped and built parts of it with the in-house designers. 2012–2014.

Engineering portfolio Before AI