Penpot

Penpot is the open-source design platform for teams building digital products at scale, enabling deeper collaboration across design, code, and AI workflows.

design-toolverifiedpenpot.app

Penpot is the open-source design platform for teams building digital products at scale, enabling deeper collaboration across design, code, and AI workflows.

Color

primary

Deep Indigo

#100c3c

Primary brand color: CTAs, links, active states.

secondary

Bright Blue

#0141ff

Secondary brand color.

accent

Azure

#1677ff

Accent: highlights and secondary emphasis.

surface

White

#ffffff

Page and card background.

text

Near Black

#111111

Body text on surface.

Typography

heading → Work Sansbody → Work Sans

Work Sanswork-sans

google

Penpot is the open-source design platform for teams building digital products at scale, enabling deeper collaboration across design, code, and AI workflows.

Weights:: 300, 400, 500, 600, 700, 800

Gradient

Derived from the colour roles, interpolated perceptually. The same three tokens ship in brand.css and tokens.json.

Brand--brand-gradient

linear-gradient(135deg in oklab, #100c3c 0%, #0141ff 100%)

Worst-case contrast — white 6.56:1 AA · black 1.14:1

Hero--brand-gradient-hero

linear-gradient(135deg in oklab, #131424 0%, #47629c 100%)

Worst-case contrast — white 6.01:1 AA · black 1.15:1 · ink #ffffff

Button--brand-gradient-button

linear-gradient(180deg in oklch shorter hue, #181747 0%, #090231 100%)

Worst-case contrast — white 16.77:1 AA · black 1.06:1 · ink #ffffff

Voice & Tone

Logo Inventory

primary

svg

mark

svg

mono

svg

inverse

svg

mcpConnect your agent to Penpot

live endpoint

Point any MCP client at this brand and every session grounds itself in the real system — colors, type, voice, usage rules. Read-only.

endpointhttps://mcp.brandsweets.com/penpot-app/mcp

.mcp.json

{
  "mcpServers": {
    "brandsweets-penpot-app": {
      "type": "http",
      "url": "https://mcp.brandsweets.com/penpot-app/mcp"
    }
  }
}

claude codeclaude mcp add --transport http brandsweets-penpot-app https://mcp.brandsweets.com/penpot-app/mcp