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

# ProtoPie · Design System

> Airy product storytelling with a violet signal

**Theme:** light · **Industry:** design · **Source:** https://www.protopie.io/ · **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._

ProtoPie pairs a restrained white canvas with soft pastel gradients, bold centered headlines, and vivid violet calls to action. Product demonstrations and playful illustrative accents bring warmth to a spacious, feature-led SaaS homepage.

## North star

Keep the page predominantly white and spacious, using soft pastel gradients as occasional atmosphere and violet to mark meaningful actions.

## Overview

The page uses white as its dominant canvas, letting the product narrative breathe while pale lavender, blush, and aqua gradients gently distinguish selected bands. Violet is the clearest brand signal: it appears on primary calls to action, selected links, and small emphasis details rather than overwhelming large surfaces. Typography is strongly hierarchical: bold Figtree headlines anchor centered sections, while Inter handles navigation, body copy, and supporting labels. A handwritten display face appears as a small expressive accent. The layout alternates wide, quiet text-led sections with focused product demos, testimonial media, resource cards, comparison content, and a gallery. Broad whitespace separates these chapters; rounded cards and media containers soften the otherwise clean geometry. Photography and interface captures demonstrate practical product use, while playful 3D-like illustrations add character in promotional areas. The overall effect is polished and approachable, with product clarity taking precedence over decorative complexity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas, navigation background, and clean breathing space around content. |
| Soft Ink | `#181818` | `--color-soft-ink` | neutral | Main headings and prominent navigation text; softer than pure black. |
| Proto Violet | `#8169ff` | `--color-proto-violet` | brand | Primary CTA backgrounds and selected brand accents. |
| Deep Ink | `#000000` | `--color-deep-ink` | neutral | Footer and selected content text, including measured card text. |
| Lavender Mist | `#e9e5ff` | `--color-lavender-mist` | surface | Soft violet section-gradient tint; supports atmospheric transitions rather than dense solid panels. |
| Slate Text | `#474747` | `--color-slate-text` | neutral | Secondary copy and footer text. |
| Quiet Gray | `#636363` | `--color-quiet-gray` | neutral | Low-emphasis footer and supporting text. |
| Vivid Violet | `#6d4ff0` | `--color-vivid-violet` | accent | Emphasized links and text accents. |
| Blush Haze | `#ffece9` | `--color-blush-haze` | surface | Pale pink gradient tint in selected section backgrounds. |
| Lilac Wash | `#f1efff` | `--color-lilac-wash` | surface | Subtle lavender section or promotional background tint. |
| Aqua Veil | `#dff6f6` | `--color-aqua-veil` | surface | Cool aqua tint within soft atmospheric gradient treatments. |
| Muted Silver | `#999999` | `--color-muted-silver` | neutral | Low-priority footer, text, and link details. |
| Coral Blush | `#ffc1b9` | `--color-coral-blush` | accent | Warm gradient accent, mainly atmospheric rather than a primary interface color. |
| Cloud Gray | `#f5f5f5` | `--color-cloud-gray` | surface | Light neutral backing for a measured feature card. |
| Pale Iris | `#e4dfff` | `--color-pale-iris` | surface | Additional pale lavender section tint and gradient detail. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Deep Ink) · `--color-text-muted` → `#181818` (Soft Ink) · `--color-text-subtle` → `#474747` (Slate Text) · `--color-accent` → `#8169ff` (Proto Violet) · `--color-accent-2` → `#6d4ff0` (Vivid Violet) · `--color-accent-3` → `#ffc1b9` (Coral Blush) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#181818` | `#ffffff` | 17.76:1 | AAA |
| `#474747` | `#ffffff` | 9.29:1 | AAA |
| `#8169ff` | `#ffffff` | 3.89:1 | AA-large |

### Gradients

- `radial-gradient(47.72% 108.66% at -12.1% 21.18%, rgba(129, 219, 219, 0.25) 24.27%, rgba(160, 232, 232, 0) 100%), radial-gradient(76.64% 192.13% at 107.15% 116.7%, rgba(255, 178, 167, 0.25) 0%, rgba(201, 191, 255, 0.25) 7`
- `linear-gradient(rgba(227, 222, 255, 0) 0%, rgba(201, 191, 255, 0.4) 17%, rgba(201, 191, 255, 0.4) 30%, rgba(227, 222, 255, 0) 50%)`
- `radial-gradient(62.81% 136.54% at 103.92% 77.32%, rgba(227, 222, 255, 0.7) 0%, rgba(201, 191, 255, 0) 100%), radial-gradient(135.26% 148.52% at -8.82% -4.86%, rgba(255, 178, 167, 0.8) 0%, rgba(255, 178, 167, 0) 100%), no`
- `linear-gradient(0deg, rgba(255, 255, 255, 0) 83.27%, rgb(255, 255, 255) 100%), linear-gradient(rgba(255, 255, 255, 0) 74.58%, rgb(255, 255, 255) 100%), radial-gradient(42% 76.64% at 101.81% 89.92%, rgba(255, 166, 148, 0.`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 700, 500 | Body copy, captions, supporting text, and links. | Inter |
| Figtree | `--font-display` | webfont | 700 | Display and page headings, plus bold navigation labels. | Figtree |
| Palmer Lake Print Regular | `--font-palmer-lake-print-regular` | webfont | 400 | Expressive handwritten-style secondary heading accent. | Caveat |

- **Inter:** Regular body treatment with clear, compact supporting copy; measured weights span 400, 500, 600, and 700.
- **Figtree:** Bold, friendly geometric headlines; navigation uses capitalization styling.
- **Palmer Lake Print Regular:** Use sparingly for a human, informal contrast; measured at regular weight.

