프로토파이 DESIGN.md

Design System Inspiration of ProtoPie

Overview

Visual Theme & Atmosphere

ProtoPie (프로토파이) is the interaction prototyping tool made by Studio XID; its terms of service are issued by Studio XID Korea Inc. and Studio XID, Inc., and the site footer reads "© 2026 Studio XID". The product lets designers build prototypes that behave like the finished thing — multi-device prototyping, interaction logic, hardware and system integration, developer handoff — and sells into automotive, aviation, finance, gaming, MedTech, IoT and digital products. Its current evolution is the AI turn: the site's title changed from "ProtoPie: Interactive Prototyping Tool" (July 2026) to "ProtoPie: AI-driven Prototyping Platform", the hero now claims "#1 AI-driven advanced prototyping platform", and the feature menu adds ProtoPie AI (New) and ProtoPie MCP alongside hardware integration (Beta). The Korean site at /ko still calls it "인터랙티브 프로토타이핑 툴". Around the product sit ProtoPie School, the ProtoPioneers community and a prototype gallery.

The website is a Framer build with one violet doing the work. #8169ff fills every primary action — Book a Demo in the header of every page, the 53px hero and section buttons, Subscribe Now — and marks the selected industry tab and filter chip; hover darkens it to #5b3ee0. Headlines are set in Figtree Bold (700) in near-black #181818, and body copy in Inter, stepping down through #373737, #474747 and #999999. A handwritten face, Palmer Lake Print, adds violet #6d4ff0 annotations beside the feature rows. Geometry is tight — 4px buttons, 12px and 16px cards — and depth is kept to one soft two-layer shadow on the resource cards.

Key Characteristics:

• One violet: #8169ff for every primary action, the selected industry tab and the selected filter chip; hover #5b3ee0
• Figtree Bold 700 for all headlines (62px hero, 48px sections), Inter for reading copy and button labels
• Handwritten Palmer Lake Print annotations in #6d4ff0 at 48px
• 4px-radius buttons in four forms: filled, text, ghost that fills on hover, and white with a violet label
• Near-black ink #181818 rather than pure black; greys #373737, #474747, #999999
• Flat pages except the resource cards, which carry a soft two-layer shadow that spreads on hover

Primary tasks

• Turn an interaction idea into a working prototype without writing production code
• Prototype across devices and connect real hardware and system inputs
• Generate interactions with AI and hand clean specs to developers
• Compare the plans before subscribing or booking a demo
• Learn prototyping through ProtoPie School and the community

Brand Narrative

ProtoPie's pitch has always been fidelity: prototypes that respond to real sensors, devices and logic instead of click-through mockups. The site's feature menu names that craft directly — Interaction Logic, Multi-Device Prototyping, Hardware & System Integration, Developer Handoff — and its industry menu shows where fidelity matters most: automotive, aviation, finance, gaming, MedTech and IoT.

In 2026 the story turned to AI. Between the July record and this capture the site title changed to "AI-driven Prototyping Platform" and the hero to "#1 AI-driven advanced prototyping platform", with ProtoPie AI marked New and a ProtoPie MCP entry. The lead frames the stance: AI should generate interactions but not guess the designer's intent, and the output should be clean specs a developer can build. The Korean site keeps the original description, 인터랙티브 프로토타이핑 툴.

Around the tool, Studio XID invests in teaching and community — ProtoPie School, the ProtoPioneers community, a prototype gallery and a /discover page of featured makers. The website's design follows the product's discipline: one violet for every action, Figtree headlines, handwritten notes where a designer would scribble them, and very little chrome.

Principles

1. Fidelity is the point. UI implication: let prototypes, videos and product shots carry the page; keep chrome flat.
2. One action colour. UI implication: #8169ff for actions and selection only; hover darkens to #5b3ee0. (An editorial reading of the captured pages.)
3. AI serves intent. "Don't let AI guess your intent." UI implication: present AI as a tool the designer steers, with clear controls.
4. Speak to makers. UI implication: name capabilities concretely (hardware, logic, handoff).
5. Annotate like a designer. UI implication: handwritten violet notes explain features in place. (Editorial.)

Personas

Personas below are fictional archetypes informed by publicly observable ProtoPie user segments (product and interaction designers, automotive HMI teams, design students), not individual people.

