The most brutalist and efficient library by Sidebay Studio

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

A Webflow library infused with the brutalist way.

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Launch your portfolio, agency, startup faster than ever

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Just drag, drop and make your first MRR faster

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Building the design system nobody asked for.

The first internal product designer at a crypto gaming startup. No design foundation, no component library, just a live product moving fast. I built the system from scratch. Color tokens shipped to codebase, a custom Figma plugin, and full handoff to the next designer.

0->1 Design Systems

Figma Plugin Dev

Crypto/Gaming

AI-Assisted Workflow

Component Architecture

TIMELINE

August 2025 - Present

TEAM

Engineers
Me as designer

TOOLS

Figma
Claude

THE SITUATION

I walked into a product that five people had clearly built five different ways.

the opportunity

The timing worked in my favor. The team was already thinking about rebuilding parts of the site, so instead of pitching a big proposal, I started small. I focused on what was already breaking, fixed inconsistencies, and shipped improvements that developers could immediately use. Once those changes started saving time, it became easier to keep going.

THE PROCESS

01 Audited everything first

I started by auditing the entire product. I screenshotted every page and catalogued what existed, which made the problems very obvious. There were over a dozen greys with no system, multiple button styles competing on the same screen, and no clear hierarchy between primary and secondary actions. Icons came from different libraries, and nothing felt cohesive.

Auditing site, games and noting inconsistencies

I wasn’t asked to build a design system, but it quickly became clear that without one, the team would keep rebuilding the same things over and over. Every new feature started from zero. The challenge wasn’t just designing the system, it was proving that it was worth the time in a fast-moving startup.

02 Building the foundation layer

From there, I built the foundation layer. I defined a semantic color system, text hierarchy, spacing, and surface scale that actually worked in a dark gaming environment. Then I worked directly with engineering to map everything to CSS variables so the system wasn’t just in Figma, it was in the codebase.

Color token system alongside CSS variable implementation

03 Component variables & states

Once the foundations were in place, I started building components, but always in the context of real product problems. Instead of creating a library in isolation, each component came from something the product needed. Missing filters, inconsistent navigation, unclear game interfaces. Every component had to support all its states and edge cases before it made it into the system.

Input box component state coverage

After core components, I tackled navigation. Users couldn’t easily find content, so I I introduced tabs and filters as reusable patterns to structure navigation across the product.

Tabs and filters with reusable variants and states across pages

04 Scaling the system with AI and custom tooling

This wasn’t a dedicated project. I was building the system alongside product work. To move faster, I integrated AI into my workflow. I used Claude to audit token naming, identify gaps, and surface inconsistencies across components. I also used Cursor to scan the codebase for hardcoded values, helping align the system with what was already shipped.

For complex component variants, I built a custom Figma plugin to automate generation. Instead of manually creating combinations, the plugin handled structure, naming, and layout. This saved weeks of work.

components deep dive

Some components needed more than consistency. They needed a rethink.

the feedback system

Some parts of the system needed more than consistency, they needed a rethink. The feedback system was one of them. Wins, errors, and warnings all looked the same, which created unnecessary anxiety in a product where users are dealing with real money.

I audited every existing feedback state and rebuilt the system with clear types, behaviors, and timing so users could understand what was happening at a glance.

Feedback system before

After - feedback types with variants, timing, sentiment and real copy

game panel deepdive

The game panel was another major issue. It’s the most-used UI in the product, but every game had built it differently. I mapped patterns across games and found fundamentally different needs:

Multiplayer games needed speed and minimal UI
Table games needed structure and clarity

I standardized both into shared components that worked across all game types.

Before: Game panel audit and issues identified

Game panels after: One-shared system

beyond the components

The visual language needed fixing too.

Game thumbnails came from everywhere: agencies, AI-generated assets, freelancers. There was no cohesive style. I rebuilt every thumbnail into a unified system, rewrote brand tone and copy, and introduced consistent interaction patterns like hover states and card flips.

Consistency is how everything feels together.

game thumbnail redesign

Illustrated game thumbnails in a coheesive style and rewrote the brand copy and tone across the product.

adding interactions to components

Prototyped hover states and micro-interactions

Small inconsistencies can compound into bigger UX problems, so I created a new icon library.

Before, the small details like icons added noise to the product. Different sizes, stroke weights, and styles made the UI feel messy. I consolidated everything into a single system with clear rules so anyone on the team could use it consistently.

Icon library - grid rules, keyline shapes

FINAL THOUGHTS

What started as cleanup became a system the team could scale with.

The system grew into 120+ components with full state coverage and is now used across multiple products. Designers and engineers can work more independently, and features that used to take weeks now ship in days. I also onboarded a second designer into the system, making sure it was something they could actually understand and build on. Now design work that used to take months takes weeks. Full game interfaces that required weeks of back-and-forth can be turned around in days.

I onboarded a second designer into the system, ensuring it was understandable, usable, and maintainable. What used to take months now takes weeks, and complex interfaces can be built in days.

This project was as much about product thinking as design. Building the system solo meant constantly deciding what mattered most, what would unblock the team, and where to focus for maximum impact. It also forced me to deeply understand components (because you don’t fully understand one until you’ve designed it across every edge case).

Next up: Poker →