### Type scale — Perfect Fourth (ratio ≈ 1.311, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 62px | 700 | 1.29 | 0 | — | Figtree | Large bold hero or section display headlines. |
| h1 | 48px | 700 | 1.3 | 0 | — | Figtree | Primary page headline in the hero. |
| h2 | 32px | 400 | 1.4 | 0 | — | Palmer Lake Print Regular | Expressive handwritten secondary heading accent. |
| h3 | 28px | 700 | 1.4 | 0 | — | Figtree | Bold section headlines and prominent feature titles. |
| h4 | 24px | 400 | 1.4 | 0 | — | Inter | Supporting subsection headings. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Paragraphs, feature descriptions, and general copy. |
| caption | 14px | 400 | 1.4 | 0 | — | Inter | Small labels, notes, and supporting metadata. |
| nav | 16px | 700 | 1.4 | 0 | capitalize | Figtree | Bold primary navigation labels. |
| link | 16px | 400 | 1.5 | 0 | — | Inter | Inline links and secondary calls to action. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

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

Use a centered content frame with a measured maximum width of 1072px, and align most hero and section introductions centrally. The page is comfortable rather than dense: substantial open space separates chapters, with an 8px base spacing system and measured section gaps of 64px. Alternate text-led introductions with wide product media, card groups, and gallery rows. Keep navigation compact and horizontal on desktop, and preserve broad margins around the content frame.

## Shape & elevation

- Radius: button `4px` · card `20px` · media `50%` · nav `4px` · link `12px` · xs `4px` · sm `12px` · md `16px` · lg `18px` · xl `20px` · pill `9999px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.02) 0px 0px 6px 6px`
- Shadow `md` (link, card): `rgba(0, 0, 0, 0.08) 0px 3px 12px 0px, rgba(0, 0, 0, 0.2) 0px 0px 2px 0px`
- Shadow `sm-2` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0) 0px 3px 8px 0px`
- Shadow `sm-3` (card): `rgba(0, 0, 0, 0.01) 0px 0px 3px 8px, rgba(0, 0, 0, 0.12) 0px 0px 4px 0px`

The page is largely flat, with white space and pastel gradients doing most of the separation work. Cards use rounded corners and restrained shadows rather than strong borders. Layer product media and small decorative elements selectively; keep shadows soft and localized so the interface remains light.

## Imagery

Product imagery centers on interface demonstrations: device mockups, software captures, and video-style testimonial media show the prototyping workflow. Supporting sections use gallery previews and small product-related illustrations, including playful dimensional objects. Keep media in clean, rounded containers and allow it to sit against white or softly tinted backgrounds. Use decorative graphics as accents, not as substitutes for clear product evidence.

## Components

### Primary CTA

Compact violet button with a 4px measured radius; use for actions such as free signup and demo requests.

### Top navigation

Single horizontal row with brand mark, grouped navigation links, a text-style signup action, and a prominent demo button.

### Announcement strip

Slim tinted banner above the navigation, with a short message, an emphasized registration link, and a close affordance.

### Hero product demo

Centered bold headline and supporting copy sit above a violet CTA; a broad rounded media area anchors the demonstration.

### Feature card

Rounded content card with generous padding; measured card radius is 20px, with pale neutral backing used for a feature example.

### Resource cards

Three adjacent cards pair concise descriptions and links with illustrative product-related imagery.

### Footer link columns

Multi-column navigation groups use compact headings and muted links, with a subdued utility row beneath.

### Measured component styles

- **Primary button** (“Book a Demo”): background #8169ff · text #0000ee · radius 4px · padding 12px 16px · 400 12px sans-serif
- **Link** (“ProtoPie School Learn ProtoPie the way t”): transparent background · text #0000ee · radius 12px · padding 0px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.08) 0px 3px 12px 0px, rgba(0, 0, 0, 0.2) 0px 0px 2px 0px
- **Card** (“Alex Therrien Director of User-Centered ”): transparent background · text #000000 · radius 20px · padding 32px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.02) 0px 0px 6px 6px
- **Navigation item** (“Solutions Resources Features Pricing Dow”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Keep the main canvas white and uncluttered.
- Reserve violet for primary actions and meaningful emphasis.
- Use pale gradients to softly distinguish selected sections.
- Center hero and section introductions.
- Give product demonstrations room to breathe.
- Use bold Figtree for headlines and Inter for supporting copy.

## Don't

- Do not turn the page into a dark interface.
- Do not fill every section with a colored background.
- Do not use violet as a large, dominant page field.
- Do not crowd product media with decorative elements.
- Do not introduce heavy borders or dramatic shadows.
- Do not apply the handwritten typeface to long body copy.

## Agent prompt

Build a new page in ProtoPie’s airy product-storytelling style. Use Gallery White (#ffffff) as the dominant canvas, with Soft Ink (#181818) headlines and readable Inter supporting copy. Set large, friendly headings in bold Figtree and reserve the handwritten accent for brief expressive moments. Make Proto Violet (#8169ff) the clear primary-action color, using Vivid Violet (#6d4ff0) for select links. Add Lavender Mist (#e9e5ff), Lilac Wash (#f1efff), Blush Haze (#ffece9), or Aqua Veil (#dff6f6) as restrained gradient atmosphere, not dense panels. Center section introductions in a broad content frame, separate chapters with generous whitespace, and pair concise copy with clear product captures or demonstrations. Favor rounded media and cards, soft shadows, and a compact desktop navigation. Keep illustration playful but subordinate to product clarity.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | White footer with six link columns, followed by a compact utility and language row. | Grouped navigation, Language selector, Social links | Multi-column link lists, Muted legal text, Compact icon row |

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