Back

Invert Inc.

Design system

Product design

figma

Invert is a certified B Corporation that helps organizations take real climate action. With over 80 years of global experience in project identification, validation, and financing, they focus on carbon reduction and removal initiatives.

I built a design system from the ground up to support both mobile and web applications, ensuring consistency across platforms. My approach focused on scalability and ease of use, with a strong foundation of design tokens, components, and clear documentation that made development more efficient.

*The final screens of this project are my sandbox version of the final app. The final product was designed by others.

A typography style guide displaying various heading and display text styles. It includes font sizes, line heights, and tracking values for Display Large, Display Small, and Heading levels from H1 to H6, each shown in different font weights or styles
A colour palette guide displaying different colour categories: Neutral, Primary, Success, Warning, and Destructive. Each category consists of multiple shades with corresponding hex codes, arranged from lightest to darkest.
A spacing system guide displaying various spacing tokens with corresponding pixel values. Each row lists a token name, size in pixels, and a visual representation of the spacing using horizontal bars that increase in length as the spacing size increases.
A button style guide displaying different button variations categorized as Primary, Secondary, Outlined, and Tertiary, along with their Destructive counterparts. Buttons feature a label and an icon, with styles ranging from solid-filled to outlined and text-only variations in blue and red hues.
A mobile app welcome screen with a blue background, displaying the text 'Start your climate action journey today.' Below are two buttons labeled 'Get Started' and 'Join My Company,' followed by a smaller text link for existing accounts. The lower part of the screen features a stylized 3D illustration of Earth with trees, houses, and wind turbines, symbolizing sustainability.
A mobile app screen displaying a 'Meat Consumption' survey question. The question asks users how often they consume meat products, excluding fish, per week. A note defines a portion as a 4 oz serving. Below, there are five selectable options in blue buttons: 'Never, I'm a vegan/vegetarian,' '1 portion or less per day,' '2 portions per day,' '3 portions per day,' and '4+ portions per day.' Pagination at the bottom indicates this is page 1 of 9.
A mobile app dashboard screen displaying a user's climate impact status. A circular progress chart indicates that the user has reached 62% of their monthly goal. Below, two cards show 'My Footprint' with an estimated monthly carbon emissions of 1500 kg and 'My Goal' to reduce emissions by 916 kg. A 'Buy More Offsets' button is at the bottom, along with a navigation bar featuring home, community, analytics, and settings icons.
A mobile app shopping cart screen displaying three environmental projects with images, titles, and purchase details. Each project lists the amount of carbon offset in kilograms and its price in USD, with quantity selectors and delete icons. Below, a summary shows the subtotal of $370, tax of $48.10, and a total of $418.10. A blue 'Continue' button is at the bottom, along with a navigation bar featuring home, community, analytics, and settings icons.