---
title: "Penpot design system"
variant: extended
source: https://penpot.app/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/penpot-app)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Penpot · Design System

> Open design, with a quietly confident canvas.

**Theme:** light · **Industry:** design · **Source:** https://penpot.app/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Penpot’s homepage pairs a pale, spacious canvas with deep ink typography and vivid teal calls to action. Large product-interface previews anchor an editorial sequence of design, AI, systems, and code capabilities, ending in a dark, information-rich footer.

## North star

Keep the pale canvas and ink typography calm, letting product previews and teal actions provide the page’s strongest visual emphasis.

## Overview

The visual strategy is built around a very pale blue-white canvas (#f5f8fb) and deep indigo ink (#151035), creating a quiet, legible stage for product imagery. Teal (#14ceca) is reserved for high-intent actions, while outlined secondary buttons keep the interface restrained. A centered hero uses an oversized, lightweight Work Sans headline, compact supporting copy, and paired calls to action above a broad product screenshot. The page continues as a long, centered sequence of capability sections, with generous breathing room and subtle gradient washes rather than heavy background blocks. Product previews are large, framed interface compositions that carry most of the visual complexity; section titles and small labels remain simple and clear. Thin gray dividers separate later sections, while a deep indigo footer provides a strong closing contrast and organizes many links into columns. Overall, the page balances open-source product credibility with approachable, contemporary SaaS polish.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Penpot Ink | `#151035` | `--color-penpot-ink` | brand | Primary text, navigation, outlined button text, and the deep indigo footer surface. |
| Cloud Canvas | `#f5f8fb` | `--color-cloud-canvas` | surface | Main page canvas and light text against the dark footer. |
| Lilac Haze | `#e5d3fd` | `--color-lilac-haze` | semantic | A soft gradient wash behind selected section areas, not a dominant solid brand surface. |
| Display Black | `#000000` | `--color-display-black` | surface | Dark product-preview content and occasional high-contrast heading or card details. |
| Action Teal | `#14ceca` | `--color-action-teal` | accent | Primary filled CTA backgrounds, paired with dark ink text. |
| Divider Gray | `#d1d5db` | `--color-divider-gray` | neutral | Subtle separators and hairline borders between page areas. |
| Quiet Slate | `#6b7280` | `--color-quiet-slate` | neutral | Muted text and secondary interface details where reduced emphasis is needed. |
| Frosted Aqua | `#e0f5f6` | `--color-frosted-aqua` | semantic | Pale aqua gradient detail in section atmosphere, rather than a core control color. |
| Soft Rule | `#e5e7eb` | `--color-soft-rule` | neutral | Occasional low-contrast borders and dividers. |
| Pure White | `#ffffff` | `--color-pure-white` | surface | Minor light footer details; not the primary page canvas. |

### Semantic aliases

`--color-canvas` → `#f5f8fb` (Cloud Canvas) · `--color-surface` → `#151035` (Penpot Ink) · `--color-surface-2` → `#000000` (Display Black) · `--color-text` → `#151035` (Penpot Ink) · `--color-text-muted` → `#f5f8fb` (Cloud Canvas) · `--color-border` → `#d1d5db` (Divider Gray) · `--color-accent` → `#14ceca` (Action Teal) · `--color-on-accent` → `#151035` (Penpot Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151035` | `#f5f8fb` | 17.02:1 | AAA |
| `#151035` | `#000000` | 1.16:1 | fail |
| `#f5f8fb` | `#151035` | 17.02:1 | AAA |
| `#f5f8fb` | `#000000` | 19.7:1 | AAA |
| `#14ceca` | `#f5f8fb` | 1.84:1 | fail |
| `#14ceca` | `#151035` | 9.25:1 | AAA |
| `#14ceca` | `#000000` | 10.71:1 | AAA |

### Gradients

- `radial-gradient(40% 39% at 50% 2%, rgba(42, 211, 207, 0.08), rgba(245, 248, 251, 0))`
- `radial-gradient(50% 60% at 50% 100%, rgba(206, 159, 255, 0.41) 0%, rgba(250, 250, 250, 0) 100%)`
- `radial-gradient(40% 60% at 51% 91%, rgba(42, 211, 207, 0.1), rgba(86, 185, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Work Sans | `--font-body` | webfont | 400, 500, 700, 600 | All page typography, including navigation, hero and section headings, body copy, buttons, and footer links. | Inter |

- **Work Sans:** Use a clean sans-serif voice with mostly regular-weight headings, medium body and navigation, and selective bold emphasis; keep casing natural.

### Type scale — Augmented Fourth (ratio ≈ 1.456, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1.2 | 0 | — | Work Sans | Oversized hero statement and other prominent page messaging. |
| h1 | 65px | 400 | 1.2 | 0 | — | Work Sans | Primary hero heading and top-level page message. |
| h2 | 48px | 400 | 1.2 | 0 | — | Work Sans | Capability-section headings such as design, AI, systems, and code. |
| h3 | 20px | 400 | 1.5 | 0 | — | Work Sans | Supporting feature or subsection headings. |
| body | 16px | 500 | 1.5 | 0 | — | Work Sans | Hero support copy, section descriptions, and standard interface text. |
| caption | 12px | 500 | 1.5 | 0 | — | Work Sans | Compact labels and small supporting metadata. |
| nav | 16px | 500 | 1.5 | 0 | — | Work Sans | Main navigation links and menu labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 32, 48 px.
- Section rhythm 64px · element gap 8px · card padding — · max content width 1200px.

A centered, single-page sequence sits within a measured 1200px maximum-width framework. The hero aligns its announcement, heading, copy, and CTAs on the center axis, then gives a wide product preview substantial room. Capability sections follow one another vertically with generous section rhythm, centered titles, concise copy, and broad media. Thin dividers distinguish later content without breaking the light canvas. The footer switches to a dense multi-column link layout.

## Shape & elevation

- Radius: button `8px` · nav `8px` · xs `8px` · sm `10px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s ease` on interactive elements.

The page is mostly flat: pale canvas, minimal borders, and no prominent shadows in the measured styles. Use thin gray rules to separate sections and rounded outlines for secondary actions. Product screenshots create their own depth through layered interface panels and in-product contrast; avoid adding heavy cards or decorative elevation around them.

## Imagery

Large, full-color product-interface compositions are the main visual assets. They show Penpot’s editor alongside detailed design or code examples, with dark tool panels contrasting against colorful in-product artwork. Keep previews wide and prominent, with clean edges and restrained framing. Supporting illustrations and interface details should feel like authentic product material, not decorative stock photography.

## Components

### Top navigation

Brand mark and product, community, resources, and pricing links sit opposite login and signup actions on a light canvas.

### Announcement pill

A compact outlined, rounded message above the hero links to the open MCP Server.

### Hero

Centered oversized headline, short supporting paragraph, two adjacent CTAs, and a wide product preview below.

### Primary CTA

Filled Action Teal (#14ceca) button with Penpot Ink (#151035) text and a rounded rectangle shape.

### Secondary CTA

Light or transparent button with a thin Penpot Ink (#151035) outline and rounded corners.

### Capability section

Centered section heading and concise description above a large product image; subtle rules divide later sections.

### Footer

Deep Penpot Ink (#151035) surface with light text, compact multi-column navigation, and a lower utility row.

### Measured component styles

- **Primary button** (“Contact Sales”): background #14ceca · text #151035 · radius 8px · padding 12px 20px · 400 16px Work Sans
- **Secondary button** (“Sign up for free”): transparent background · text #151035 · border 1px solid #151035 · radius 8px · padding 12px 20px · 400 16px Work Sans
- **Link** (“Any agent can design in Penpot. Try our ”): transparent background · text #151035 · radius 0px · padding 8px 24px · 500 16px Work Sans
- **Card**: background #fafafa · text #151035 · radius 0px · padding 0px · 400 16px Work Sans
- **Navigation item** (“Product Community Resources Pricing Log ”): transparent background · text #151035 · radius 0px · padding 0px · 400 16px Work Sans

## Do

- Use Cloud Canvas (#f5f8fb) as the primary page background.
- Set important text in Penpot Ink (#151035).
- Reserve Action Teal (#14ceca) for prominent primary actions.
- Center hero and capability-section introductions.
- Let product-interface imagery carry visual complexity.
- Use dividers and whitespace instead of heavy card treatments.

## Don't

- Do not make teal a large background color.
- Do not use a dark canvas across the main page.
- Do not crowd the hero with extra copy or controls.
- Do not wrap every section in a raised card.
- Do not substitute generic stock photos for product previews.
- Do not make headings bold and heavy throughout.

## Agent prompt

Build a new Penpot-style page on a Cloud Canvas (#f5f8fb), using Penpot Ink (#151035) for navigation and headlines. Use Work Sans or a close sans-serif substitute, with regular-weight large headings, medium-weight supporting text, and selective bold emphasis. Center the hero introduction and pair a filled Action Teal (#14ceca) primary button with a lightly outlined secondary button. Place a wide, detailed product-interface preview beneath the hero, then continue through clearly separated capability sections with short centered introductions and generous breathing room. Use Lilac Haze (#e5d3fd) and Frosted Aqua (#e0f5f6) only as subtle gradient atmosphere. Keep borders thin, avoid heavy shadows and card framing, and finish with a deep ink footer and organized link columns.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long, centered page sequence: navigation and hero lead into capability showcases, a logo strip, and a contrasting multi-column footer. | Primary and secondary CTAs, Announcement link, Capability navigation links | Centered hero typography, Wide product previews, Subtle section dividers, Dark footer |

## Source CSS custom properties (selected)

```css
--font-size-00: 0.5rem;
--font-size-0: 0.75rem;
--font-size-1: 1rem;
--font-size-2: 1.1rem;
--font-size-3: 1.25rem;
--font-size-4: 1.5rem;
--font-size-5: 2rem;
--font-size-6: 2.5rem;
--font-size-7: 3rem;
--font-size-8: 3.5rem;
--primary: rgba(49,239,184,1);
--border-radius: 12px;
--foreground-rgb: 0,0,0;
--background-start-rgb: 214,219,220;
--background-end-rgb: 255,255,255;
--secondary-glow: radial-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
--tile-border: conic-gradient(#00000080,#00000040,#00000030,#00000020,#00000010,#00000010,#00000080);
--callout-border-rgb: 172,175,176;
--card-border-rgb: 131,134,135;
--antd-colorPrimary: #1677ff;
--antd-colorSuccess: #52c41a;
--antd-colorWarning: #faad14;
--antd-colorError: #ff4d4f;
--antd-colorInfo: #1677ff;
--antd-colorLink: #1677ff;
--antd-colorTextBase: #151035;
--antd-colorBgBase: #ffffff;
--antd-fontFamily: Work Sans;
--antd-fontFamilyCode: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--antd-fontSize: 16px;
--antd-motionEaseOutCirc: cubic-bezier(0.08, 0.82, 0.17, 1);
--antd-motionEaseInOutCirc: cubic-bezier(0.78, 0.14, 0.15, 0.86);
--antd-motionEaseOut: cubic-bezier(0.215, 0.61, 0.355, 1);
--antd-motionEaseInOut: cubic-bezier(0.645, 0.045, 0.355, 1);
--antd-motionEaseOutBack: cubic-bezier(0.12, 0.4, 0.29, 1.46);
--antd-motionEaseInBack: cubic-bezier(0.71, -0.46, 0.88, 0.6);
--antd-motionEaseInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--antd-motionEaseOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
--antd-borderRadius: 6px;
--antd-colorText: rgba(21, 16, 53, 0.88);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/penpot-app