---
title: "Pietra design system"
variant: extended
source: https://www.pietrastudio.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/pietrastudio-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Pietra · Design System

> Warm editorial clarity for an AI-powered commerce platform

**Theme:** light · **Industry:** ai · **Source:** https://www.pietrastudio.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Pietra presents its AI platform through an airy, editorial homepage with bold typography and a warm coral accent. A network-style hero illustration leads into product features, customer brands, a pale capability panel, and a vivid CTA above a dark footer.

## North star

Keep the page airy and editorial, reserving saturated coral for high-intent actions and conversion moments.

## Overview

The page pairs a white canvas with warm blush panels, using coral orange for the primary CTA, selected emphasis, and a full-width conversion band. Near-black typography carries the main message; muted grays handle supporting copy, while thin pale borders create the faint connected-grid effect visible behind the hero. The headline is large, heavy, and tightly tracked, with a blue-to-coral gradient emphasis that appears as expressive display styling rather than a general UI colour system. Labil’s rounded grotesk forms keep navigation, body copy, and controls approachable. A centered hero transitions into left-aligned product explanation, a centered customer showcase, and a broad pale feature card. Generous white space separates sections, keeping the page comfortable rather than dense. Product diagrams and customer imagery add colour and texture within otherwise restrained blocks. Coral CTA and near-black footer create strong bookends.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary canvas and the open space surrounding the hero, features, and customer showcase. |
| Signal Coral | `#ff5c3c` | `--color-signal-coral` | brand | Primary CTA fill, coral emphasis, and the full-width conversion section. |
| Blush Mist | `#f9f2f1` | `--color-blush-mist` | surface | Soft feature cards and pale capability panel surfaces. |
| Quiet Gray | `#6b6b6b` | `--color-quiet-gray` | neutral | Muted supporting copy and secondary link text. |
| Footer Ink | `#141414` | `--color-footer-ink` | surface | Dark footer background and light-on-dark footer content. |
| Soft Rule | `#e7e7e7` | `--color-soft-rule` | neutral | Fine borders and understated dividers. |
| Body Charcoal | `#333333` | `--color-body-charcoal` | neutral | Main body text and paragraph copy. |
| Deep Black | `#000000` | `--color-deep-black` | neutral | Headline text and dark text within pale cards; some button details. |
| Faint Silver | `#c4c4c4` | `--color-faint-silver` | neutral | Subdued navigation and link text. |
| Button Slate | `#1f2026` | `--color-button-slate` | semantic | Sign-in text and other dark control text. |
| Peach Coral | `#ff8a65` | `--color-peach-coral` | accent | Gradient transition and accent detail, not a dominant standalone UI surface. |
| Slate Gray | `#666666` | `--color-slate-gray` | neutral | Secondary text tones in supporting content. |
| Charcoal Brown | `#1e1e1d` | `--color-charcoal-brown` | neutral | Near-black text details and supporting interface copy. |
| Ash Gray | `#a1a1a1` | `--color-ash-gray` | neutral | Low-emphasis links and secondary text. |
| Violet Signal | `#7c4dff` | `--color-violet-signal` | accent | Gradient accent detected in expressive text styling, not a core page surface. |
| Cyan Spark | `#00b8d4` | `--color-cyan-spark` | accent | Gradient accent and small interface illustration details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f2f1` (Blush Mist) · `--color-surface-2` → `#141414` (Footer Ink) · `--color-surface-3` → `#000000` (Deep Black) · `--color-text` → `#333333` (Body Charcoal) · `--color-text-muted` → `#6b6b6b` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e7e7e7` (Soft Rule) · `--color-accent` → `#ff5c3c` (Signal Coral) · `--color-accent-2` → `#ff8a65` (Peach Coral) · `--color-accent-3` → `#7c4dff` (Violet Signal) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#f9f2f1` | 11.43:1 | AAA |
| `#333333` | `#141414` | 1.46:1 | fail |
| `#333333` | `#000000` | 1.66:1 | fail |
| `#6b6b6b` | `#ffffff` | 5.33:1 | AA |
| `#6b6b6b` | `#f9f2f1` | 4.82:1 | AA |
| `#6b6b6b` | `#141414` | 3.46:1 | AA-large |
| `#6b6b6b` | `#000000` | 3.94:1 | AA-large |
| `#ffffff` | `#f9f2f1` | 1.11:1 | fail |
| `#ffffff` | `#141414` | 18.42:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(255, 92, 60), rgb(255, 138, 101) 20%, rgb(124, 77, 255) 40%, rgb(0, 184, 212) 60%, rgb(255, 92, 60) 80%, rgb(255, 138, 101))`
- `linear-gradient(95deg, rgb(255, 92, 60) 45.89%, rgb(245, 190, 50) 118.46%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Labil-Regular | `--font-body` | webfont | 400, 300 | Body copy, links, captions, and regular-weight feature headings. | DM Sans |
| Labil Grotesk | `--font-display` | webfont | 500, 400, 700 | Navigation, buttons, secondary headings, and card text. | Manrope |
| Labil-Bold | `--font-labil-bold` | webfont | 400 | Bold brand and display text where this custom face is applied. | Manrope |
| Attila-Bold | `--font-attila-bold` | webfont | 400 | Display and headline typography. | Manrope |
| Attila Sans Uniform | `--font-attila-sans-uniform` | webfont | 700 | Hero display headline and primary H1. | Plus Jakarta Sans |

- **Labil-Regular:** Use regular weights with relaxed, compact line treatment; eyebrow labels are uppercase with wide tracking.
- **Labil Grotesk:** Medium to bold weights; buttons are bold and compact, while secondary headings use subtly tight tracking.
- **Labil-Bold:** Use for high-emphasis text; keep bold use selective against the white canvas.
- **Attila-Bold:** Heavy headline treatment with a clean, contemporary silhouette; use for prominent statements.
- **Attila Sans Uniform:** Bold, large display text; H1 uses tight negative tracking, and headline emphasis may use gradient colour.

### Type scale — Augmented Fourth (ratio ≈ 1.403, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 62px | 700 | 1 | 0 | — | Attila Sans Uniform | Oversized hero or standout display statements. |
| h1 | 48px | 700 | normal | -0.02em | — | Attila Sans Uniform | Primary hero headline. |
| h2 | 24px | 500 | normal | -0.01em | — | Labil Grotesk | Section titles and feature headings. |
| h3 | 20px | 400 | normal | 0 | — | Labil-Regular | Smaller feature and card headings. |
| body | 16px | 400 | 1 | 0 | — | Labil-Regular | Paragraphs and explanatory product copy. |
| caption | 12px | 400 | 1 | 0 | — | Labil-Regular | Compact captions and fine-print labels. |
| button | 16px | 700 | normal | 0 | — | Labil Grotesk | Primary and secondary CTA labels. |
| link | 16px | 400 | 1.13 | 0 | — | Labil-Regular | Navigation and inline links. |
| eyebrow | 14px | 400 | 1 | 0.143em | uppercase | Labil-Regular | Uppercase category labels above feature content. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 46, 48, 64, 80, 110 px.
- Section rhythm 64px · element gap 8px · card padding 28px · max content width 1248px.

The page uses a centered, wide content frame with a measured maximum width of 1248px. The hero is centrally aligned, followed by a left-aligned feature explanation, a centered customer grid, and a broad pale capability panel. Sections have generous separation, with a comfortable density and clear shifts between white canvas, blush surfaces, coral CTA, and dark footer. Feature content alternates text and visual emphasis rather than relying on a dense uniform grid.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `12px` · xs `8px` · sm `12px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0.02) 0px 2px 0px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The page is mostly flat, with whitespace and background bands doing the structural work. Thin pale borders define controls and faint hero connections. Cards use blush fills and rounded corners rather than pronounced shadows; the measured button shadow is only a subtle hairline. Preserve clear layering between the white canvas, feature panels, coral CTA, and dark footer.

## Imagery

The hero uses a compact network diagram: a central Pietra chip connects to recognizable commerce and marketing platform marks across faint lines. Product diagrams appear in warm blush panels, while the customer section uses a grid of brand and founder imagery with dark caption strips. The CTA band includes cropped product or lifestyle photos at its edges. Keep imagery contained, softly framed, and secondary to the headline.

## Components

### Header navigation

A compact horizontal brand and link row on white, with sign-in and a coral filled primary action aligned to the right.

### Hero headline

Centered bold display copy with selective blue-to-coral gradient emphasis, short explanatory text, and a connected-platform diagram below.

### Hero CTA pair

Two side-by-side actions: a coral filled primary button and a white secondary button with a thin coral outline; use 8px corners.

### Feature panel

Pale blush card with 12px corners, black text, and a diagram or illustration paired with concise product explanation.

### Customer brand grid

Centered customer heading above a multi-column set of image cards with dark caption bars.

### Conversion band

Full-width coral section with centered white headline and support copy, plus two conversion actions and cropped imagery.

### Footer

Near-black footer with grouped navigation columns, muted text, partner marks, and a fine divider above legal links.

### Measured component styles

- **Primary button** (“Start for free”): background #ff5c3c · text #ffffff · radius 8px · padding 12px 20px · 700 16px Labil Grotesk
- **Secondary button** (“Sign in”): transparent background · text #1f2026 · border 1px solid #ffffff · radius 8px · padding 12px 20px · 700 16px Labil Grotesk
- **Link** (“Home”): transparent background · text #c4c4c4 · radius 0px · padding 5px 0px · 400 16px Labil-Regular
- **Card** (“With Connect all your data sources in on”): background #f9f2f1 · text #000000 · border 1px solid · radius 12px · padding 32px 24px · 400 14px Labil Grotesk

## Do

- Use white as the dominant page canvas.
- Reserve coral for primary actions and the conversion band.
- Keep hero headlines centered and visually dominant.
- Use blush panels to group product explanations.
- Separate sections with generous whitespace.
- Keep borders faint and shadows nearly invisible.

## Don't

- Do not make the page uniformly dark.
- Do not use coral as a background for every component.
- Do not compress the page into dense, tightly packed cards.
- Do not use heavy drop shadows to imply elevation.
- Do not turn gradient accents into a general-purpose palette.
- Do not let supporting imagery overpower the message.

## Agent prompt

Build a new Pietra-style AI commerce page with a white Gallery White (#ffffff) canvas, crisp near-black headlines, and a restrained Signal Coral (#ff5c3c) action colour. Use Blush Mist (#f9f2f1) for selected feature surfaces and Footer Ink (#141414) for the closing footer. Make the hero centered and editorial, with a strong display headline, concise supporting copy, a connected-platform diagram, and a paired CTA. Continue into spacious feature explanations, customer imagery, and a broad capability panel. Use rounded grotesk typography, bold display type, subtle borders in Soft Rule (#e7e7e7), and minimal elevation. Keep colour gradients limited to headline or illustration accents; prioritize clear hierarchy, generous breathing room, and concrete product imagery over decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Horizontal brand and navigation links, with utility links and primary action on the right. | Product navigation, Sign-in access, Primary signup action | White canvas, Compact text links, Coral CTA |
| 2 | hero | Centered display headline and copy above a connected-tools illustration and paired CTA buttons. | Platform value proposition, Free-start CTA, Book-demo CTA | Gradient headline emphasis, Faint connection lines, Coral primary button |
| 3 | feature-split | Left-aligned product explanation paired with a product diagram and supporting card visuals. | Personalized product explanation, Learn-more link | Blush surfaces, Compact eyebrow label, Diagram illustration |
| 4 | logo-cloud | Centered heading above a four-column customer image grid. | Customer proof, Brand discovery | Image cards, Dark caption strips, Centered section heading |
| 5 | feature-grid | Wide pale panel with centered heading and two columns of capability bullets. | Capability overview, Scannable benefits | Blush panel, Coral bullet markers, Two-column list |
| 6 | cta | Full-width coral band with centered headline, supporting line, paired actions, and edge imagery. | Free account conversion, Book-demo option | Coral background, White headline, Cropped product photos |
| 7 | footer | Near-black footer with brand summary and multiple grouped link columns. | Explore navigation, Help links, Community links | Dark surface, Muted link text, Partner marks |
| 8 | footer | Dark lower footer strip with copyright and legal links separated by a fine divider. | Privacy access, Terms access | Near-black surface, Subtle divider, Muted legal text |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/pietrastudio-com