CURATED · OPEN · FREE

Pietrastudio

The private AI brain for fast growing brands

SaaSAIProductPremiumClean

↓ Download design system (11 MB)Open in OpenDesign

Visit: https://www.pietrastudio.com

📦 Browse pack contents →

Identity DNA

AICommerceOperationsUnifiedBrand

A sophisticated operating system for modern e-commerce brands

Color

#FF5C3CAccent

#000000Ink

#6B6B6BInk soft

#FFFFFFBG

#F9F2F1BG soft

#C4C4C4Muted

rgba(0,0,0,0.88)Line

High-contrast minimalism with a single energetic accent

Typography

geometric-sans

display56px · 700
body16px · 400

Use geometric sans for all text layers · Tight tracking for large display type · Maintain high weight contrast between headlines and body

Spacing

4px

8px

12px

16px

20px

24px

32px

48px

64px

96px

Consistent 4px base with standard increments

Surfaces

sm · 8px

md · 12px

lg · 16px

pill · 999px

Subtle 1px borders using near-black rgba values

rgba(0, 0, 0, 0.06) 0px 1px 6px 0px · rgba(0, 0, 0, 0.16) 0px 2px 32px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered content with generous whitespace and clear vertical rhythm

Motion & Interaction

220msmicro

250mssmall

400msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth color transitions on hover · Subtle background shifts for interactive elements

Subtle color or background shifts on buttons and links · Immediate feedback via color change or scale

Components

button Solid orange primary with white text; secondary outlined or text-only
card Clean cards with subtle shadows and 12px radius
chip Orange pill-shaped tags with white text
input Clean minimal inputs with subtle borders
hero Large centered typography with a multi-color gradient effect on key words

Voice & Don'ts

Tone Confident, professional, and empowering
Headlines Bold, concise statements highlighting the core value proposition
CTAs Action-oriented and benefit-driven (e.g., Get started for free)

don't use complex gradients — screenshot shows solid orange buttons and subtle multi-color text accents only
don't use serif fonts — screenshot shows geometric sans-serif throughout
don't use heavy drop shadows — screenshot shows soft, minimal box-shadows
don't use crowded layouts — screenshot shows generous whitespace and clear hierarchy
don't use multiple competing accent colors — screenshot uses orange as the primary accent with multi-color text as a specific effect
don't use dark backgrounds as primary — screenshot shows a predominantly white background with a single soft pink section
Avoid: Jargon-heavy or overly technical language
Avoid: Passive or hesitant phrasing
Avoid: Cluttered or noisy layouts

Inside the pack — real screenshots

Pietrastudio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Pietra Studio is a premium AI-powered SaaS platform for e-commerce operations. The design DNA is characterized by a clean, white-dominant palette with a vibrant coral-orange (#FF5C3C) accent. Typography uses geometric sans-serif categories for a modern, professional feel. The layout is spacious with a centered 1280px container and generous whitespace. Critical donts include: avoiding complex gradients, serif fonts, heavy shadows, and crowded layouts. The system emphasizes high-contrast, confident communication with bold headlines and clear value propositions. Color usage is restrained, with the accent color reserved for primary actions and the multi-color gradient used sparingly for emphasis on key terms in the hero section.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko