---
name: Pietrastudio
description: "Excellent example of a modern SaaS landing page balancing bold typography with clean, professional aesthetics."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#6B6B6B"
  tertiary: "#FF5C3C"
  neutral: "#C4C4C4"
  bg-soft: "#F9F2F1"
  line: "rgba(0,0,0,0.88)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.96px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.375
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

The private AI brain for fast growing brands

*A sophisticated operating system for modern e-commerce brands*

## Colors

High-contrast minimalism with a single energetic accent

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#6B6B6B`)** — uses `ink-soft` token
- **Accent (`#FF5C3C`)** — uses `accent` token
- **Muted (`#C4C4C4`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.88)`)** — uses `line` token

## Typography

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

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

## Layout

Centered content with generous whitespace and clear vertical rhythm

*Rhythm:* Consistent 4px base with standard increments

## Elevation & Depth

- 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

## Shapes

- `sm`: 8px
- `md`: 12px
- `lg`: 16px
- `pill`: 999px

## 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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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