# Penpot

> `penpot@1.0.0`

Penpot is the open-source design and prototyping platform — a browser-based design tool with components, libraries, and dev- handoff, built on web standards and licensed under MPL-2.0. The brand voice is open, community-led, and craft-confident. Visually, the identity is the Penpot Mint mark (#31EFB8) — an electric mint green — on a near-black canvas with white display type. Penpot's marketing surface leans dark to put the mint forward.


**Tags:** `open-source`, `design-tools`, `penpot`, `mpl-2-0`

## Atoms

### Palette

**Penpot** · `penpot@1.0.0` · MPL-2.0

> Penpot's brand palette, anchored on Penpot Mint (#31EFB8) — the signature electric mint green that carries the wordmark and the "P" mark of the open-source design and prototyping platform. The institutional voice pairs that mint with a near-black canvas (Penpot's marketing surface is dark-leaning) and white display type. Penpot is open-source under MPL-2.0; its brand assets are published openly. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `penpot-mint` | Penpot Mint | `#31EFB8` |
| `penpot-white` | Penpot White | `#FFFFFF` |
| `penpot-black` | Penpot Black | `#18181A` |
| `penpot-canvas-dark` | Penpot Canvas Dark | `#18181A` |
| `penpot-surface-light` | Penpot Surface Light | `#F5F5F5` |
| `penpot-surface-dark` | Penpot Surface Dark | `#2A2A2D` |
| `penpot-text-secondary` | Penpot Text Secondary | `#6E6E76` |
| `penpot-text-tertiary` | Penpot Text Tertiary | `#A0A0A8` |
| `penpot-mint-hover` | Penpot Mint Hover | `#5EF3C7` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `penpot-white` | `#FFFFFF` |
| `surface` | `penpot-surface-light` | `#F5F5F5` |
| `surface-elevated` | `penpot-white` | `#FFFFFF` |
| `text-primary` | `penpot-black` | `#18181A` |
| `text-secondary` | `penpot-text-secondary` | `#6E6E76` |
| `text-tertiary` | `penpot-text-tertiary` | `#A0A0A8` |
| `primary` | `penpot-mint` | `#31EFB8` |
| `primary-hover` | `penpot-mint-hover` | `#5EF3C7` |
| `accent` | `penpot-mint` | `#31EFB8` |
| `accent-hover` | `penpot-mint-hover` | `#5EF3C7` |
| `warning` | `penpot-mint` | `#31EFB8` |
| `warning-hover` | `penpot-mint-hover` | `#5EF3C7` |
| `error` | `penpot-mint` | `#31EFB8` |
| `success` | `penpot-mint` | `#31EFB8` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `penpot-canvas-dark` | `#18181A` |
| `surface` | `penpot-surface-dark` | `#2A2A2D` |
| `surface-elevated` | `penpot-surface-dark` | `#2A2A2D` |
| `text-primary` | `penpot-white` | `#FFFFFF` |
| `text-secondary` | `penpot-text-tertiary` | `#A0A0A8` |
| `text-tertiary` | `penpot-text-secondary` | `#6E6E76` |
| `primary` | `penpot-mint` | `#31EFB8` |
| `primary-hover` | `penpot-mint-hover` | `#5EF3C7` |
| `accent` | `penpot-mint` | `#31EFB8` |
| `accent-hover` | `penpot-mint-hover` | `#5EF3C7` |
| `warning` | `penpot-mint` | `#31EFB8` |
| `warning-hover` | `penpot-mint-hover` | `#5EF3C7` |
| `error` | `penpot-mint` | `#31EFB8` |
| `success` | `penpot-mint` | `#31EFB8` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `penpot-mint` | `#31EFB8` |
| `on-identity` | `penpot-black` | `#18181A` |
| `primary` | `penpot-mint` | `#31EFB8` |
| `primary-hover` | `penpot-mint-hover` | `#5EF3C7` |
| `accent` | `penpot-mint` | `#31EFB8` |
| `accent-hover` | `penpot-mint-hover` | `#5EF3C7` |
| `success` | `penpot-mint` | `#31EFB8` |
| `warning` | `penpot-mint` | `#31EFB8` |
| `error` | `penpot-mint` | `#31EFB8` |
| `background-light` | `penpot-white` | `#FFFFFF` |
| `background-dark` | `penpot-canvas-dark` | `#18181A` |
| `surface-light` | `penpot-surface-light` | `#F5F5F5` |
| `surface-dark` | `penpot-surface-dark` | `#2A2A2D` |
| `text-primary-light` | `penpot-black` | `#18181A` |
| `text-primary-dark` | `penpot-white` | `#FFFFFF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `colorChoice` → `logo.mark`

- **allowed:** penpot-mint, penpot-white, penpot-black
- **forbidden:** any-non-brand-color

> The Penpot mark renders in Penpot Mint as the canonical fill, with white and near-black as the only sanctioned monochrome alternates. The MPL-2.0 license covers the code; Penpot's brand guidance restricts recoloring of the mark. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill

> Penpot's brand surfaces ask consumers not to stretch, rotate, recolor, or apply decorative effects to the mark — open-source distribution does not waive brand-use discipline. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text. Penpot White (#FFFFFF) on Penpot Black (#18181A) clears AA at very high contrast — the dark-canvas voice of the brand already satisfies the accessibility floor. 

#### `variantSelection` → `logo`

- **use:** `logo-mint`
- **when:** `backgroundColorScheme="dark"`

> On the canonical dark canvas, use the Penpot Mint mark variant; do not invert the mark into white on dark, as that loses the brand's signature mint identity. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Penpot-skinned surfaces must clear AA on body text; note that Penpot Mint must not be used as a body-text color on white because it fails AA. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 600, 700

> Penpot's marketing surfaces render display headings in the 500–700 band against the dark canvas; lighter weights lose contrast on the dark surface. 

### 💡 recommendation (2)

#### `variantSelection` → `logo`

- **use:** `logo-dark`
- **when:** `backgroundColorScheme="light"`

> On light surfaces, the Penpot Mint mark may render at low contrast on white; consider a dark-fill monochrome variant for body-text-adjacent placements where contrast matters. 

#### `compositionConstraint` → `roles.colors.identity`

- **pairsWith:** penpot-black, penpot-canvas-dark, penpot-white

> Penpot Mint is calibrated to read on the near-black canvas Penpot prefers in marketing. Pairing it with another saturated hue at the same weight breaks the focused open- source voice of the brand surface. 

## Provenance

- **Source:** <https://penpot.app/>
- **License:** `MPL-2.0`
- **Attribution:** Penpot is © Penpot S.L. and the Penpot community, licensed under the Mozilla Public License 2.0. Penpot publishes its brand assets openly. The primary brand color Penpot Mint (#31EFB8) is documented on Penpot's brand surfaces. brand-atoms catalogues the publicly documented signature color and authored neutrals; downstream use of the Penpot name and mark is governed by Penpot's open-source license and trademark guidance at penpot.app. 
- **Imported:** `2026-05-18`
- **Notes:** Penpot is the only open-source brand in this batch — its license (Mozilla Public License 2.0) covers both the code and the published brand assets. Penpot's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. 

---

*Generated by the brand-atoms converter. Source: `penpot@1.0.0` from the encyclopedia.*