back

Product Desgn & Sys / Industry Demo Brand Library

Industry Demo
Brand Library (IDBL)

A dynamic repository that complies comprehensive Studio industry guidlines—covering logos, buttons, UI elements, etc.—to facilitate effortless integration into project creative files, and provide consistency across all Studio deliverables.

42.5k components implemented, 60 teams worldwide, across 20+ industries, 2 Hubs, all as 1 Library.

Salesforce QStudio / Demo Studio
New York City ID# 0722-1224
Figma Library 2 years

Project Lead & Designer
Figma, Photoshop, Illustrator
Industry Brands
Brand Hubs
Published Library Components
Integrated Solution Delivery

Here, let me catch you up!

The Industry Demo Brand Library (IDBL) is a centralized Figma ecosystem that solves a decade-long problem of scattered, legacy brand assets across QStudio and Demo Studio. As the design lead, I built this single source of truth to curate, standardize, and deliver all components directly within designers' workflows, eliminating inconsistency and inefficiency.

Challenge

This challenge was compounded by a sheer scale of historical work. The studios had been generating brands since the early 2010s, with assets created by a revolving roster of designers. And this resulted in a deep well of legacy work—scattered across obsolete platforms and created with outdated standards. Designers were forced to act as digital archaeologists, spending excessive time just to find, verify, and manually adapt old assets for modern use, introducing risk and inconsistency into every project.

Breakdown

As the lead designer for the IDBL project, my mission was to design and build a dynamic, self-service repository directly inside Figma that would end the cycle of hunting and guesswork. This would free out more time for designers to focus on backlog or another project.

The solution was dissected into 5 parts, in which I’ll touch up loosely in this preview:

① Audit, consolidate, and modernize over a decade's worth of disparate brand assets into a single design source, and shelf historical assets in the department’s shared team folder in Google Drive for company-wide access.

② Establish consistent, and clear current standards for all brand components.

③ Facilitate effortless integration with Figma system along with how-to guides, do’s and don’ts, faq, etc.

④ Support users with supplements like Directory, Do and don’ts, Slack help channel, and hands on live enablement.

⑤ Designate a council that provides designers an opportunity to take on product leadership roles with quarterly maintainence and innovation.

Audit, unify, modernize—
Part I: Parallels

My process began with interviewing previous designers, documenting their old teams’ various brand files and drives, and reaching out to upper leadership for access and permissions. I had two designers on my project that helped with collborating this comprehensive audit, sifting through a decade's worth of accumulated assets. This includes sorting and reorganizing them through spreadsheets, and the current team’s google drive. About 2 quarters was spent just on huddling, identifying old assets, chasing down dead ends, and filtering viable and rennovation-feasible items.
This wasn't just about collection—it was an act of curation.

The strategy that ultimately won over the other options, was to let repetition teach familiarity. With 25 brands scattered across 17 industries, it was time to rehome the assets in clear and concise folders.

For example, in the AUTO industry is the brand Electra (example b). Inside consists of the shortcut to the older team folder of this specific assets from the original designer. Items in here—would include Sketch files, spreadsheets of prototyping links, past company events that used the logo, etc.

Example B

Folders for post-rebrand assets are maintained within the same space: Logo, Color Palette, UI Elements, Icons, Web Elements, Product Screens, and Photography all have various file types. So I created a room for all those brands assets to maintain it’s individual identity.

In the case of Electra, within the Logo folder, it has a Primary, Secondary, as well as Vertical Logos (example c). Those are split out into 3 separate folders that may house PNG, JPG, SVG, or even PDF file types for different uses outside of the primary user.

As a company-wide resource, this Drive was designed to make internal brand assets accessible to both Figma and non-Figma users. Due to it functioning as the company’s primary repository for internal files, it was included in this project in parallel with the consolidation of Figma design assets.

Example C

Audit, unify, modernize—
Part II: Core User

While the other designers continued on creating folders in Google Drive for all these veteran and rebranded assets we found, I took ownership of assessing, selecting, and thoughtfully modernizing core UI components and brand elements within Figma. This way it would ensure that the assets were not only historically accurate, but functionally relevant for current projects.

The goal is to create a system with a unified and consistent level of resources, and not missing a button component here, or missing a color variant there. I aimed to have all brands conform unanimously and stuctrually as assets, but remain individual as brands in their respective industries.