박서연, 30, 서울. A product designer who prototypes micro-interactions before handoff and wants stakeholders to feel the real behaviour.

Marcus Lindqvist, 38, Gothenburg. An automotive HMI designer who needs prototypes that respond to real hardware inputs.

Priya Nair, 27, Bangalore. A design student learning high-fidelity prototyping through ProtoPie School and the community.

Colors

Every token below was read on 2026-09-30 from protopie.io, /discover and /plans by the deterministic collector, and state values by the fixed keyboard probe. The tokens describe ProtoPie's public website; the ProtoPie Studio and Cloud apps were not captured.

Primary

• ProtoPie Violet (#8169ff): The fill of Book a Demo in the header of all three captured pages (the same 134 × 40 fill recorded 3 times across the three surfaces), of the hero's Get started for free and of every 53px section button, and the fill of the selected industry tab and the selected /plans filter chip. It is the primary because it is the only saturated colour the product surfaces use in primary roles: primary action fill, selected state and link label.
• Violet Hover (#5b3ee0): The settled hover and pressed fill of the violet buttons and the hover label of the text, white and navigation items (probe, transition: all 0s).
• On Primary (#ffffff): Labels on violet.

Accent

• Annotation Violet (#6d4ff0): The handwritten Palmer Lake Print notes beside the feature rows on home. It is decoration, not an action colour.

Neutral & Surface

• White (#ffffff): The page canvas (the body computes #ffffff) and the white plan button.
• Surface (#fafafa): The featured prototype cards on /discover.

Text

• Ink (#181818): Headlines, navigation labels and the home hero lead.
• Body (#373737): The /discover lead and the footer.
• Muted (#474747): Resource card descriptions and prototype tags.
• Faint (#999999): The design-tool survey line on home and footer notes.
• Footer links also render in #636363; it is kept out of the tokens because its captured element was not pinned.

Brand assets, not tokens

• The ProtoPie logo was not measured; no logo colour is claimed.
• Plan-specific text colours on /plans (a green #156534, a brown #613f00, a red #fa5650) each label a single plan detail and are not roles.

Typography

Font Family

• Live surface use: Inter (685 observed uses, loaded / high) for body copy, lists and button labels; Figtree (83, loaded / high) for h1–h4, navigation labels and plan headers; Palmer Lake Print Regular (20, loaded / high) for the handwritten annotations. The bundle records no source URLs for them, so how each is served was not established. The body element computes a 12px sans-serif default.
• Official distributed font assets: Figtree is published by the Figtree Project Authors (github.com/erikdkennedy/figtree) under the SIL Open Font License 1.1, and Inter by the Inter Project Authors (github.com/rsms/inter) under the same licence; both licence files were opened on 2026-09-30. No licence for Palmer Lake Print was opened, so its licence is not stated. Identification rests on the family names.
• Official product use: no ProtoPie page opened this session names its typefaces, so no statement of official product use is made.
• Declared only (no visible use): Gilroy Bold, Gilroy ExtraBold and Gilroy SemiBold (the June record's display face), General Sans, Inter Variable, Atkinson Hyperlegible Mono, Fragment Mono, Edu QLD Hand, Noto Sans, Noto Sans KR and Noto Sans SC (Google Fonts URLs declared), with 0 observed uses, plus the Placeholder fallbacks.
• Unresolved: none of the observed families is unidentified.

Hierarchy

Principles

• Figtree for voice, Inter for information: every heading and the navigation are Figtree 700; reading copy and all button labels are Inter.
• A 1.4 rhythm: most roles from 14px to 36px sit on a 1.4 line height; the hero opens up to 1.29 at 62px.
• Handwriting as annotation: Palmer Lake Print appears only as violet notes, never as a heading.

Layout

Spacing System

• 53px buttons: 14px 16px padding; 40px and 46px buttons: 12px 16px; 32px buttons: 6px 16px
• Header items: 4px 20px padding in a 60px sticky header
• Prototype cards: 25px 30px 33px
• Frequent spacing values in the capture: 16, 20, 4, 10 and 14px

Grid & Container

• Content sits in a 1200px column under a sticky 1200 × 60 header.
• Home runs a centred hero (62px headline, 24px lead, one violet button), tool-integration icons, a dark industry band with tabs, feature rows annotated by hand, a testimonial row, three resource cards, the gallery and a closing call to action.
• /plans sets plan cards side by side under a billing toggle, then a filtered feature comparison; /discover alternates featured prototype cards with maker stories.

Whitespace Philosophy

• Colour as emphasis: sections stay white and ink; the violet appears only on actions and selection.
• Mostly flat: only the resource cards lift off the page.

Border Radius Scale

• 0px: the default (874 of the recorded radii)
• 4px: buttons and industry tabs
• 12px: resource cards
• 16px: prototype cards
• 100px: filter chips

Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop viewport was captured. No breakpoint value was measured.

Touch Targets

• Section buttons: 53px
• Filter chips: 44px
• Header buttons: 40px
• Small buttons: 32px
• Header items: 60px cells
• Industry tabs: 106 × 81

Collapsing Strategy

• How the pages collapse was not captured.

Image Behavior

• Product shots and prototype videos sit flat inside the page; only the resource cards carry a shadow.

Elevation & Depth

Shadow Philosophy: of the 953 recorded elements, only the three resource cards carry a visible shadow (the integration icons compute fully transparent shadow layers). Emphasis otherwise comes from the violet.

Motion & Easing

Every probed control computes transition: all 0s ease 0s, and the probe read settled values after 900ms. The collector's immediate focus and pressed frames caught intermediate violets (#7f67fd, #7e66fc, #7a62f9, #8068fe) between #8169ff and #5b3ee0, which shows that Framer animates these changes in script; no duration or easing was measured, so none is declared.

Components

Buttons

Primary button

• Background: #8169ff
• Text: #ffffff
• Radius: 4px
• Padding: 14px 16px
• Height: 53px
• Font: 18px / 600 / 25.2px Inter
• Hover: background #5b3ee0
• Pressed: background #5b3ee0
• States: focus draws only the browser default ring
• Use: Get started for free, Read Comparison, Explore Gallery, Subscribe Now

Header button

• Background: #8169ff
• Text: #ffffff
• Radius: 4px
• Padding: 12px 16px
• Height: 40px
• Font: 16px / 600 / 22.4px Inter
• Hover: background #5b3ee0
• Pressed: background #5b3ee0
• Use: Book a Demo in the header of every page

Small button

• Background: #8169ff
• Text: #ffffff
• Radius: 4px
• Padding: 6px 16px
• Height: 32px
• Font: 14px / 600 / 19.6px Inter
• States: rest only; not probed at this size
• Use: Request Demo on the dark band; Get Started, Subscribe and Chat with Us on /plans

Text button

• Background: transparent
• Text: #8169ff
• Radius: 4px
• Height: 40px
• Font: 16px / 600 / 22.4px Inter
• Hover: label #5b3ee0
• Pressed: label #5b3ee0
• Use: Start for Free in the header

Ghost button

• Background: transparent
• Text: #8169ff
• Radius: 4px
• Padding: 14px 16px
• Height: 53px
• Hover: background #8169ff, label #ffffff
• Pressed: the same as hover
• Use: View All Prototypes and Learn More on /discover, Get Started on the /plans Free card

White button

• Background: #ffffff
• Text: #8169ff
• Radius: 4px
• Padding: 14px 16px
• Height: 53px
• Hover: label #5b3ee0
• Pressed: label #5b3ee0
• Use: Learn More on a /plans card

Tabs & Navigation

Header navigation item

• Text: #181818
• Padding: 4px 20px
• Height: 60px
• Font: 16px / 700 / 22.4px Figtree
• Hover: label #5b3ee0
• Pressed: label #5b3ee0
• Use: Solutions, Resources, Features, Pricing, Download

Industry tab

• Background: rgba(122, 100, 255, 0.35)
• Radius: 4px
• Size: 106 × 81
• Selected: background #8169ff
• Hover: background rgba(122, 100, 255, 0.5)
• Pressed: the same as hover
• States: the selected tab does not change
• Use: industry switcher on the dark band of home

Filter chip

• Background: #ffffff
• Radius: 100px
• Padding: 10px 24px
• Height: 44px
• Selected: background #8169ff with a 1px #8169ff border
• Hover: opacity 0.8
• Pressed: opacity 0.8
• Use: All, Essentials, Collaboration, Security, Support, Add-ons on /plans

Cards

Resource card

• Background: rgba(255, 255, 255, 0.2)
• Text: #181818
• Radius: 12px
• Shadow: rgba(0, 0, 0, 0.08) 0px 3px 12px 0px, rgba(0, 0, 0, 0.2) 0px 0px 2px 0px
• Hover: shadow rgba(0, 0, 0, 0.08) 0px 3px 12px 0px, rgba(0, 0, 0, 0.08) 0px 0px 6px 3px
• Use: ProtoPie School, Community and Blog on home (384 × 386)

Prototype card

• Background: #fafafa
• Radius: 16px
• Padding: 25px 30px 33px
• Use: featured prototypes on /discover (373 × 371)

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out pages of protopie.io plus fixed keyboard-probe state reads and first-party context) Tier 1 sources: https://www.protopie.io/ ; https://www.protopie.io/discover ; https://www.protopie.io/plans ; https://www.protopie.io/ko/ ; https://www.protopie.io/legal Tier 2 sources: not attempted in this pass; no Tier 2 value used Conflicts unresolved: none

States

Only these states were observed on the three captured pages; nothing else is specified here.

Error, empty, loading and success states were not captured and are not described.

Do's and Don'ts

Do

• Use #8169ff for every primary action and for selection; darken to #5b3ee0 on hover
• Set headlines and navigation in Figtree 700; set reading copy and button labels in Inter
• Keep buttons at 4px radius; round only the filter chips (100px)
• Let a ghost button fill violet on hover
• Use #181818 for headlines and step greys through #373737, #474747 and #999999
• Keep shadows for the resource cards only

Don't

• Don't set headlines in Gilroy; it is declared but no element renders it
• Don't add a second saturated action colour; the annotation violet #6d4ff0 is decoration only
• Don't use pure black for text
• Don't invent focus styles; every probed control shows only the browser default ring
• Don't substitute another face for Figtree, Inter or Palmer Lake Print
• Don't give buttons pill radii

Voice & Tone

ProtoPie's voice is confident and capability-first: it claims leadership, names concrete capabilities and speaks to designers as makers.

Voice samples (verbatim, opened 2026-09-30):

• "ProtoPie: AI-driven Prototyping Platform" — protopie.io page title.
• "#1 AI-driven advanced prototyping platform" — home headline.
• "Don't let AI guess your intent. Use AI to generate interactions, perfect them credit-free, and hand off clean specs." — home lead.
• "Trusted by world's top design teams" — home.
• "ProtoPie: 인터랙티브 프로토타이핑 툴" — protopie.io/ko page title.

Forbidden register: talking down to designers, vague capability claims, fear-based urgency, stacked exclamation marks.

Agent Prompt Guide

Quick Color Reference

• Primary action and selection: #8169ff with #ffffff labels; hover #5b3ee0
• Annotation: #6d4ff0
• Text: #181818 headlines and nav, #373737, #474747, #999999
• Surfaces: #ffffff canvas, #fafafa prototype cards

Example Component Prompts

• "Create a primary button: #8169ff background, #ffffff 18px Inter label at weight 600, 4px radius, 14px 16px padding, 53px tall; hover and pressed #5b3ee0; no shadow."
• "Create a ghost button: transparent background, #8169ff 18px Inter 600 label, 4px radius, 53px tall, no border; on hover fill #8169ff and turn the label #ffffff."
• "Build a header: sticky, 60px, Figtree 700 16px nav labels in #181818 that turn #5b3ee0 on hover, a violet text button Start for Free and a #8169ff Book a Demo button (12px 16px padding, 40px tall)."
• "Build filter chips: white, 100px radius, 10px 24px padding, 44px tall; the selected chip is #8169ff with a 1px #8169ff border; unselected chips fade to 0.8 opacity on hover."

Iteration Guide

1. One violet (#8169ff) for actions and selection; #5b3ee0 on hover
2. Figtree 700 headlines, Inter copy and labels
3. 4px buttons, 12px and 16px cards, 100px chips
4. #181818 ink, never pure black
5. Shadows only on the resource cards

---

Governance

Known Gaps

• Contrast, primary-button. Text #ffffff on #8169ff measures 3.89:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, header-button. Text #ffffff on #8169ff measures 3.89:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, small-button. Text #ffffff on #8169ff measures 3.89:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, white-button. Text #8169ff on #ffffff measures 3.89:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.