The Free Open Source Online Design Tool
Create and manage design systems with Penpot
Design and Code
Create beautiful user interfaces in collaboration with all team members. Keep consistency at scale with components, libraries and design systems.
Components
Speed your workflow with the reusable power of components.Flex-Layout
Build flexible interfaces following CSS standards.Fonts management
Use fonts that you own on your teams.Fonts management
Use fonts that you own on your teams.Fonts management
Use fonts that you own on your teams.Design and Code collaboration

Components
Create rich interactions to mimic the product behavior. Share them to stakeholders, present proposals to your team and start user testing with your designs, all in one place.
Interactions
Set triggers and define actions to add interactions to your designs.Transitions
Add beautiful transitions like fade, pull, push and animations to your interactions.Flows
Set multiple starting points to match your product customer journeys.
Components
Templates & Libraries
It's teamwork that makes design whole. Penpot provides features that allow designers, developers and stakeholders to collaborate sharing the same space.
Components
Speed your workflow with the reusable power of components.Flex-Layout
Build flexible interfaces following CSS standards.Fonts management
Use fonts that you own on your teams.Fonts management
Use fonts that you own on your teams.Fonts management
Use fonts that you own on your teams.Templates & Libraries


Vector files export
Vector files export
Developers are at the core of Penpot's vision. We make sure they can use it as part of their productivity tools thanks to intuitive navigation and code and properties introspection. The built-in read-only mode brings a great safety net!
Code inspector
Get actual code snippets. Ready to use code for CSS styles and SVG markup.Properties inspector
Get detailed specifications about the object’s style and content.Distances and measurements
Easily get measurements and distances between objects.Custom font management

Custom font management
Components
Speed your workflow with the reusable power of components.Flex-Layout
Build flexible interfaces following CSS standards.Fonts management
Use fonts that you own on your teams.Fonts management
Use fonts that you own on your teams.Fonts management
Use fonts that you own on your teams.Benefits of Penpot
Penpot is more than collaborative
Penpot is a free design tool
Penpot gives you freedom and flexibility
Penpot is easy to use
Penpot is Open Source
Design from the web and for the web
Enter some text
Infinite canvas
Design without limits on an infinite canvas where you can organize and scale your designs using the space you need.Vector manipulation
Being SVG based, Penpot is a powerful tool for editing vectors and making boolean operations.Components / symbols
Speed up your workflow and keep consistency on your designs with components that can be reused multiple times across the files of a team.Libraries
Store elements and styles so that they can be easily reused. Libraries may include components, graphics, colors and typographies. Libraries can be shared among teams.Fonts management
If you have purchased, personal or libre fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team.Color picker
A powerful color manager with eyedropper, color profiles (RGB, HSV, Harmony), gradients, and opacity sliders.Color style assets
Create your color styles, including plain and gradient fills, to configure your color palettes and use them on fills and strokes.Typography style assets
Save typography styles with a set of reusable properties to create your typography palettes.Color palette
The color palette allows you to have a selected color library in plain sight. Use the menu to easily switch between libraries.Typography palette
Penpot provides a typography palette to apply your library typography styles at lightspeed.Gradient colors
Create stunning gradient transitions. Currently linear and radial options, but a lot more is planned.Advanced styling features
Create and edit shadows, blurs, border radius, strokes, stroke caps and much more.Flex layout (Auto/Smart)
The Flex Layout allows you to automatically adapt your designs. Resize, fit, and fill content and containers without the need to do it manually. Penpot brings a layout system like no other. Explore furtherResizing constraints
Constraints allow you to decide how layers will behave when resizing its parent container. You can apply horizontal and vertical constraints. Combine constraints with Flex layout to build extremely responsive interfaces.Nested boards/frames
Flexible boards (artboards/frames) that can contain other boards. Boards have options to clip their content and decide whether to show them at the presentations.