And now armed with this audit, I centered the solution on the “frustrated designer”, our primary users. Their pain point—wasting hours as "digital archaeologists" to track down and decipher outdated specs—became the core user story.

As the overall design departments continued to utilize Figma as the core design software, and the number of team designers on an uptick, it became clear that the key strategic decision would be to build the library natively within Figma, and to make it the authoritative home for every brand, past and present, eliminating the need to ever leave the design environment.
From this strategy, I designed a comprehensive, self-sustaining ecosystem within Figma, where the master file would level rationalization just as important as organization. This also establishes, single, updated standards (like 4, 8, 16, 24, etc. spacing) for logos, buttons, and UI elements, to finally resolve years of version discrepancies.

Designing the Brand Portals

example d

Designing the Brand Portals:
Filing & Scaling Needs

The first area I designed within the IDBL was the Brand Portals—a dedicated page for each brand that serves as its centralized headquarters, with each Figma page acting as a divider for the industries, and a icon for listing multiple brands in one industry (example d).

Designing where the naming conventions and structure sits, is about providing immediate context, establish accountability, and facilitate rapid discovery for every designer. It also becomes clear instructions for scaling up, if an industry chooses to expand into mutiple sub-brands (example f). Alongside expansion, there also a space for deprecated assets for archival needs (example e).

Example E: Area designated for archiving old brand layouts, pages, and housing global components and unused transferred variants.

Example F: Multiple brands within one industry.

Designing the Brand Portals:
Design Content

My design for each portal centered on two key components: Info Card and Brand Assets, with the former including 5 informational sections, and the latter with 4 design asset sections.

Info Card

① Sub 1: The What, When, What for

At the top, resides the most current officially approved logo. This immediately grounds the designer in the correct visual identity, making sure they’re on the right brand page, and preventing the use of outdated or incorrect marks from the start.

It is then followed when the brand was created and last updated, a concise brand summary explaining the industry vertical and primary use case, and a button that links to the demo website created with Salesforce cloud products. This gives designers the when and what for behind the assets, ensuring it’s applied to appropriate projects, and an template for users to spin up a customized version for demos.

② Sub 2: Ownership & Lineage

A dedicated contact section lists both the original brand creator and, crucially, the current product owner(s) for that brand. This establishes clear accountability, provides a point of contact for questions, and documents the brand's evolution.

Left (Sub 1): Links to Demo Site to spin up;
Right (Sub 2): Links to Slack Profile

③ Sub 3: Collective Narrative

Direct links to key brand elements—whether in Figma or Google Slides—are provided. These "holodecks" allow designers to instantly access the broader narrative, mockups, and strategic vision behind the assets, ensuring their work aligns with the brand's story.

④ Sub 4: Tags

Recognizing that different teams use different names for the same brand, I implemented a robust tagging system. Keywords, internal code names, and common aliases are all included. This enables designers to use Figma's 'Ctrl+F' shortcut to bypass navigation and jump directly to the exact brand page they need, dramatically speeding up the workflow.

Sub 4: Tags are separated to dark and light versions; dark is industry, and light are the possible key words that link to the industry.

⑤ Sub 5: Specific Usage Guidelines

Finally, there is a section provides targeted "Dos & Don'ts" or key application notes unique to this specific brand, if any. This moves beyond generic design system rules to offer guardrails tailored to the brand's particular expression and common pitfalls.
By synthesizing identity, context, ownership, narrative, search, and rules into a single, scannable section, this design ensures that every interaction with a brand begins with understanding and efficiency, setting the stage for correct and confident asset application.

Brand Assets

Next, moving onto the 4 subsections:

Logo, Verticals
Color, Typography
Iconography, Web Elements, UI Elements
Products, and Photography

How All Brands are Integrated

The brand asset section is designed with accessibility and scalability in mind. Content is organized into a clear header, a short explanatory overview, and a sub-header linking to specific Google Drive asset folders (example G). This enables non-designer stakeholders within design teams to independently retrieve assets, reducing friction and reliance on Figma expertise.

Let’s use Electra’s primary logo as an example.

Each section, is tagged with it’s own unique code, for instance ‘logo-primary’ on this picture (example H) refers to Electra page’s logo-primary. Within the logo-primary, there are two separate logos in which we can refer to them as ‘dark logo’ and ‘light logo’. Naming it this way, instead of ‘purple’ or ‘light purple’ is more efficient due to the subjectiveness of a designers’ perception of colors. Having it as dark and light, helps the user quickly define and differentiate, between the two at a glance.

