Get started

Penpot design tokens: what is native, what is shared, and what still needs verification

Penpot documents native design tokens, shared libraries, code inspection, open formats, and API-based customization. These are useful design-system surfaces. By themselves, though, they don't prove that your source decisions were represented correctly, distributed through the right library, implemented by every intended consumer, or preserved in the rendered interface. Accept a Penpot token handoff only after you've recorded and observed those transitions.

Updated September 9, 2026

Start with the evidence boundary

The official Penpot pages captured on August 8, 2026 provide a useful capability baseline. They describe native design tokens, shared libraries, code inspection, open formats, and API-based customization. The public repository and release history also provide source and version visibility.

Those are product-level capabilities. Your adoption decision is project-level. The captured pages don't establish which token types your particular Penpot version supports, how aliases or modes behave, whether an external artifact can be imported, how library updates propagate, or how a consuming application maps the resulting data. Nor do they prove that an inspected value is the value a browser or application renders.

Documented capabilityProject evidence still required
Native design tokensPenpot presents tokens as a native design-system capability.Record the exact representation, supported type, value, mode behavior, and source version used by the project.
Shared librariesPenpot presents shared libraries as a reusable design-system surface.Record which library owns the representation, who may change it, which files consume it, and how updates are observed.
Code inspection and open formatsPenpot names inspection plus CSS, HTML, SVG, JSON, and an open file format.Inspect the actual project output and map it to the consuming implementation. Don't assume the inspected value is wired into the product.
API-based customizationPenpot describes API access as a development-workflow capability.Verify the current API contract, permissions, identifiers, and project behavior before relying on automation.
Open source and releasesSource and version history can be inspected publicly.Record the evaluated build and reproduce project behavior. Source visibility doesn't certify a particular deployment or handoff.
Capability claims and the project questions they leave open

Don't fill evidence gaps with plausible syntax

This guide deliberately doesn't prescribe Penpot token syntax, aliases, themes, modes, import steps, export steps, or synchronization behavior. Check Penpot's current dedicated documentation and the actual project before completing those fields.

Separate the six layers of authority

Token disputes become confusing when several valid artifacts disagree. A design decision can be correct upstream, represented incorrectly in Penpot, distributed through the wrong library, inspected accurately, mapped incorrectly in code, and then masked by a local override. Calling all of that a token problem hides who owns the correction.

ResponsibilityOwnerEvidence to retain
1. Approved design intentDefines the semantic decision and its intended use, independent of any tool.The person or group authorized to approve the source design decision.Approved source version, role definition, modes, usage rule, and decision owner.
2. Penpot representationRepresents the approved decision in the evaluated Penpot project.The designer or system maintainer responsible for the Penpot representation.Project identifier, exact representation, values by relevant state or mode, inspection date, and Penpot build.
3. Shared-library distributionDistributes reusable Penpot assets to the files expected to consume them.The maintainer authorized to publish and update the shared library.Library scope, consuming files, update observations, version context, and approved exceptions.
4. Inspected code or dataExposes what the evaluated Penpot object reports for inspection in a named state.The person responsible for capturing and interpreting the inspected project evidence.Inspected object, property or data, state, timestamp, and captured result.
5. Consuming implementationMaps the decision into application tokens, styles, components, or other implementation artifacts.The developer or team responsible for each named consuming implementation.Repository or project version, mapping location, named components, and implementation owner.
6. Rendered observationRecords what representative interfaces show under defined conditions.The reviewer authorized to observe the result and assign the bounded disposition.Surface, state, mode, viewport or environment, observation, and comparison result.
Responsibility map for a Penpot token handoff

Authority should flow from the approved decision toward the render. Evidence can travel in either direction. A screenshot may reveal a mismatch, but it can't decide whether the source, Penpot representation, consumer mapping, or local exception should change.

A token that exists is available. A token that reaches named consumers and produces the accepted result is adopted.

Use evidence states instead of yes or no

Give every field one of four states: verified, observed, declared, or unresolved. Verified means a named authority or direct inspection supports the fact. Observed means someone reproduced the behavior under recorded conditions. Declared means the team intends the statement to be true but hasn't tested it. Unresolved means evidence is missing or conflicting.

  • Verified: the approved source defines the semantic role and its intended use.
  • Observed: a controlled test showed the expected change on a named surface.
  • Declared: a library is intended to supply three files, but propagation hasn't been checked.
  • Unresolved: the project hasn't established alias behavior or the consumer mapping.

