Design systems with Penpot

Let’s walk through the Penpot features you can use to create your team’s design system, from shareable libraries to generated CSS and everything in between.

Design systems with Penpot

Design systems are collections of design patterns, code snippets, and guiding documentation. Teams can use these systems across projects to create more consistent user experiences and efficient design and development processes. Design systems are a great collaborative tool and save teams from reinventing the wheel on each new project when it comes to design, code, and branding.

Penpot is the perfect tool for building a design system, from shareable libraries to CSS generated from your components. Today, I’ll walk you through an overview of the features you can use to create a design system for your team using Penpot.

Create design token collections

Design tokens are rules representing the smaller reusable values in your system. Tokens can be any kind of value, but they’re most often used to standardize styles such as font, color, size, and spacing across designs. Each token has a name to make it easier to document, find, and reuse. 

The components, colors, and typographies sections of the assets panel in Penpot.
Assets are a collection of your components (left), colors (middle), and typographies (right).

You can store color and typography tokens as Assets in Penpot. And there’s more coming soon. To preview the design token goodness coming to Penpot, check out this sneak peek in our recent live stream.

Store colors in the color palette

Save any color value in Penpot to store it in the Assets panel and reuse it anywhere in your file or as part of a shared library. To use your color more like a design token, you can also give it a name from the Assets panel, using slashes to organize your colors into groups and sub-groups.

The colors section in Penpot’s assets tab with the a color being named Design system / Colors/ Marine 200.
Naming the color as Design system / Colors / Marine 200 organizes the Marine 200 color into a colors group inside the design system group.

Once you’ve saved your colors to your library, you can quickly access them from the Color Palette at the bottom of the canvas. With an object selected, choose your desired color to add the color as the object’s fill color.

The Penpot color palette with the Marine 200 color showing in the panel.
Hold Alt (or ⌥ in macOS) while selecting the color to add the color as the object’s stroke color.

Design consistent typography

Penpot comes preloaded with a huge selection of Google web fonts. If you want to use a different web font in your design system, you can upload font files for your whole team from the Fonts area in the Penpot dashboard. You can also upload multiple font weights and style variants and group them as one font family.

Like colors, you can save and store Typographies in the Assets panel for reuse in your file or shared library. Typographies comprise the text’s font family, size, type (weight and style), line height, character spacing, and text case (lower case, uppercase, title case). Typographies are named after their font family by default. You can rename and group typographies using slashes from the Assets panel in the same way as colors.

Heading level 1 text object selected and the H1 typography showing in the Assets panel.
I’ve named the H1 typography as Design system / Typography / H1 so it’s grouped with other Design system typographies.

Once you’ve saved your typographies to your library, you can quickly access them from the Typographies palette at the bottom of the canvas. To apply a typography to a text object, select the desired text and choose your desired typography from the palette.

Build reusable components

Components are vital to any design system and can form the basis of anything from a simple reusable pattern to a complex layout with multiple nested parent and child components. 

You can save any object or group of objects as a component in the Assets panel for reuse in your file or shared library. You can even save an empty board that only contains layout rules as a layout component. Once saved, you can name your components and group them using slashes in the name to make them easier to find amongst a large collection of components.


Creating a button with icon component and finding the component in the Assets panel.

After creating a component, you can quickly grab another instance of that component from the Assets panel or just duplicate the main component. When you use a copy or instance of a component, it is linked to the main component and can be updated or changed by any changes to the main component.

A selected button with icon component with an annotation detailing how only one of these components should be used per screen.
Annotating a component.

Sometimes, your components need some documentation to help your team understand how and where to use them. With your main component selected, you can add an annotation with any relevant information in the Design panel. Annotations are shown in the Inspect tab, making it easy for developers and other stakeholders on your team to quickly find information about your component without having to dig around in the assets or layers.

Component overrides, variants and swaps

