W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Penpot
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.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/penpot/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/penpot/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Penpot
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Penpot
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Penpot
A clear hierarchy in Penpot's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ penpot-mint #31EFB8 accent-hover
→ penpot-mint-hover #5EF3C7 background-dark
→ penpot-canvas-dark #18181A background-light
→ penpot-white #FFFFFF error
→ penpot-mint #31EFB8 identity
→ penpot-mint #31EFB8 on-identity
→ penpot-black #18181A primary
→ penpot-mint #31EFB8 primary-hover
→ penpot-mint-hover #5EF3C7 success
→ penpot-mint #31EFB8 surface-dark
→ penpot-surface-dark #2A2A2D surface-light
→ penpot-surface-light #F5F5F5 text-primary-dark
→ penpot-white #FFFFFF text-primary-light
→ penpot-black #18181A warning
→ penpot-mint #31EFB8 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from penpot)
Light mode (14 roles)
accent
→ penpot-mint accent-hover
→ penpot-mint-hover background
→ penpot-white error
→ penpot-mint primary
→ penpot-mint primary-hover
→ penpot-mint-hover success
→ penpot-mint surface
→ penpot-surface-light surface-elevated
→ penpot-white text-primary
→ penpot-black text-secondary
→ penpot-text-secondary text-tertiary
→ penpot-text-tertiary warning
→ penpot-mint warning-hover
→ penpot-mint-hover Dark mode (14 roles)
accent
→ penpot-mint accent-hover
→ penpot-mint-hover background
→ penpot-canvas-dark error
→ penpot-mint primary
→ penpot-mint primary-hover
→ penpot-mint-hover success
→ penpot-mint surface
→ penpot-surface-dark surface-elevated
→ penpot-surface-dark text-primary
→ penpot-white text-secondary
→ penpot-text-tertiary text-tertiary
→ penpot-text-secondary warning
→ penpot-mint warning-hover
→ penpot-mint-hover Rules (8 typed constraints)
error · 5 rules
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 rule
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 rules
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.