Create the token intake record first

Don't begin by copying values into Penpot. Start with the decision being adopted. If the source is vague, assigning a Penpot name merely turns that ambiguity into a reusable asset.

TOKEN INTAKE RECORD

Decision ID:
Source artifact and version:
Source owner:
Semantic role:
Purpose and permitted uses:
Light value or rule:
Dark value or rule:
Other relevant states:
Usage constraints:

Evaluated Penpot build:
Penpot project and file:
Intended Penpot representation:
Representation evidence state: unresolved
Shared-library owner:
Intended library scope:
Library-update behavior: unresolved

Expected consumers:
Protected surfaces:
Approved exceptions:
Known local overrides:

Inspected code or data:
Consumer mapping:
Rendered observations:
Unresolved items:
Record owner:
Review date:
Disposition: pending
Copy this record before assigning values or library scope. The unresolved defaults are intentional.

The source and destination fields answer different questions. The source defines what the decision means. The Penpot fields record how the evaluated project represents and distributes it. Consumer fields show where the decision is implemented, while observation fields show what happened. None should silently stand in for another.

Keep exceptions specific

An exception should name the surface, condition, alternate value or behavior, owner, and reason. A note such as "marketing differs" is too broad to separate an approved exception from drift.

Record Penpot representation without assuming mechanics

Once the intake is approved, inspect the actual Penpot project and complete the destination fields. Record only what you can see and reproduce. Don't infer support for an alias, mode, import path, or synchronization rule because another token tool supports it.

  1. 1

    Identify the evaluated environment

    Record the Penpot build, deployment type if relevant, project, file, and inspection date. A release number provides context for the observation, but it doesn't prove that every deployment behaves identically.

  2. 2

    Inspect the representation

    Record the exact project object that represents the source decision, its value in each in-scope state, and how it's referenced. If the available interface or current documentation doesn't establish the representation, leave it unresolved.

  3. 3

    Define library ownership

    Name the shared library, its owner, the files expected to consume it, and any approved exclusions. Then observe update behavior in this project instead of describing an assumed synchronization model.

  4. 4

    Name every intended consumer

    List components, screens, applications, or code packages expected to follow the decision. "The product" isn't a testable consumer list.

  5. 5

    Record exceptions before testing

    Declare legitimate local differences and protected surfaces before making the controlled change. Otherwise, the team can rationalize an unexpected render after the fact.

Start with a governed source system

The intake record is easier to complete when the upstream artifact already names semantic roles, light and dark decisions, typography, spacing, layout, and usage guidance. Inspect a public kit before deciding how any of it should be represented in Penpot.

Inspection is evidence, not consumer parity

Penpot presents inspection and open formats as ways to connect design and development. This gives a team more evidence than a static screenshot. The boundary still matters: inspected code or data describes what the evaluated Penpot object exposes. It doesn't prove that a consuming application uses the same role, value, state, or version.

For example, an inspected color may be correct while the application still renders an older literal. The application may map the role to another name, load a stale artifact, override the value inside a component, or apply a page-level style later in the cascade. The inspection did its job. The evidence gap is downstream.

Open source helps investigation, not acceptance

The public Penpot repository and release history make implementation and version changes inspectable. They don't replace a project observation. Record source findings as supporting evidence, then reproduce the behavior in the environment being accepted.

Run one controlled token change

A controlled change is the shortest useful test of the handoff chain. Choose one semantic decision with visible, bounded reach. Change it at the layer authorized to own it, then observe every expected consumer and protected surface. The test isn't meant to repaint a system. It shows whether ownership and propagation match the record.

CONTROLLED-CHANGE WORKSHEET

Change ID:
Approved source decision:
Authorized source layer:
Previous source value or rule:
New source value or rule:
Reason for change:

Evaluated Penpot build:
Expected Penpot representation:
Expected shared library:
Expected consumers:
Protected surfaces that must not change:
Approved exceptions:

Observed Penpot representation:
Observed library distribution:
Inspected code or data:
Observed consumer mappings:
Observed rendered surfaces and states:
Unexpected changes:
Missing changes:
Local overrides found:

Unresolved items and owners:
Evidence links or capture IDs:
Disposition: accept / revise / block
Decision owner:
Decision date:
Complete the expectations before applying the change. Then record your observations without rewriting the expected result.
  1. 1

    Freeze expectations

    Name the intended Penpot representation, library, consumers, modes or states, protected surfaces, and approved exceptions before the test begins.

  2. 2

    Change the authoritative layer

    Apply the decision only where the responsibility map says it's owned. If ownership itself is disputed, block the test and resolve that first.

  3. 3

    Inspect each transition

    Check the Penpot representation, shared-library distribution, inspected output, consumer mapping, and render separately. Record a missing transition instead of skipping to the final screen.

  4. 4

    Test representative conditions

    Observe the states and modes where the role is expected to matter. Include at least one protected surface that should remain unchanged.

  5. 5

    Assign a disposition

    Accept, revise, or block using the criteria at the end of this guide. Name an owner for every unresolved item.

Route failures to the layer that owns them

When the test fails, start at the source and move downstream. This order prevents a local patch from hiding a broken handoff.

  1. Source intent: Is the semantic decision explicit, approved, current, and owned?
  2. Penpot representation: Does the evaluated project represent that decision as recorded?
  3. Library distribution: Did the intended files receive the expected shared asset or update?
  4. Inspected data: Does the inspected object expose the expected role and value under the tested condition?
  5. Consumer implementation: Does each named consumer map to the intended decision rather than a stale or unrelated value?
  6. Local override: Does a component, page, state, or mode replace the shared implementation?
  7. Rendered observation: Under the recorded conditions, did intended surfaces change and protected surfaces remain stable?

Correct the first failed layer with authority over the mismatch. If the source intent is wrong, changing a component patches the wrong decision. If the source and Penpot representation are correct but one application has a local override, changing the shared token may break every correct consumer while leaving the override untouched.

Ambient Sage as a bounded intake example

Ambient Sage is a public Identity Forge kit that can populate the upstream side of the record. Its published artifact includes a 31-color palette, 28 semantic light and dark tokens, Plus Jakarta Sans for heading and body roles, JetBrains Mono for technical strings, a DESIGN.md, and developer-oriented artifacts. The kit also describes a warm-sage surface system with a vivid yellow accent used sparingly.

Token specimen · real values

Ambient Sage

Live render

Ambient Sage's actual tokens — the same values its exports use.

Color tokensSemantic roles with HEX / HSL / CMYK

Color tokens

Ambient Sage
light · HEX · HSL · CMYK

Core

#F3F4EF

background

H 72 · C0, 0, 2, 4

#1A1C17

foreground

H 84 · C7, 0, 18, 89

#E5E6E0

card

H 70 · C0, 0, 3, 10

#ECEEE8

muted

H 80 · C1, 0, 3, 7

#D8D9D2

border

H 68.57 · C0, 0, 3, 15

Brand

#FEE951

primary

H 52.72 · C0, 8, 68, 0

#1A1C17

primary-fg

H 84 · C7, 0, 18, 89

#E5E6E0

secondary

H 70 · C0, 0, 3, 10

#F7E464

accent

H 52.24 · C0, 8, 60, 3

#FEE951

ring

H 52.72 · C0, 8, 68, 0

Semantic

#C0392B

destructive

H 5.64 · C0, 70, 78, 25

#FFFFFF

destructive-fg

H 0 · C0, 0, 0, 0

#2D7238

success

H 129.57 · C61, 0, 51, 55

#C97D12

warning

H 35.08 · C0, 38, 91, 21

#545651

muted-fg

H 84 · C2, 0, 6, 66

Charts

#FEE951

chart-1

H 52.72 · C0, 8, 68, 0

#4A8FD4

chart-2

H 210 · C65, 33, 0, 17

#6BBF8A

chart-3

H 142.14 · C44, 0, 28, 25

#E07498

chart-4

H 340 · C0, 48, 32, 12

#E8A24B

chart-5

H 33.25 · C0, 30, 68, 9

Type scaleHeading, body, and mono in the kit's fonts

Typography

Ambient Sage

Scale: compact-product

Density: balanced

Heading · Plus Jakarta Sans · 1.875rem

Ship beautiful product faster

Subheading · Plus Jakarta Sans · 1.375rem

A warm-sage neutral-surface mobile kit with a single vivid yellow accent, flat tonal cards, and oversized display numerals.

Body · Plus Jakarta Sans · 1rem