Example G

Example H

Although it cannot be seen at face what was named, it can be traced back into Figma’s native system built to house these contents. Now that there are values ‘logo-primary-dark’ and ‘logo-primary-light’ assigned within the variants, more seasoned users can see that the assets not only placed on the page, but also integrated within.

Right hand menu: When dark and light values are assigned, they appear in a menu like this.

Below is a visual pathway for IDBL Asset Library as, Assets

Electra Page Logo-Primary Dark or Light. And because the logo SVGs are 2 separate components that are combined as variants, it will appear as a dropdown.

Left hand menu: All brands are integrated into Figma Asset Library for primary users to drag and drop assets from multiple pages (aka various brands across multiple industries) all in one go.

Secondary users can copy / paste right from the page; this group of users would require self or live enablement to understand how to use asset library, and export within Figma.

Primary users also retain the flexibility to copy and paste when working quickly, but the fully integrated brand system now allows them, to insert or drag and drop multiple assets across brands in one streamlined action. This removes the inefficiencies of page-by-page navigation, zooming, and manual copying often required by the secondary users. With additional training, secondary users can build Figma proficiency and adopt the same high-efficiency workflows.

Logo, Verticals

Within Logos and Verticals, assets are organized into primary logos, secondary logos, icons, and vertical logos—used to represent scaled extensions into smaller sub-industries. For example, if Electra were to launch an electric snowmobile-focused subsidiary, a dedicated vertical logo could be created as Electra Frost or Electra Polaris, and then integrated into IDBL → Electra Brand Page → Logos → Verticals → Electra Polaris.

Color and Typography

First in this section, is Color, which is divided into Primary, Secondary, Status, and Pairings Chart.

Below is how it looks for primary and secondary users.

Primary User pov with Figma’s integrated Styles Menu.

Secondary User pov for quick view and snagging (copy / paste) hex codes for demos outside of Figma.

At this stage, additional naming types appear that were not introduced earlier. Previously, I’ve noted that logo naming could remain intentionally simple—using Dark and Light—because the decision space is limited. All logos are already purple, so color does not need to be restated. That leaves the the next variable to consider for differentiation: contrasting dark or light. This removes unnecessary qualifiers, and reduces cognitive load to shortens the path to selecting the correct logo.

Color palette naming, however, introduces greater complexity and cannot be treated as a binary choice. Applying the same “dark” and “light” convention would result in conflicting labels, because multiple colors could fall into each category. Since Figma does not allow duplicate style names, the color system requires a more granular differentiation. As a result, the naming convention extends beyond “dark” or “light” to include specific identifiers such as Purple or Charcoal, to ensure clarity, uniqueness, and scalability within the design system.

Color and Typography: Accessibility

In the section, there is also a quick view of a pairings chart. This contrasts selected forground and background colors to help assess if it adheres to the Web Content Accessibility Guidelines (WCAG) standards. The ratio is ranged from 1:1 (no contrast, like white on white) to 21:1 (maximum contrast, black on white).

The ranking for this is divided into 3 levels: Level A (Basic), Level AA (Minimum Contrast), and Level AAA (Enhanced Contrast).

Level A

Level A addresses foundational accessibility needs—such as providing alternative text for images—but does not define specific color contrast requirements. If a color pairing fails to meet Level AA standards, it is considered a contrast failure from an accessibility standpoint.

Level AA

Level AA is the primary benchmark for accessibility compliance and is commonly referenced in legal and regulatory standards. It ensures sufficient readability for users with approximately 20/40 vision.

Level AAA

Level AAA represents the highest level of accessibility compliance, often regarded as the gold standard. It is intended to support users with more substantial visual impairments, including those with approximately 20/80 vision.

With a quick scan of the pairings chart, it can assists users in locating feasible combinations with brand colors.

To qualify for the lower (more permissive) contrast requirements applied to large text, typography must meet W3C size thresholds:

• 18pt (approximately 24px) or larger for regular-weight text, or

• 14pt (approximately 18.66px) or larger for bold text.
This distinction ensures that larger, more legible type is evaluated appropriately under accessibility guidelines.

Below are two examples of what is usable and what needs to be avoided.

Example I.a

Example I.b

With Example i.a, the primary colors Purple (foreground) on Purple Light (background), results in the Ratio 6.65:1.

