# Pietrastudio · Design system migration spec

> Source: https://www.pietrastudio.com  ·  Curated by OpenDesign  ·  en

> Excellent example of a modern SaaS landing page balancing bold typography with clean, professional aesthetics.

## 1. Identity DNA

Pietra's design system is architected like a sophisticated operating system: a clean, stable foundation supporting the complex, intelligent operations within. Its visual language directly mirrors the product's core promise—a unified, private AI brain for modern e-commerce. Every choice, from the restrained palette to the generous whitespace, reinforces clarity, control, and premium confidence.

**One-liner:** The private AI brain for fast growing brands
**Keywords:** AI · Commerce · Operations · Unified · Brand
**Analogy:** A sophisticated operating system for modern e-commerce brands

## 2. Color

The color system operates on a principle of high-contrast minimalism, using a pristine white canvas to make a single, vibrant coral-orange accent resonate with purpose. This disciplined approach ensures the primary action color commands attention without competing with the multi-color gradient effect reserved for specific, high-emphasis typography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F9F2F1` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#6B6B6B` | secondary text |
| `--muted` | `#C4C4C4` | placeholder |
| `--accent` | `#FF5C3C` | single accent |
| `--line` | `rgba(0,0,0,0.88)` | divider |

**Color principle:** High-contrast minimalism with a single energetic accent

The guiding principle is restraint: the accent is a tool for directing focus, not for decorating the interface.

## 3. Typography

The typographic voice is unequivocally modern and geometric, using sans-serif categories for all text layers to maintain a clean, professional tone. A clear hierarchy is established through weight contrast, with tight tracking for large display headlines creating a compact, impactful presence against more generously set body copy.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -0.96px | Hero Headline |
| body | 16px | 1.375 | 400 | 0px | Subheadings and primary copy |

**Type rules:**
- Use geometric sans for all text layers
- Tight tracking for large display type
- Maintain high weight contrast between headlines and body

## 4. Spacing

A consistent 4px base grid establishes a measured, predictable rhythm across all components and layouts.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with standard increments

## 5. Surfaces

Depth is communicated through subtlety: soft, diffused shadows and fine, near-black borders define surfaces without visual weight. This creates a layered yet airy composition where content floats cleanly above the white canvas.

- **Radius:** sm 8px · md 12px · lg 16px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.06) 0px 1px 6px 0px
  - rgba(0, 0, 0, 0.16) 0px 2px 32px 0px
- **Borders:** Subtle 1px borders using near-black rgba values

## 6. Layout

The layout skeleton is built around a centered 1280px container, creating a focused column for content. Generous vertical and horizontal whitespace is a structural element, not an afterthought, ensuring a clear visual hierarchy and an uncluttered reading path.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content with generous whitespace and clear vertical rhythm

## 7. Motion & Interaction

Motion is applied with precision, using smooth 0.3-second transitions to acknowledge user interaction and guide attention. The philosophy favors subtle, purposeful shifts in color and background over elaborate animations, reinforcing the system's premium and efficient character.

- **Durations:** micro 220ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth color transitions on hover
  - Subtle background shifts for interactive elements

- **Hover:** Subtle color or background shifts on buttons and links
- **Click:** Immediate feedback via color change or scale
- **Transition:** 0.3s ease-in-out for color and background transitions
- **Keyboard:** Standard focus states with visible outlines

## 8. Voice & Don'ts

The editorial voice is confident, professional, and empowering, translating complex capabilities into clear, benefit-driven statements. It avoids jargon and passive phrasing, opting for bold headlines and action-oriented calls to action that speak directly to value.

- **Tone:** Confident, professional, and empowering
- **Headline style:** Bold, concise statements highlighting the core value proposition
- **CTA style:** Action-oriented and benefit-driven (e.g., Get started for free)
- **Avoid:** Jargon-heavy or overly technical language / Passive or hesitant phrasing / Cluttered or noisy layouts

### Don'ts
- ❌ 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

The system deliberately forgoes clutter, complex gradients, competing accents, and heavy shadows to maintain its core tenets of clarity, focus, and clean professionalism.

## System Prompt (paste into AI tool)

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