It’s Skye! I’m a senior product designer
that builds durable design systems
and research-led experiences
for complex products.
Product Desgn & Sys / Industry Demo Brand Library
Industry Demo
Brand Library (IDBL)
42.5k components implemented, 60 teams worldwide, across 20+ industries, 2 Hubs, all as 1 Library.
New York City
Figma Library
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.
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.
Part I: Parallels
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.
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.
Part II: Core User
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.
Filing & Scaling Needs
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).
Design Content
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.
Right (Sub 2): Links to Slack Profile
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.
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.
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.
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.
Below is a visual pathway for IDBL Asset Library as, Assets
Below is how it looks for primary and secondary users.
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.
The ranking for this is divided into 3 levels: Level A (Basic), Level AA (Minimum Contrast), and Level AAA (Enhanced Contrast).
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 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 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.
• 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.
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).
- 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.
① 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 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.
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.
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.
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.
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.
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.
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.
- Shannon, Content Designer
“Whenever I need something Industry Brand related, I always come through here first.”
- Chris, User Experience Designer Lead
- 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
| 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! |