Carbon Design System
Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors. Carbon is a collection of pre-built, reusable assets—components, patterns, guidance, and code—that allows its users to build consistent digital experiences faster.
Carbon’s history
The Carbon Design System was originally the design system for IBM Cloud for several years in its lifetime. At the time, more than +15 design systems existed throughout IBM and were used inconsistently across different business units and product teams. This often led to visual and development hardships and a need for more consistency in experiences since most of these systems were not fully staffed by dedicated teams. In 2018, it was decided that IBM needed one design system to rule them all, which was Carbon.
My role
Leadership
As a design leader within IBM and on the Carbon Design System team, I strive to find areas where our team can produce high impact for strategic product teams, successfully deliver business results, and create great outcomes. I focus on finding new opportunities to help consolidate redundancy across products by bringing common use cases into core Carbon and create reusable assets in our system to benefit everyone at a grander scale. I serve on different boards and guilds within IBM, and am part of several design critiques across different parts of the business to guide important design outcomes. I can’t express how much I love this part of my job. I have built so many meaningful relationships across IBM and have seen many of our design decisions ship and come to life, and it is incredibly rewarding.
Being agile
My squad maintains and enhances the core system, like tokens, guidelines, documentation, components, patterns, etc., while ensuring quality and being compliant with accessibility standards. We serve as a best-in-class agile model that other teams at IBM look to and we have given demos of how we work and conduct agile ceremonies. I prioritize the design work that the system squad designers take on alongside the development team. With our project manager and development lead, we plan for what the team can close out in a sprint, what we aim to accomplish in a business quarter, and help set goals for what we aspire to deliver in an entire year.
“Lauren has been a pillar of stability for the junior designers and the new hires on the System squad. Lauren as always is a tremendous asset to the design system and, because she came from IBM Cloud, she adds enormous product SME and credibility to the Carbon team—not to mention that she's beloved by the Carbon community.” — IBM Design Principal
Supporting our users
A significant part of my job is to support our users and empower them to use Carbon. This can be through helping people contribute, migrate, or adopt Carbon. I collaborate with the IBM design community to align on global patterns and components. I facilitate community contributions to the system and give creative direction to teams during their contribution process, whether it be conducting research and creating audits to design a minor enhancement, a net new component or pattern, or even overhauling larger parts of our system to make it more innovative and efficient.
Team culture
I have been part of the Carbon team for six years. Carbon has been starting to expand its team. Under my design leadership, we have hired several new designers (+5) from different cultures and backgrounds. I am a big believer in creating a thoughtful and welcoming onboarding experience to make new teammates feel well-acquainted and equipped with what they need to get started as full-functioning team members. I strive to create a safe and inclusive working environment for my teammates so they are supported daily. I always aim to help my teammates grow their skills and level up as designers to find avenues for future leadership opportunities.
“Lauren is incredibly attentive to the new hires. She helped develop a robust Carbon onboarding curriculum and rigorously tracks their onboarding progress—making sure to schedule regular learning sessions, check-ins and meet-and-greets with them so they don't feel isolated. She also remembers every birthday, work anniversary and personal milestone on the entire team. Aside from being an incredibly gifted practitioner and leader, Lauren really makes the team feel like a cozy home for her co-workers.” — IBM Manager
Components
Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products. Each component has been designed and coded to solve a specific UI problem. All of the components in Carbon have been designed to work harmoniously together, as parts of a greater whole.
Theming
Themes are used to modify existing components to fit a specific visual style.
By using tokens, developers can easily customize all of their components by changing a set of universal variables, eliminating the need to modify individual components.
Tokens
Tokens are a method of applying things like color, type, and spacing in a consistent, reusable, and scalable way. Tokens allow for value changes to be made at scale, making design language changes easy to implement, as well as making possible color functionalities like inline theming and light or dark mode.
Color tokens
Color tokens that can be applied across components. They help us abstract how we use color from the values themselves. The color token names have been renamed in our latest v11 major release to better reflect their usage and make them easier for people to apply to components. Carbon has two different sets of color tokens—Layering tokens and Contextual tokens.
Spacing tokens
The scale for spacing tokens complements the 2x Grid and typography scale by using multiples of two, four, and eight. It includes both small increments needed to create appropriate spatial relationships for detail-level designs as well as larger increments used to control the density of a design.
Type tokens
Carbon uses type tokens across two type sets, productive (-01) and expressive (-02), to manage typography. Type tokens are pre-set configurations of typographic elements such as font size, weight, or leading (line height) that are specifically calibrated for use alongside IBM Plex in product.
2x Grid
The 2x Grid is the geometric foundation of all the visual elements of IBM Design, from typography to columns, boxes, icons, and illustrations. It provides structure and guidance for all creative decision-making.
Accessibility
IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following and complying with accessibility best practices and standards. On the Carbon Design System team, I have acted as a liaison with the IBM Accessibility team, serving as the primary design representative at our ongoing Accessibility Guild discussions and helping track Carbon accessibility design improvements with accessibility experts.
“I have been working closely with Lauren for several years now, and I can say without reservation that she is one of the most responsive, positive people I've worked with. The Carbon team is made up of a team of dang competent people, and she's no exception. There are so many ways she excels: her attention to detail, her ability to keep a LOT of different topics at the forefront, and connect the overarching patterns and themes to lead to broad improvements... I could go on. I'm happy to have a chance to recognize her ongoing quest for Carbon improvement.” —IBM Accessibility Expert
Charts
Carbon charts help you tell accurate and convincing stories around data with beautiful and accessible visualizations.
Icons and pictograms
Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance and draw attention to important information. Pictograms offer interactivity and simplify complex ideas. They tend to be used at a larger scale and appear often in expressive experiences.
Accolades
Red Dot Design Award—Carbon Design System
The Carbon Design System received a Red Dot Design Award for 2022 in the Brands & Communication discipline. The design system was recognized as a winner in the Interface & User Experience Design category for creating an open source design system for products and digital experiences that are user focused and accessible to everyone, regardless of ability or situation. Read my Medium article below.
Eminence & Excellence Award
I was recognized and awarded the Eminence & Excellence Award for my contributions to IBM’s Technical Collaboration Achievement Program (TCAP).
Carbon Design System team
IBM Brand team
IBM Accessibility team
IBM Design contributors
Open source community contributors