• Project length: July - October 2025
  
• My role: Lead Design / Dev
  
• Skills: Design Systems, Visual Design, UX Design
  
• Tools: Figma, React, TypeScript, Storybook

Background

Mesh is a design system built for kyu Pulse, a unified network of creative and tech firms including Sid Lee, Kepler, BIMM, and Digital Kitchen. The network blends purpose-driven creativity with data and AI-enabled technology, designed to deliver breakthrough client impact.

In mid-2025, we set out to build the Hub, kyu Pulse's first AI-powered marketing platform. Our goal was to provide tools to solve core marketing workflows, serving analysts, strategists, and executives across the network.

We needed to ship fast on a tight timeline. From a user interface perspective, this meant every component needed to ship production-ready, while staying flexible enough to adapt as we identified which marketing workflows would deliver the most value.

The Foundation

Thankfully, we weren't starting from zero. kyu Pulse had brand guidelines to work with: a nature-inspired color palette, a type system using DM Sans and DM Mono, and a graphic language built on flowing metashapes and gridded circles.

Our next step then, was to build out a design system to translate that brand into interactive components that we could use to build the Hub.

Something that stood out to us from the brand and the very concept of kyu pulse was that we were essentially bringing together distinct firms into a unified network. This notion of independent elements forming a stronger whole through connection led to our design system's name, "Mesh". It connects visually to the metashapes that flow and combine, while echoing the grid system that provides structure underneath.

Ultimately, Mesh embodies the brand's central philosophy: systems creating beauty through connection. Each component is a node. Together, they form something more capable than any single element.

Technical Choices

While we'd avoided Tailwind for past Kepler-specific projects in favor of CSS Modules (particularly given we were working with Mantine components, more on that here), for Mesh, we decided to make an exception for ultimately pragmatic reasons.

Given the rise of LLM-assisted coding, and for whatever reason, LLMs being exceptionally good with Tailwind, we figured it made sense to lean into using AI for boilerplate code rather than fight it. Built on Radix UI primitives, shadcn/ui gave us accessible components we could own completely.

While there are potential downsides to this given the recent risk of Radix maybe being left a little more unmaintained than most people would like, the shadcn/ui approach allows us to replace the underlying primitive from other options, and ultimately, Radix remains a fairly battle-tested library.

In terms of styling and themes, semantic color tokens solved future theming needs before they became problems. Our components reference semantic tokens like primary and accent, instead of hardcoded values like lake-600. When we need sub-brand themes for individual network companies, we swap color schemes without touching component code.

/* Theme Colors */
--lake-600: #51a090;
--carrot-600: #f74564;
--lichen-600: #bedb46;
 
/* Semantic Tokens */
--primary: var(--lake-600);
--accent: var(--lichen-600);
--destructive: var(--carrot-800);

Components never reference lake-600 directly. They use semantic tokens:

<Button className="bg-primary hover:bg-primary-hover text-primary-foreground">
  Submit
</Button>

This indirection means theming for a specific kyu Pulse company, like BIMM, requires changing a single line, swapping lake-x for BIMM's orange in the semantic token assignment, and not hunting through component code to make line-by-line replacements.

Components

Mesh includes the full range of interface building blocks: buttons, inputs, cards, badges, selects, checkboxes, tooltips, popovers, and dialogs. Most inherit directly from shadcn/ui with minimal customization (just enough to apply our semantic tokens and animation constants!)

There's one component and pattern that I figure could use a little special attention:

This here is the artifact card. It displays task outputs with distinct states within a chat window. The "working" state uses a subtle pulsing animation on the gradient background, giving visual feedback without being distracting.

And this, of course, is what our chat interface looks like. It handles message threading with staggered entrance animations, helping make conversations feel naturally paced rather than instantaneous.

For motion, we set up deliberate constraints to work with. We built shared constants with three durations (instant, fast, normal) and two easing curves (in-out, out) for all of our framer-motion based animations. Every animation references these values, allowing us to create and use a consistent motion language.

Documentation

As with any good design system, Storybook serves as Mesh's single source of truth. Every component has a dedicated page with interactive examples, prop controls, and code snippets. Engineers can test variants, toggle states, and see exactly how components behave before integrating them.

Storybook also doubles as our component editor. With AI assistance, even non-technical team members can style and refine components directly in the browser.

Conclusion

Mesh has, so far, delivered on its goal: to ship fast without creating debt. Components have stayed consistent, and motion/animations feel intentional. And if or when we inevitably need to scale to building out specific interfaces for sub-brands or add new features to existing interfaces, we can extend what we have, instead of rebuilding a parallel system each time.