penpot/penpot: Penpot: The open-source design tool for design and code collaboration

penpot header image

License: MPL-2.0
penpot community
Managed with Taiga.io
Gitpod ready-to-code

website ,
User Guide ,
Learning Center ,
community

youtube ,
peartube ,
Linkedin ,
Instagram ,
Mastodon ,
blue sky ,
x


Penpot_OpenYourEyes_.mp4


penpot is the first open source Design tools for design and code collaboration. Designers can create stunning designs, interactive prototypes, design systems at scale, while developers enjoy ready-to-use code and make their workflow easier and faster. And all this without any gimmicky drama.

Available in browser or self-hosted, Penpot works with open standards like SVG, CSS, HTML, and JSON, and it’s free!

The latest updates take Penpot even further. It is the first design tool to integrate native design tokens – a single source of truth to improve efficiency and collaboration between product design and development. With the huge release of 2.0, Pennypot took the platform to a whole new level. This update introduces the groundbreaking CSS Grid Layout feature, a complete UI redesign, a new component system, and more. Contact organizations that require additional service for their teams

🎇 Design, code and open source meet at Penpot Fest! Be part of the 2025 edition in Madrid, Spain on 9-10 October.

Penpot expresses design as code. Designers can do their best work and see that it will be beautifully implemented by developers in a two-way collaboration.

Pennpot plugins let you extend the capabilities of the platform, letting you integrate it with other apps and design custom solutions.

Penpot was created to serve both designers and developers and create a fluid design-code process. You have the option to enjoy real-time co-operation or play “solo”.

Work with ready-to-use code and make your workflow easier and faster. The Inspect tab provides quick access to SVG, CSS and HTML code.

Host your own instance

Provide your team or organization with a fully proprietary collaborative design tool. Use Penpot’s cloud service or deploy your own Penpot server.

Pennypot provides integration into the development toolchain due to its support for webhooks and an API accessible through access tokens.

Building Design Systems: Design Tokens, Components and Variants

Penpot brings design systems to code-minded teams: a single source of truth with native design tokens, components, and variants for scalable, reusable, and consistent UI across projects and platforms.

492141777 cce75ad6 f783 473f 8803

PenPot is the only design and prototyping platform that is deployment agnostic. You can use it in our SaaS or deploy it anywhere.

Learn how to set it up with Docker, Kubernetes, Alastio, or other alternatives on our website.

open source

We love the open source software community. Contributing is our passion and if it is yours too, take part and make Penpot better. All your designs, codes and ideas are welcome!

If you need help or have any questions; If you want to share your experience using Penpot or get inspired; If you want to meet our community of developers and designers, join our community!

You will find the following categories:

community

Anyone who contributes to Penpot, whether through code, in the community, or at an event, must adhere to the Code of Conduct and promote a positive and safe environment.

Any contribution will make a difference in improving Penpot. How can you get involved?

choose your way:

To learn (almost) everything you need to know about how to contribute to Pennpot, check out the Contribution Guide.

Libraries and Templates

You can ask and answer questions, have open conversations, and take the lead on decisions that affect the project.

💾 Documentation

🚀 Getting started

✏️Tutorial

🏘️Architecture

📚 Dev Diaries

This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) KALEIDOS INC

Penpot is an open source project of Kaleidos





<a href

Leave a Comment