Design System Inspiration of ProtoPie

1. Visual Theme & Atmosphere

ProtoPie (프로토파이) is the Seoul-born high-fidelity prototyping tool from Studio XID, and its marketing site reads like a confident, product-led design tool rather than a generic SaaS landing page. The canvas is pure white (#ffffff) with occasional cool light-grey surfaces (#fafafa), and the whole page is punctuated by one unmistakable brand signal: an electric violet (#8169ff) that saturates every call-to-action. Headings sit in a near-black ink (#181818) — never pure black — which keeps the type crisp without feeling harsh, and the interface leans flat, letting color and typography carry the hierarchy rather than heavy elevation.

The typographic personality is bold and declarative. Display headlines run in Gilroy Bold (weight 700) at large sizes — 62px on the hero, 48px on section titles — with tall, airy line-heights (80px on the H1) that give the geometric sans a premium, spacious feel. Body and UI text drop to Inter at a quiet 14–16px, weight 400, the neutral workhorse that keeps dense feature copy legible. This split — geometric Gilroy for persuasion, humanist Inter for information — is the core tension of the system: assertive where it sells the product, calm where it explains it.

What distinguishes ProtoPie is how it deploys its single hue across a spectrum. The primary violet (#8169ff) owns the CTAs; a deeper, more saturated violet (#6d4ff0) appears on animated hero emphasis words ("BUILDS", "TRUST", "RICHER") and inline links; softer tints (#ab9eff and the pale #e3deff) back highlight cards and decorative surfaces. Against these, full-bleed dark bands in a deep indigo-navy (#1a1935) create dramatic, immersive breaks in the scroll. Interactive geometry is restrained — buttons at a tight 4px radius, floating resource cards at 12px with a soft rgba(0,0,0,0.08) shadow — so the energy comes from the violet, not from rounding or chrome. The neutral text ladder (#373737 → #474747 → #636363 → #999999) and hairline grey (#e9e9e9) do the quiet structural work.

Key Characteristics:

• Gilroy Bold (weight 700) for all display headlines — geometric, declarative, product-confident
• Inter weight 400 at 14–16px for body and dense UI text — neutral, legible
• Single saturated violet (#8169ff) reserved for every primary call-to-action
• A violet spectrum: deep #6d4ff0 for emphasis text, soft #ab9eff and pale #e3deff for tinted surfaces
• Near-black ink (#181818) for headings instead of pure black — crisp, premium
• Full-bleed dark indigo-navy bands (#1a1935) for immersive scroll breaks
• Mostly flat depth — only floating resource cards carry a soft rgba(0,0,0,0.08) shadow
• Tight 4px button radius, 12px card radius — energy comes from color, not geometry

2. Color Palette & Roles

Primary

• ProtoPie Violet (#8169ff): Primary brand color and CTA background. The saturated electric violet on every call-to-action — the system's single "action" color (12–19× the most frequent background).
• Deep Violet (#6d4ff0): A darker, more saturated companion used for animated hero emphasis words and inline text links. The active/emphasis form of the brand hue.
• Soft Violet (#ab9eff): A lighter violet for tinted decorative surfaces and secondary highlight backgrounds.
• Violet Tint (#e3deff): The palest violet, used as a highlight card surface and soft category-tag background.

Neutral & Surface

• Pure White (#ffffff): Page background, card surfaces, text on violet/dark.
• Surface Grey (#fafafa): Light off-white surface for alternating content bands.
• Hairline (#e9e9e9): Thin borders, dividers, and input outlines — the primary separation device in the flat system.
• Dark Indigo (#1a1935): Full-bleed dark section band background for immersive, high-contrast scroll breaks.

Text Hierarchy

• Ink (#181818): Primary heading and strong-label color — a near-black used instead of pure black.
• Body (#373737): Standard body copy and descriptions.
• Muted Alt (#474747): Secondary body and industry-link text.
• Muted (#636363): Tertiary text, footer links, metadata.
• Faint (#999999): Captions, eyebrow labels, placeholder and lowest-emphasis text.
• On-Primary (#ffffff): Text and icons on violet and dark surfaces.

3. Typography Rules

Font Family

• Display: Gilroy (Gilroy Bold) — used for all headlines at weight 700. Geometric, high-contrast, brand-defining.
• Body: Inter — the functional reading/UI font, used at weight 400 for body copy, captions, footer, and industry links.

Hierarchy

Principles

• Bold display, neutral body: Gilroy Bold (700) carries every headline; Inter 400 carries every paragraph. The weight-and-family contrast is the primary hierarchy signal.
• Airy display line-height: headlines run tall (80px on a 62px H1, 62.4px on a 48px H2) — the type breathes rather than compresses.
• Two fonts, two jobs: Gilroy is the persuasive/branding voice; Inter is the functional/reading voice. They never swap roles.
• Small, quiet UI text: nav and control labels sit at 12px, keeping chrome subordinate to the big Gilroy headlines and the violet CTAs.

4. Component Stylings

Buttons

Primary CTA

• Background: #8169ff
• Text: #ffffff
• Radius: 4px
• Padding: 14px 16px
• Font: 12px weight 400
• Height: 53px
• Use: Primary call-to-action — "Get started for free", "Book a Demo", "Request Demo"

Text / Ghost CTA

• Background: transparent
• Text: #8169ff
• Radius: 4px
• Padding: 6px 16px
• Height: 32px
• Use: Secondary inline action — "Learn More", "Start for Free"

Inputs

Text Field

• Background: #ffffff
• Border: 1px solid #e9e9e9
• Text: #181818
• Radius: 4px
• Placeholder: #999999
• Focus: ring in #8169ff
• Use: Search / newsletter text input

Cards & Containers

Resource Card

• Background: #ffffff
• Radius: 12px
• Shadow: rgba(0,0,0,0.08) 0px 3px 12px 0px
• Use: Floating resource card — "ProtoPie School", "Community", "Blog"

Light Purple Card

• Background: #e3deff
• Text: #181818
• Radius: 12px
• Use: Feature / highlight card on the pale violet tint

Badges

Soft Category Tag

• Background: #e3deff
• Text: #6d4ff0
• Radius: 4px
• Padding: 4px 8px
• Font: 12px weight 400
• Use: Blog category tag / soft emphasis pill

Navigation

• Background: #ffffff
• Text: #181818
• Font: 12px weight 400
• Padding: 4px 20px per item
• Height: 60px header row
• Active: violet #6d4ff0 text on active item
• Use: Top horizontal nav ("Solutions", "Resources", "Features", "Pricing", "Download")

Footer

• Links: #636363, 14px Inter weight 400
• Use: Footer / industry navigation ("Automotive", "Aviation", "Finance", "MedTech", "IoT")

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 3 surfaces) Tier 1 sources: https://www.protopie.io/, https://www.protopie.io/blog, https://www.protopie.io/learn/docs/introducing-protopie/getting-started Tier 2 sources: getdesign.md/protopie (0 files — empty); styles.refero.design/?q=protopie (no ProtoPie-specific entry — generic grid only) Conflicts unresolved: none (both Tier 2 catalogs empty for ProtoPie; all values are Tier-1 live-inspected)

5. Layout Principles

Spacing System

• Base unit: ~4px
• Scale: 4px, 6px, 12px, 16px, 20px, 24px, 48px
• Notable: nav items carry a generous 4px 20px padding; primary CTAs use 12–14px vertical × 16px horizontal, giving comfortable tap targets

Grid & Container

• Centered single-column hero anchored by the 62px Gilroy headline
• Feature and resource sections use multi-column card grids that collapse responsively
• Full-bleed dark indigo bands (#1a1935) break the white scroll with immersive, high-contrast sections
• Floating resource cards (School / Community / Blog) group secondary destinations at 12px radius

Whitespace Philosophy

• Breathing room over density: generous vertical rhythm and tall display line-heights keep the marketing surface airy
• Flat segmentation: sections separate by background shift (#ffffff ↔ #fafafa ↔ dark #1a1935) and #e9e9e9 hairlines, rarely by shadow
• Color as emphasis: where a section needs to pop, it reaches for the violet spectrum (#8169ff, #6d4ff0, #e3deff) or a dark band, not for heavier elevation

Border Radius Scale

• Small (4px): buttons, inputs, tags — the tight workhorse radius
• Medium (12px): cards and floating containers
• Full (9999px): pills / circular controls where used

6. Depth & Elevation

Shadow Philosophy: ProtoPie is a mostly-flat system. Live inspection found box-shadow: none across the hero, nav, and headings; only the floating resource cards (School / Community / Blog) carry a single soft rgba(0,0,0,0.08) shadow at 3px offset / 12px blur. Depth and grouping are otherwise communicated through flat surface shifts (#ffffff, #fafafa, the pale #e3deff, and full-bleed dark #1a1935 bands) and thin #e9e9e9 hairlines. When emphasis is needed the system reaches for the violet (#8169ff / #6d4ff0) or a dark section, never heavier elevation.

7. Do's and Don'ts

Do

• Use Gilroy Bold (weight 700) for all display headlines — it's the brand's voice
• Use Inter weight 400 at 14–16px for body and dense UI text
• Reserve violet (#8169ff) for the primary call-to-action — keep it the single "action" color
• Use the deeper violet (#6d4ff0) for emphasis words and inline links
• Use near-black ink (#181818) for headings instead of pure black
• Keep tall, airy line-heights on display type (80px on a 62px H1)
• Separate sections with flat surface shifts (#fafafa, #e3deff) and #e9e9e9 hairlines
• Reach for a dark #1a1935 band when a section needs immersive contrast

Don't

• Use a light or thin weight for headlines — display is always Gilroy Bold (700)
• Spread the primary violet across many elements — it dilutes the single-action signal
• Use pure black (#000000) for body or heading text — use ink #181818 and the grey ladder
• Add heavy drop shadows for elevation — ProtoPie is a mostly-flat system
• Introduce a second saturated accent hue — the violet spectrum is the only brand color
• Use Inter for big headlines — Gilroy owns display
• Cram headlines with tight line-height — the display type is meant to breathe
• Use large pill radii on buttons — the button radius is a tight 4px

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTAs at 40–53px height with 12–14px × 16px padding — comfortably tappable
• Nav items spaced with 4px 20px padding inside the 60px header
• Text CTAs at 32px height for secondary inline actions

Collapsing Strategy

• Hero: 62px Gilroy headline scales down on mobile, weight 700 maintained
• Feature / resource card grids: multi-column → 2-up → stacked single column
• Dark #1a1935 bands maintain full-width treatment, reduce internal padding
• White / grey alternating sections maintain full-bleed treatment

Image Behavior

• Product screenshots and gallery pieces sit on white or dark bands with minimal chrome
• Floating resource cards keep their 12px radius and soft shadow across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: ProtoPie Violet (#8169ff)
• Emphasis text / link: Deep Violet (#6d4ff0)
• Highlight surface: Violet Tint (#e3deff), Soft Violet (#ab9eff)
• Background: Pure White (#ffffff), Surface Grey (#fafafa)
• Dark band: Dark Indigo (#1a1935)
• Heading text: Ink (#181818)
• Body text: Body (#373737), Muted (#636363)
• Faint / caption: Faint (#999999)
• Hairline: #e9e9e9

Example Component Prompts

• "Create a hero on white background. Headline at 62px Gilroy Bold weight 700, line-height 80px, color #181818, with one emphasis word in deep violet #6d4ff0. Below it a primary CTA: #8169ff background, white text, 4px radius, 14px 16px padding, 'Get started for free'."
• "Design a floating resource card: white #ffffff background, 12px radius, box-shadow rgba(0,0,0,0.08) 0px 3px 12px. Title 36px Gilroy Bold #181818, body 16px Inter #373737."
• "Build a dark immersive band: #1a1935 background, full-width. Section title 48px Gilroy Bold #ffffff, line-height 62.4px. Body 14px Inter rgba(255,255,255,0.8)."
• "Create top nav: white 60px header. 12px links, #181818 text, deep violet #6d4ff0 on active. Violet CTA 'Book a Demo' right-aligned (#8169ff bg, white text, 4px radius)."

Iteration Guide

1. Gilroy Bold (700) for every headline; Inter 400 for every paragraph
2. Violet (#8169ff) is the single action color — don't spread it; use #6d4ff0 for emphasis text
3. Mostly flat — separate with #fafafa / #e3deff tints and #e9e9e9 hairlines; only resource cards get the soft shadow
4. Tight 4px radius on buttons/inputs, 12px on cards
5. Heading color is ink #181818, never pure black; body drops through the grey ladder
6. Reach for a #1a1935 dark band for immersive contrast sections
7. Keep display line-heights tall and airy (80px on a 62px H1)

---

10. Voice & Tone

ProtoPie's voice is confident, capability-focused, and craft-proud — a tool that speaks to designers as makers who want the highest fidelity without writing code. The hero line "#1 advanced prototyping tool for dynamic interactions" sets the register: assertive, benefit-forward, unafraid to claim leadership. Copy foregrounds what the tool can do ("high-fidelity prototyping", "hardware interaction") and treats the reader as a serious product person, not a beginner to be coddled.

Voice samples (verbatim from live surfaces):

• "#1 advanced prototyping tool for dynamic interactions" — hero H1 (leadership claim). (verified live 2026-07-02)
• "Powerful features for highest fidelity" — section H2 (capability-first). (verified live 2026-07-02)
• "Join the ProtoPioneers community" — resource card (belonging-framed). (verified live 2026-07-02)

Forbidden register: talking down to designers, hiding capability behind vague jargon, fear-based urgency, exclamation-heavy hype that undercuts the craft-proud confidence.

11. Brand Narrative

ProtoPie (프로토파이) is the flagship product of Studio XID, Inc., founded in 2015 in Seoul, Korea by Tony Kim (김수형), a former interaction designer who was frustrated that turning rich interaction ideas into believable prototypes required either writing production code or accepting the low fidelity of click-through mockups. ProtoPie's founding premise — that any designer should be able to build genuinely interactive, sensor-and-hardware-aware prototypes without code — reframed prototyping from a developer handoff problem into a designer's native craft.

The product matured into a leading high-fidelity prototyping tool used by product teams across automotive, aviation, finance, and consumer software — the industries surfaced on its own site. Its distinguishing claim is fidelity: prototypes that respond to real sensors, hardware inputs, and conditional logic, closing the gap between a static design and the finished product. The "ProtoPioneers" community and ProtoPie School reflect a company that invests in teaching the craft, not just selling a license.

What ProtoPie refuses, visible in its design: the intimidating chrome and dense toolbars of legacy prototyping suites, and the generic sameness of undifferentiated SaaS marketing. What it embraces: a bold Gilroy display voice, a single confident violet that owns every action, a mostly-flat interface that keeps focus on the work, and immersive dark bands that let the product's motion and interaction shine.

12. Principles

1. Fidelity is the point. ProtoPie exists to close the gap between a design and the real product. UI implication: let product screenshots, motion, and interaction take center stage; keep chrome flat and quiet so the work reads first.
2. One action, one color. Violet (#8169ff) means "do this." UI implication: reserve the saturated violet exclusively for the primary CTA so the next step is never ambiguous; use #6d4ff0 only for emphasis.
3. Speak to makers, not beginners. UI implication: name capabilities concretely (sensors, hardware, conditions) and trust the reader; avoid over-explaining or dumbing down.
4. Bold where it persuades, neutral where it informs. UI implication: Gilroy Bold for headlines that sell the product; Inter 400 for the copy that explains it.
5. Flat and focused. UI implication: separate with surface tints and hairlines, not heavy shadows; reach for a dark #1a1935 band when a section needs immersive contrast.

13. Personas

Personas below are fictional archetypes informed by publicly observable ProtoPie user segments (product designers, interaction designers, automotive/hardware UX teams), not individual people.

Seoyeon Park, 30, Seoul. A product designer at a mobile app studio who prototypes micro-interactions before dev handoff. Chose ProtoPie because she can build sensor- and gesture-aware prototypes without asking an engineer, and because the fidelity convinces stakeholders in review.

Marcus Lindqvist, 38, Gothenburg. An automotive HMI designer prototyping in-car cluster and infotainment interactions. Values that ProtoPie can drive hardware and respond to real inputs, so his prototypes behave like the shipping system, not a slideshow.

Priya Nair, 27, Bangalore. An interaction designer learning high-fidelity prototyping through ProtoPie School and the community. Appreciates that the tool treats her as a capable maker and that the tutorials teach craft, not just clicks.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is expressive but purposeful — fitting for a prototyping tool whose entire value proposition is interaction. Hero emphasis words in deep violet (#6d4ff0) animate through the headline; content fades in from below at motion-standard / ease-enter; dark #1a1935 bands reveal cinematically at motion-slow. Because ProtoPie sells motion, the marketing surface allows richer transitions than a utilitarian dashboard would — but interactive controls stay quick and steady. Under prefers-reduced-motion: reduce, decorative animation freezes and all transitions collapse to instant; the product remains fully functional.