The minimum for large text with this pairing to hit a Level AAA, is 4.5:1, and for smaller text, is 7.0:1.

Since 6.64:1 is less than the 7.0 threshold, the contrast for these two colors counts as Level AA. If we take a look at the large text, how come it’s set at Level AA instead of Level AAA even though it’s pass the threshold?

It is because many contrast tools—including Figma—default to displaying the overall contrast rating for the color pair. So even though a contrast ratio of 6.64:1 exceeds the AAA requirement for large text (4.5:1), the combination does not meet the AAA threshold for normal text, hence it would be classified as an AA pairing rather than AAA (example j).

Example J: Large Text defaults to AA because Normal Text only passes AA.

Next, with Typography, the section is divided into Fonts, Weights, Headings, and Spacing.

This section documents the typography system across brands, detailing font families and weights, heading styles, spacing conventions, and a visual reference for all heading levels.

This typography hub provides a comprehensive, visual reference for the brand's type system. It details everything from headline hierarchies and body text styles, down to specific font weights, letter spacing, and line-height rules. Its deep dive ensures typographic consistency across all applications—from digital interfaces and presentations, to marketing mockups.

For Primary Designers: All styles are live and usable within the Figma system. This hub also serves as a critical reference for future updates, allowing designers to see the full spectrum of weights and spacing rules when making precise refinements or swaps.

For Secondary Users: The integrated Google Drive button provides quick access to download the font files and typography guidelines, so the brand stays consistent outside of design files.

Left: Electra’s integrated typography in Figma style system. Top: Visual of where the link button takes the user in Google Drive.

Iconography, Web Elements, UI Elements

Following Typography, the system expands to elements. After consolidating and organizing the type of elements that is required in this section, my role adapted two additional workstreams essential for scaling the library:

① Providing the Toolkit: Authoring foundational design assets—such as grid frameworks and stylistic elements—that enables all Salesforce product owners that ‘spin-up’ templates, to quickly plug and design a demo site according to deliverable needs.
② Building Contextual Systems: Developing and maintaining dedicated, platform-specific design systems using Salesforce framework integration, to ensure the brand is expertly applied within complex technical environments, acting as both designer and system custodian.

Because of this, the definition of ‘elements’ have also evolved into three distinct pillars: icons, web, and ui.

Iconography — houses a brands System Icons, Avatars, an area for Miscellaneous icons that are used in niche scopes.

Web Elements — repository of grids, navigations, cards, carousels, banners, that are used specifically for Salesforce template spin-up demos, to provide a more engaging and interactive experience

UI Elements — building blocks of the brand website’s customized user interface such as buttons, text fields, and menus

After understanding the streams and division of assets, one might wonder: if UI Elements is also a personalized resource, how come the idea of web elements and ui elements cannot be combined as Demo Elements in the header?

This was a common point of confusion across the broader team, since demo could refer to anything from a proof-of-concept to a client-ready presentation, using it generically risked significant stakeholder confusion, and limits the library to just our department.

My goal includes serving beyond our immediate teams; continuing the system to be intentionally used, company-wide. So, the term "demo" was deliberately avoided due to its ambiguity within this project.

While this section is specifically used for template spin-ups, labeling it "Spin-up Demos" would have created cognitive bias for our broader audience—like international teams (e.g., APAC, and EMEA partners). Thus, choosing a clearer, more inclusive "Web Elements" header, to encourage cross-team adoption and ensure the assets were perceived as foundational, not situationally specific.

In this, it was intentional to have the headers utilize broader terms, and more granular
asset definition.

The users can quickly scan the section based on the enlarged header, and overall layout of the contents. This acts as a guide for selective attention. And zooming in would provide a deeper dive into the assets.

The IDBL establishes a centralized, governed foundation for managing brand assets across 15+ industries. It is designed to evolve with the business, and ensures that all core brand updates are reviewed, approved, and maintained within a single system aligned with leadership standards.

Clear ownership and governance are also critical to protecting brand integrity as the organization grows. The IDBL enforces a defined review and approval process, preventing unvetted or fragmented brand assets from entering the ecosystem. This model mitigates brand risk, minimizes duplication of effort, and supports scalable growth, while maintaining a cohesive, high-quality brand experience across all industries.

While the IDBL can’t include unverified assets, teams that submit a ticket, are essentially engaging the design team to help create approved, scalable assets meant to live across the broader brand system. Once approved, work typically begins a day after a team discussion and work allocation—with one or two designers taking the lead and guiding the project through design, review, and approval.