You can override the defaults of the main component in a copy of the component. To create component variants, detach a copy of the component from the main component and save it as a new component. You can swap components quickly from the Design panel by pressing the component icon alongside the component name. From there, you can quickly pick any component variant saved in the same group or any other component in your library.


Use naming to group your component variants in the same collection and make it easy to switch between them.

Specify spacing and layouts

Spacing is fundamental in design systems because it determines how you group and align your design elements into a coherent layout. There are many different ways to do layout and spacing in Penpot, which I’m excited to explore further in the future. For now, I’ll direct you to the different places where you can control your spacing and overall layouts.

Measuring spacing with guides

If you come from a traditional graphic design background like me, you’ll love a background grid to which you can align all your elements. In Penpot, you can find background grids (“squares”), as well as column and row guides in the Design panel under Guides. Column and row guides can stretch to fill the space, or you can fix them to the left, right, and center, which is helpful if you’re working on flexible or responsive designs.

A spacing board in Penpot which has a 12px square grid, a 4px square grid, and a 3 column guide aligned to the left with an 8px gutter.
You can apply a guide to any object in Penpot, which is handy if you want different spacing and guides for your layouts, typography, and individual components.

Board and container layouts

In Penpot, layouts work the same way as they do on the web, but you don’t have to do any of the coding. By default, your layout will be static (that’s absolute positioning for my CSS pals), where you position objects on the X and Y axis. Or you can create more advanced flexible layouts with flex and grid layouts. You can apply layouts to any board, group, or layer, allowing you to nest different layouts inside each other.

A tab bar component using the flex layout.
Find the layout settings for your currently selected object in the Design panel.

You can even save your board with its layout as a component to create reusable layouts.

Object layouts

Once an object is inside another board, group or layer, you can set its constraints from the Design panel. Constraints determine how the object behaves when you resize its parent container. Once an object is inside another board, group or layer with a layout, you can also set layout-specific properties that determine how the object behaves inside that layout, including its alignment and margins.

Layout settings in Penpot for a flex element inside a flex layout.
The active tab component (the flex element) is set to always align to the vertical end of the container (the flex layout) so it keeps the tab effect.

Shared libraries

Any colors, typographies, and components saved to your Assets library can be used anywhere in your file. You can also share your assets with your team and across your projects with a shared library, which is perfect for design systems.

The Libraries dialog with a Publish button alongside the File library.
Publish your library as a shared library from the Libraries panel in the Assets tab or the main menu.

When you publish your file as a shared library, your file name is used as the library name. Any changes to your components in your original file will push out updates to any other files using your shared library.

A notification saying there are updates in shared libraries with an Update button.
When you’ve made an update to your library, you’ll receive a notification in any files using that library. You can update to the latest version of the library from that notification or the Updates tab in the Libraries panel.

Design systems that work for developers

Collaboration is the whole point of design systems, and Penpot has been created for both designers and developers. One of the reasons it’s useful to have layouts that work the same way as on the web is that developers can grab the code for the layout from Inspect mode, and it’ll work exactly as the designer intended.

Inspect mode showing a view-only message, inspecting a component’s properties, and getting its CSS code.
Inspect mode is your best friend when it comes to handoffs between designers and developers.

In Inspect mode, you can pick objects on the canvas without the risk of accidentally editing them (I’ve been there!) and get information on their dimensions, properties, and any component annotations from the Info tab without having to dig around in any panels. You can also switch to the Code tab to grab that object’s CSS, HTML, and SVG code.

Penpot is built with design systems in mind

You should now have a better idea of all the features you can use in Penpot to create your design systems and collaborate better with your teams. Sign up for a free account and start work on your design system today. Penpot was really designed with design systems in mind, and upcoming features like design tokens will continue to build on that.

Check out our blog post on 5 design system examples to learn more about design systems. You can also find the Penpot design system template in our Libraries & Templates collection to see how Penpot uses Penpot for Penpot. Very meta!

If you have any questions about using Penpot for your design systems or suggestions for tutorials that would help you in the future, feel free to post on our Community Space. We’d love to hear from you.