---
name: Penpot
description: "A strong example of a modern, dark-themed SaaS design system tool with a clear focus on collaboration and developer-friendly features."
version: alpha

colors:
  background: "#151035"
  primary: "#FAFAFA"
  secondary: "#EEEEEE"
  tertiary: "#14CECA"
  neutral: "#EEEEEE"
  bg-soft: "#1C124B"
  line: "rgba(255, 255, 255, 0.15)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 72px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 52px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-2px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  tiny:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 500
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

An open-source design platform for teams that need scalable collaboration.

*An open-source Figma alternative focused on team collaboration and scalable design systems.*

## Colors

High-contrast dark theme with a single vibrant teal accent for primary actions.

- **Background (`#151035`)** — uses `bg` token
- **Primary text (`#FAFAFA`)** — uses `ink` token
- **Secondary text (`#EEEEEE`)** — uses `ink-soft` token
- **Accent (`#14CECA`)** — uses `accent` token
- **Muted (`#EEEEEE`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.15)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* A consistent 4px grid system is used for all spacing, padding, and sizing.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 100px

## Components

- **button:** Pill-shaped buttons with high contrast (teal background with dark text, or dark background with white text/border).
- **card:** Dark containers with subtle borders, often featuring rounded corners and internal padding.
- **chip:** Small, pill-shaped tags or badges used for status or categories.
- **input:** Dark-themed input fields with subtle borders and light text.
- **hero:** A full-width, dark-background section featuring a large, bold headline, descriptive text, and prominent call-to-action buttons.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```