CASE STUDY

CASE STUDY

Insider One Design System

Insider One Design System

Insider One Design System

Building a unicorn's creative production infrastructure behind a global rebrand

After Insider One's company-wide rebrand, I designed, built and led the marketing design system of the new brand - one that let a small design team keep control from the core and maintain creative production across 30+ countries, by putting the tools in non-designers' hands.

"Building our own Canva, inside our Figma."

"Building our own Canva, inside our Figma."

"Building our own Canva, inside our Figma."

That's how I sold the idea to our CMO.


The purpose was never to create a designer-centric design system, or to improve the brand guidelines as usual. The main purpose was enabling non-designer members of the marketing team to create on-brand, high quality, consistent design assets on a daily basis, superfast.


Not another style guide. Not a set of components that lives in legacy files for eternity. I used Figma's nested components to let our non-designer friends customize and localize their repetitive design assets without ever touching the artboard.


It's actually an internal product: brand rules, guides, variables, adaptive components, responsive web modules, taxonomized visual libraries, non-designer friendly event packs, easy-to-localize social media templates, fully automated case study processes, guardrails and markdown files for LLMs, and it goes on.


But the awareness hit once I started clicking pixels: building a marketing design system is way more complex than building a design system for a product lifecycle.


Product design and development are disciplines that lean on numbers, rule sets and guardrails. Marketing design has fewer rules and limitations by nature.


So the question was: how can I enable non-designers to create design assets without breaking anything, and keep our design team as creative as possible without burying them in rules?


Welcome to the story of one of the biggest challenges of my career. It was tough, and I genuinely enjoyed every second of it.

At a glance

AT A GLANCE

Scope and Scale

Scope and Scale

Scope and Scale

CLIENT

CLIENT

Insider One

Insider One

TIMELINE

TIMELINE

Dec 2025 - Jun 2026

Dec 2025 - Jun 2026

ROLE

ROLE

Senior Digital Designer, Creative, Web and Design Systems

Senior Digital Designer, Creative, Web and Design Systems

OWNERSHIP

OWNERSHIP

System architecture, foundations and logic, hands-on component creation, super component structure, governance, documentation, onboarding and adoption

System architecture, foundations and logic, hands-on component creation, super component structure, governance, documentation, onboarding and adoption

USERS

USERS

In-house design team, in-house video team, creative marketers, regional marketers, external creatives, other departments' in-house creative teams

In-house design team, in-house video team, creative marketers, regional marketers, external creatives, other departments' in-house creative teams

0
0
0
0
0
0

THE CHALLENGE

THE CHALLENGE

A New Way of Working

A New Way of Working

A New Way of Working

Systems are nothing if people don't use them.

The Insider One rebrand put a new visual identity and narrative across the website, campaigns, product launches, analyst launches, PR launches, events, social media assets, decks and sales materials. That list goes on forever.


The existing design infrastructure leaned on designers rebuilding similar assets from scratch, or copying lookalike assets out of messy Figma files. Every request re-opened the same decisions and recreated the same back and forth the team had already been through the week before.


The challenge was never producing more assets. We created thousands of them. The challenge was building a structured way of producing creative work that could scale output while keeping consistency and quality, without scaling repetition and dependency.


Long story short, the main principle was:

"Structure stays protected. Customization stays flexible."

"Structure stays protected. Customization stays flexible."

"Structure stays protected. Customization stays flexible."

And we had a lot to do. Look at the image below to understand how disconnected the brand was: none of these assets look like they come from the same brand, even though they do.

APPROACH

APPROACH

System as an Internal Product

System as an Internal Product

System as an Internal Product

Component based marketing design - controls everything from the core.

I approached this as a product and service design problem, not as an LLM-generated documentation hell or an unnecessarily improved brand guideline. The approach was simple: design the system as an internal product. The implementation was not that simple.


Senior designers needed depth, so they could extend the system. That is how a design system stays alive and grows organically inside a design team's daily life. Mid-level designers needed speed and dependable, approved defaults. Event and motion designers needed assets that connect to the new brand narrative and travel across formats. Regional marketers needed a safe way to adapt approved work without entering the underlying structure.


And the end level boss was AI. How could we let the team create on-brand, consistent, high quality assets using generative and agentic AI?


That moved the central question from "How do we make every asset reusable?" to "Which decisions should the user make, and which should the system make for them?"


To be honest, that specific challenge was tailor-made for me. I used my product design and business development experience as a lens for understanding users and their experience, and because I was building the thing hands-on, it turned into a design exercise that brings many disciplines under a single hat.


Here are the users:

SYSTEM ARCHITECTURE

SYSTEM ARCHITECTURE

4 Pillars, 8 Libraries

4 Pillars, 8 Libraries

4 Pillars, 8 Libraries

All connected - including Claude Design System.

Four core layers, plus social, event and production libraries extending the same logic and connected to the source files. 8 connected organization libraries in total, plus a native Claude design system connected through Figma MCP.


Style Guide - the basics. Colors, typography, do's and don'ts. The document people read.

Component Library - the foundation. Variables, tokens, components, gradients, layout rules, breakpoints. All the math happens here.

