Skip to content
OpenSourceSoftware.ai
Penpot logo

Penpot

penpot · Design

GitHub stars

61,752
—Awaiting first sync

Awaiting first sync

No measured star history yet

What is Penpot?

Penpot is a design platform built around open standards and ownership. Designers and developers work in the same files, layouts behave like CSS, and teams can host the whole platform themselves instead of keeping their design system in someone else's cloud.

Penpot is an open-source design and prototyping platform for product teams. It offers real-time collaboration, native design tokens, components and variants, CSS Grid and Flex layouts, and an inspect mode with ready-to-use SVG, CSS and HTML. It can be self-hosted or used as a cloud service.

Core capabilities

  • Design with native design tokens, components and variants as one source of truth.
  • Build responsive layouts with CSS Grid and Flex that behave like real code.
  • Hand off through inspect mode, plugins, an open API and an MCP server.

Keep design and code in sync

Native design tokens, components and variants give teams one source of truth for their design system. Because layouts use CSS Grid and Flex, responsive designs behave much like the code that will implement them.

  • Design tokens
  • Components
  • CSS Grid
  • Flex layout

Built for the developers who receive the design

Inspect mode gives developers SVG, CSS and HTML for any element. Webhooks, an API with access tokens, a plugin system and an MCP server connect Penpot to development and AI workflows.

  • Inspect mode
  • API
  • Plugins
  • MCP

Host your design platform yourself

Penpot can be used as a hosted service or deployed with Docker, Kubernetes and other options. The source code is available under the Mozilla Public License 2.0, so teams keep ownership of their design files and infrastructure.

  • Self-hosted
  • Docker
  • MPL-2.0

Where it fits

Use cases

  1. 01

    Build and maintain a design system

    Define design tokens, components and variants once, then reuse them across projects so colours, typography and spacing stay consistent between design and code.

  2. 02

    Prototype a responsive interface

    Lay out screens with CSS Grid and Flex, work on them in real time with other designers, and share an interactive prototype for feedback.

  3. 03

    Hand a design over to developers

    Developers open the same file in inspect mode to copy SVG, CSS and HTML, or connect the design to code and AI tools through the API and MCP server.