What is Penpot’s primary brand color and where does it appear?

Penpot’s primary brand color is the cyan #14ceca. It is applied to primary call‑to‑action buttons, the hover state of navigation icons, and accent borders on interactive cards. The token is referenced as {colors.primary} throughout the component definitions, ensuring a single source of truth for the brand accent across the UI.

How does the typography system scale across headings and body text?

The typography system uses a modular scale anchored by Work Sans. Display‑xxl at 72px and display‑xl at 52px set the visual hierarchy, while heading‑lg at 48px and heading‑md at 24px provide intermediate steps. Body‑lg (18px) and body‑md (16px) serve paragraph content, and body‑sm (14px) is used for secondary copy. Each token includes explicit line‑height and letter‑spacing values, allowing designers to maintain vertical rhythm without manual adjustments.

What is the purpose of the “Hairline‑as‑elevation” principle in Penpot’s design?

Hairline‑as‑elevation treats the 1 px border tone #d3d3d3 as a subtle elevation cue rather than a heavy divider. By applying this hairline to card outlines, input fields, and modal borders, the system creates a sense of depth without relying on shadows, which aligns with Penpot’s lightweight, performance‑focused ethos. The principle is reflected in the {colors.hairline} token and is consistently used across the component library.

How are spacing tokens derived and applied in the component library?

Spacing tokens are extracted from the site’s CSS where values such as 8px, 12px, 16px, 20px, 32px, and larger increments appear most frequently. Each token is named by its size key (e.g., {spacing.sm} = 8px, {spacing.md} = 16px) and is used for padding, margin, and gap properties in components like buttons, cards, and modals. This approach guarantees consistent whitespace while allowing designers to adjust the scale centrally.

What is the recommended workflow for developers to consume Penpot’s design tokens?

Developers should import the JSON file into their build process, generate CSS‑variables or Tailwind configuration from the token objects, and reference them directly in component code. For example, a button can use background: var(--colors-primary); border-radius: var(--rounded-md); padding: var(--spacing-md). The token map is also compatible with AI‑assisted coding tools such as Claude, Cursor, and Copilot, which can autocomplete token references during development.

Penpot Design System

Penpot’s design system uses the cyan accent #14ceca and the Work Sans typeface across a light #fafafa canvas and dark #151035 ink, delivering a cohesive token set for open‑source…

About Penpot DESIGN.md

Curated by Dov AzencotUpdated May 14, 2026Source penpot.app

Design & Creative Tools

Penpot’s live interface opens on a near‑white canvas (#fafafa) framed by dark ink (#151035) for headings and body copy, while the brand accent cyan (#14ceca) highlights primary actions, navigation icons, and interactive states. The typography hierarchy is anchored by a 72px Work Sans display headline, followed by 52px and 48px headings, and a consistent 16px body baseline, all rendered with a line‑height of 1.5 and normal letter‑spacing. This visual language avoids gratuitous ornamentation, focusing instead on clear information hierarchy and collaborative tooling cues.

Inside this DESIGN.md file you will find 16 color tokens grouped into primary, ink, canvas, hairline, body, muted, surface‑dark, success, warning, error, link, and several accent shades; 10 typography tokens ranging from display‑xxl to caption; 6 rounded values from none to full; a spacing scale covering nine incremental steps from 8px to 48px; and 15 component definitions that cover buttons, cards, modals, inputs, badges, avatars, tooltips, dropdowns, tables, and navigation links. The token set follows the Google Labs spec for design token naming and is ready for export to Tailwind, CSS‑variables, or direct consumption by Claude, Cursor, and Copilot.

To use the file, import the JSON into your build pipeline, map the token references (e.g., {colors.primary}, {typography.body-md}) to your styling framework, and reference the rounded and spacing values in component props. The system’s emphasis on token consistency and open‑source accessibility makes Penpot a valuable case study for teams seeking a transparent, extensible design language that scales from prototype to production.

What makes it distinct

Primary chromatic accentthe cyan #14ceca appears on CTA buttons, header highlights, and interactive icons, establishing brand identity across the UI.
Dominant text toneink #151035 powers headings, body copy, and form labels, ensuring legibility against both light and dark surfaces.
Border definitionhairline #d3d3d3 is used for 1 px dividers, input outlines, and card edges, providing subtle visual separation without visual noise.
Success signalingthe green #b7eb8f token marks positive feedback badges, progress bars, and validation messages, reinforcing user confidence.

Live at penpot.app

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

penpot.app

Explore Penpot

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Penpot design system FAQ

Common questions about Penpot's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Penpot — official site

Penpot's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.