Module Library - the fast production layer for web. Built from components, connected through nested instances, customizable with variants, properties, booleans and slots. 80+ drag and drop web modules that align perfectly with the development team's web infrastructure.

Visual Library - the catalog. 700+ approved product visuals and 300+ commercial visuals. Clean taxonomy, easy to find, easy to customize. Also a comprehensive archive for teaching AI what Insider One looks like.

Super System - my masterpiece. The umbrella library that carries everything across the whole design system. It lets the team build a web page in three minutes, then generate the tablet and mobile breakpoints in five seconds.

Event Pack Library - Insider One hosts or joins 60+ events per quarter. This is the go-to template library for non-designers, who can change anything the core allows.

Social Media Library - 30+ customizable on-brand templates for PR announcements, special days, partnerships, case studies and more.

Claude AI Design System - the whole design system, duplicated from Figma into Claude. First through Claude Design's native design system feature, then through the Figma MCP connector, so Claude could generate on-brand output.


Here is a real screenshot of the Figma organization file, taken before my adventure with Insider One came to an end.

COMPONENT LIBRARY LOGIC

COMPONENT LIBRARY LOGIC

Components as the foundation

Components as the foundation

Components as the foundation

One library to rule them all.

The value of the system was never the number of components, even though I built 2,000+ of them. The value is how much decision-making each component can carry.


Rather than exposing every layer, I designed the controls around the choices users actually make. A module offers simple decisions - light or dark, desktop or mobile, two cards or three, product visual or case study - while layout, grids, hierarchy and brand narrative stay underneath.


Nested components let complex structures behave like simple tools. Fewer detached components, less accidental inconsistency, and advanced layouts that stay usable at very different levels of Figma expertise.

module Lıbrary logıc

module Lıbrary logıc

Modular Web Production, Superfast

Modular Web Production, Superfast

Modular Web Production, Superfast

Decreased the Time to Publish up to 10x.

During the rebrand the team shipped 50+ web pages in 5 weeks. In that madness, treating every page as a separate design exercise has a visible cost.


And the purpose was always the same from the beginning: cut our TTP, time to publish, as much as possible.


The Module Library captured the recurring structures, reorganized them, and turned them into responsive building blocks. Drag, drop, assemble, configure, hand over, publish.

Vısual LIBRARY logıc

Vısual LIBRARY logıc

Visual Library as a Smart Catalog

Visual Library as a Smart Catalog

Visual Library as a Smart Catalog

Taxonomy at its finest.

One of the biggest challenges was handling the 1,000+ visuals we created with my dear Zeynep Kalafatçılar during the rebrand, and making that huge library as structured as possible by finding the rules that repeated.


Keeping all of that in folders would not have solved the production problem. The assets had to be available at the moment of designing.

So they were organized into component sets and connected to modules through the Super Visual component, with a clean taxonomy.


Users switch between approved visuals from the properties panel. No searching across files, no copying frames, no rebuilding at all.

Visual governance stopped being a document people had to remember and became behavior inside the workflow.

SUPER COMPONENT LOGIC

SUPER COMPONENT LOGIC

Every source asset, connected

Every source asset, connected

Every source asset, connected

Swiss Army Knife, built in Figma.

I am not the one calling it Super. If you nest a complex component inside another complex component and expose the child's properties, you get a super component.


I fell in love the moment I discovered the method, and I went way too far with it.


Every source design asset at Insider One, connected. Anyone can reach any source asset through a single super component.

That is when things start to get lightning fast. Faster than AI.

AI DESIGN SYSTEM

AI DESIGN SYSTEM

Figma x Claude

Figma x Claude

Figma x Claude

Including MCP connector and native design system feature.

In my last quarter at Insider One, Claude released a native design system feature inside Claude Design.

We carried everything from Figma to Claude and started training our organization's Claude. Supported by Figma MCP, things started to change: non-designer colleagues began producing five times more assets than our design team. That is one of the rare moments I have been genuinely satisfied with my own work.


Today, Insider One's marketing design team, Pixels, produce most of their assets on top of the Figma and Claude design systems, as fast and as ambitious as they want to be.

GOVERNANCE AND ADOPTION

GOVERNANCE AND ADOPTION

A Part of Daily Workflows

A Part of Daily Workflows

A Part of Daily Workflows

In daily use by designers and non-designers.

Building and maintaining the libraries was half the project. Adoption was the other half.


A design system only works when the team adopts it daily and changes how they work around it, organically.


I ran more than 20 sessions, one-to-one and group training, to teach our design team and our non-designer colleagues how to spend less time on design and get better results at the same time.


The rollout was gradual on purpose. Guided use exposed missing components, unclear parts and unnecessary controls. The system improved through real production, organically, instead of being declared finished in isolation.

CONCLUSION

CONCLUSION

Global Creative Production Workflow

Global Creative Production Workflow

Global Creative Production Workflow

The legacy design infrastructure.

It started as a Figma cleanup and ended as the way a global marketing team works.


The design team moves without starting from zero. Non-designers ship on-brand work without asking anyone for permission. And the knowledge that used to live in two people's heads is now infrastructure a company in 30+ countries runs on.


And most importantly, everyone loved it.