Ambient Sage uses a near-white warm-sage canvas (#f3f4ef) with card panels distinguished only by a tonal shift to #e5e6e0, never by shadows or borders. A single vivid yellow (#fee951) is the only saturated color and appears sparingly at component scale as orbs, button fills, and focus rings. Primary data values render as oversized bold hero numerals with a small superscript unit. Typography is a friendly rounded geometric (Plus Jakarta Sans) with no uppercase and no tight tracking, while JetBrains Mono is reserved for hex codes and technical strings. Generous rounding and luminance-only contrast give the whole system a calm, minimal feel.

Mono · JetBrains Mono · 0.8125rem

npx shadcn add ambientsage.json

Aa

Plus Jakarta Sans · Heading

400500600700

Aa

Plus Jakarta Sans · Body

400500600700

ABCDEFGHIJKLM NOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 & @ # % →

Radius & spacingCorner radius, elevation, and spacing steps

Tokens

Ambient Sage primitives
density: balanced

Radius scale

sm · 0.375rem
md · 0.75rem
lg · 1.25rem
xl · 1.75rem

Component radius

button
card
input

Elevation

level 1
level 2
level 3
level 4

Spacing · base 4px

1x
2x
3x
4x
6x
8x
Ambient Sage supplies a concrete upstream system. This specimen doesn't show or imply a Penpot representation.
AMBIENT SAGE INTAKE, SOURCE SIDE ONLY

Source artifact: Ambient Sage, public kit
Source state: verified from published artifact
Semantic color system: 28 light and dark roles
Palette: 31 colors
Heading role: Plus Jakarta Sans
Body role: Plus Jakarta Sans
Mono role: JetBrains Mono
Guidance artifact: DESIGN.md
Additional source coverage: spacing, layout, motifs, and usage guidance

Penpot representation: unresolved
Supported Penpot token types: unresolved
Alias behavior: unresolved
Theme or mode behavior: unresolved
Import or export behavior: unresolved
Shared-library placement: unresolved
Library synchronization: unresolved
Consumer mapping: unresolved
Local overrides: unresolved
Rendered parity: unresolved
Disposition: pending project inspection
A useful example leaves unsupported destination fields unresolved instead of inventing compatibility.

Adjacent workflow, not a shipped integration

Penpot is a third-party design platform. Identity Forge provides upstream design-system artifacts, but the frozen evidence doesn't establish a tested Identity Forge-to-Penpot import, synchronization path, consumer mapping, or rendered parity result.

Accept, revise, or block

The final disposition should describe the evidence record, not confidence in the team or the polish of the preview.

Disposition evidenceScope and next action
AcceptThe source decision is approved and current; the Penpot representation and library ownership are recorded; every intended consumer is named; the controlled change reached those consumers; protected surfaces remained stable; exceptions are approved; and no unresolved item could change the conclusion.Accept only the tested version, states, modes, consumers, surfaces, and conditions. Retain the evidence and owners with the record.
ReviseThe authority chain is understood, but a correctable mapping, library placement, consumer implementation, exception, or record field is incomplete or wrong.Assign the first failed layer to its owner, correct it, and rerun the affected part of the controlled test.
BlockThe source is disputed or unapproved; the evaluated Penpot representation cannot be established; ownership is unknown; consumers cannot be enumerated; protected surfaces changed unexpectedly; or required evidence is missing.Don't compensate with local values or treat the preview as acceptance. Resolve the authority or evidence gap first.
Disposition criteria for a Penpot token handoff

A completed record doesn't certify every future token or every Penpot version. It proves a bounded chain for the decision you tested. Use that chain as the template for the next high-reach change, and keep unsupported mechanics unresolved until current Penpot documentation or direct project inspection supplies the evidence.

Sources

  • Penpot: The open-source design platform for teams: The captured official overview describes Penpot design systems as including native design tokens and shared libraries, and identifies code inspection and open formats including CSS, HTML, SVG, and JSON.
  • Penpot collaboration: The captured collaboration page presents code inspection and API-based customization as parts of Penpot's design and development workflow.
  • Penpot source repository: The public repository exposes Penpot source, project history, issues, releases, and contribution surfaces for direct inspection.
  • Penpot releases: The release page provides versioned Penpot release history that teams can record when evaluating project behavior.
  • Ambient Sage Design Kit: The public Ambient Sage kit documents 28 semantic light and dark tokens, a 31-color palette, Plus Jakarta Sans and JetBrains Mono typography roles, a DESIGN.md, and developer-oriented installation artifacts.