# Penpot · Design system migration spec

> Source: https://penpot.app  ·  Curated by OpenDesign  ·  en

> A strong example of a modern, dark-themed SaaS design system tool with a clear focus on collaboration and developer-friendly features.

## 1. Identity DNA

The design system for Penpot is structured like a well-laid open workshop: every tool and material has a designated place, and the framework itself is open for contribution. It’s a system built not just for a product, but for a community of collaborators, mirroring the platform’s core promise of scalable, shared design.

**One-liner:** An open-source design platform for teams that need scalable collaboration.
**Keywords:** open-source · collaboration · design platform · scalable · full-stack
**Analogy:** An open-source Figma alternative focused on team collaboration and scalable design systems.

## 2. Color

The palette is an exercise in focused contrast. A deep, near-black indigo provides the vast workspace, while a single, luminous teal serves as the beacon for all primary interaction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#151035` | main background |
| `--bg-soft` | `#1C124B` | card background |
| `--ink` | `#FAFAFA` | body text |
| `--ink-soft` | `#EEEEEE` | secondary text |
| `--muted` | `#EEEEEE` | placeholder |
| `--accent` | `#14CECA` | single accent |
| `--line` | `rgba(255, 255, 255, 0.15)` | divider |

**Color principle:** High-contrast dark theme with a single vibrant teal accent for primary actions.

The principle is strict chromatic discipline—one accent, unlimited utility.

## 3. Typography

Typography speaks with a clear, humanist sans-serif voice, maintaining a consistent personality from the largest headline to the smallest label. The choice of Work Sans at every scale reinforces a unified, tool-like clarity.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.2 | 500 | -2px | Main hero headlines |
| heading | 52px | 1.2 | 500 | -2px | Secondary section headings |
| body | 18px | 1.5 | 400 | 0px | General body text and descriptions |
| small | 16px | 1.5 | 400 | 0px | UI elements, navigation, and footer links |
| tiny | 12px | 1.5 | 500 | 0px | Labels and metadata |

## 4. Spacing

A consistent 4px grid establishes the fundamental rhythm for all spatial relationships.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px grid system is used for all spacing, padding, and sizing.

## 5. Surfaces

Depth is communicated through absence and subtle division, not shadow. The interface flattens onto the deep background, relying on fine, translucent borders to articulate structure.

- **Radius:** sm 4px · md 8px · lg 12px · pill 100px
- **Shadows:**
  - elevation-1: none
  - elevation-2: none
- **Borders:** Subtle 1px borders in rgba(255, 255, 255, 0.15) or matching background colors are used for structural separation.

## 6. Layout

The layout skeleton is a single, centered column, creating a focused reading and working corridor. Content lives within a defined maximum width, ensuring legibility and control regardless of screen size.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A centered, single-column layout with a maximum width container for content.

## 7. Motion & Interaction

Motion is used to confirm state changes, not to decorate. All transitions are smooth and continuous, applied to background, transform, and opacity properties to create a fluid, responsive feel.

- **Durations:** micro 100ms · small 200ms · medium 1000ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Smooth transitions on background and transform properties.
  - Subtle opacity changes for interactive states.

- **Hover:** Background colors shift slightly, and text colors may change to indicate interactivity.
- **Click:** Immediate visual feedback through color change or subtle transform.
- **Transition:** Smooth background and transform transitions over 100ms to 1s.
- **Keyboard:** Standard focus states for navigation and interactive elements.

## 8. Voice & Don'ts

The editorial voice is professional and direct, favoring clear statements about capability and collaboration over marketing hyperbole. It guides with action-oriented clarity, avoiding ambiguity and passive construction.

- **Tone:** Professional, confident, and collaborative.
- **Headline style:** Bold, direct statements emphasizing empowerment and teamwork.
- **CTA style:** Clear, action-oriented phrases like 'Sign up, it's free' or 'Self-host install'.
- **Avoid:** Vague or overly technical jargon without context. / Aggressive or salesy language. / Passive voice.

### Don'ts
- ❌ Don't use a light theme — the screenshot shows a consistent, deep dark background (#151035).
- ❌ Don't use a serif font for headings — the screenshot shows a humanist sans-serif (Work Sans) throughout.
- ❌ Don't use multiple competing accent colors — the screenshot shows a single, dominant teal (#14CECA) for emphasis.
- ❌ Don't use sharp, rectangular corners on buttons or cards — the screenshot shows rounded corners (8px-12px) or pill shapes.
- ❌ Don't use complex, multi-colored gradients for backgrounds — the screenshot shows a solid dark background with subtle gradients only in specific UI mockups.
- ❌ Don't use heavy, decorative typography — the screenshot shows clean, highly legible humanist sans-serif fonts.

The system deliberately avoids light themes, decorative typography, and competing accents to preserve its focused, tool-centric identity.

## System Prompt (paste into AI tool)

```
This is the website for Penpot, an open-source design platform. It uses a dark mode theme with a deep indigo (#151035) background and white (#FAFAFA) text. A single, vibrant teal (#14CECA) is used as the primary accent color for calls-to-action. The typography is a clean, humanist sans-serif (Work Sans) across all scales. Layouts are centered and spacious. Do not use a light theme, multiple accent colors, or serif fonts. Avoid heavy gradients and sharp, rectangular corners on interactive elements.
```