As updates move forward, a notice is added to the relevant brand page to let users know changes are coming, while encouraging them to continue using the current assets in the meantime. If the update affects the entire brand, the notice appears at both the brand and subsection levels. If it’s more targeted, the notice is shown only within the affected subsection, as illustrated below.

Products, and Photography

In the last subsection under Brand Asset, stands Product and Photography.

The Product section is designed to be broadly accessible, allowing anyone to quickly copy, paste, and reuse screens directly within Figma. All product screens are fully integrated into the Figma system for efficient workflows, including both the product catalog and asset screens. Asset screens may include internal Salesforce mockups, as well as reusable designs borrowed from other projects or libraries that remain essential to the brand ecosystem.

Product Screen: Internal mock up of Facebook and Instagram ad for the brand Electra.

Photography is handled differently to optimize usability and performance. While a small set of example images is available within the system for quick reference, the majority of approved brand photography lives in Google Drive. A single brand may have 200–300 approved images, and with over 20 brands in the library, housing all photography directly in Figma would create unnecessary friction. Instead, linking to Google Drive allows users to leverage built-in filtering and folder-level search, enabling faster access to brand photography without navigating deeply nested Figma components.

After Installment

While the initial implementation is complete, the IDBL is intentionally designed as a living system.

To remain effective, it requires ongoing stewardship through a designated council member who reviews, maintains, and evolves the library on a quarterly basis. This role ensures brand updates stay current, governance standards are upheld, and new needs are incorporated without compromising system integrity.

Example of designated Library owner for each quarter

To support long-term adoption and self-service, the library also includes enablement materials such as:

library usage guidelines,
Figma learning resources,
directory of all brand pages within the IDBL,
FAQs,
do’s and don’ts,
curated resources including Salesforce design systems, product mockups, toolkits, templates,
and recommended Figma plugins.

Together, these additions ensure the IDBL is not just a repository—but a sustainable, well-governed ecosystem that can grow with the organization.

(Top left): Directory, (Top right): Do’s and Dont’s, (Bottom left): Enablement Videos, (Bottom right): FAQ

Conclusion: Liberated Ecosystem

The Industry Demo Brand Library has turned a legacy of friction into a foundation for freedom.

It resolved our historical debt, erasing the inefficiency of the hunt, and the risk of the outdated. By transforming a decade of fragmented assets into a single, living source of truth, not only did it bring the definitive brand directly into the designer's workflow, —making consistency a simple choice and creativity the primary task—it also acted as a hub for non-designers to follow into core design resources.

This is not just a library—it is a liberated ecosystem.

It empowers our designers not by giving them more tools, but by removing the obstacles, freeing them to focus on what they do best: innovate with confidence and build our brand forward. Our past is now organized, our present is streamlined, and our future is creatively unbounded.

Takeaways

The completion of the IDBL marked a major milestone in unifying and leveling brand assets across the organization. What began as a foundational effort to standardize brands has evolved into a scalable system that improves discoverability, consistency, and day-to-day efficiency for designers and cross-functional partners alike.

This project stands as a testament to what our team can accomplish. I'm proud to have led the initiative, and even prouder of the collaborative spirit every designer brought to the table. It was made possible by every designer’s expertise and dedication. Because now, the library can serve as a single source of truth not just team-wide, but world-wide. And at one point, the top design team using IBDL, was in Japan!

I’m excited to see what is built next with this strong foundation, because design libraries are always evolving.

Postitive Sentiments on IDBL

“Thank you for building this brand library, it’s so much easier to find what I’m searching for. I don’t have to spent time chasing after ghost assets anymore!”
- Shannon, Content Designer

“Whenever I need something Industry Brand related, I always come through here first.”
- Chris, User Experience Designer Lead

“Easy to understand, and I know exactly who to reach out to if I want to expand a Brand, the right way.”
- Brian, Product Owner

“It’s the first thing that comes to mind when someone mentions ‘oh, I need some industry brands assets’, and I always recommend this library for them to check out before anything else.”
- Sara, Senior Demo Architect

End of Project Preview

Oh dang, you’ve hit the end of the story!

But don’t worry, there’s so much more to explore. Perhaps, Figma 101 Enablement Sessions would interest you!

product design & sys product design & sys

archives archives

big scoop big scoop