Pietrastudio. Sunlit AI workshop on cream paper.
- SaaS
- Light theme
- 19 colors
- 5 typefaces
Pietra is a warm-light productivity canvas where AI feels like a sunlit desk — cream-white surfaces, soft peach ambient washes, and one vivid coral action color that cuts through the warmth. The type system is paired and confident: a tall, tightly-tracked display face (Attila) shouts the headlines while a neutral grotesque (Labil Grotesk) handles everything else at near-tight tracking. Components sit on the page with soft, layered shadows — inset highlights and warm-tinted drop shadows give cards a paper-on-paper feel rather than digital elevation. Color is deployed as function: coral for the one true primary action, a palette of saturated gradient swatches (purple, blue, green, magenta, sunset) used as category tags on feature cards, and otherwise a near-monochrome system of grays. Density is comfortable with generous vertical breathing room between sections, max-width contained layouts, and 12-16px card padding inside 12-20px radii.
Pietrastudio design system
Brand1
Primary CTA fill, active nav, brand accent — a warm vermillion that sits forward against cream backgrounds without feeling aggressive
Accent7
Category tag accent, feature card variant — warm yellow that pairs with coral gradients
Category tag accent, feature card variant — natural green for growth/scale categories
Feature card gradient pair — deep purple-to-violet category swatch for strategy/planning tags
Feature card gradient pair — cyan-to-blue category swatch for content/creation tags
Feature card gradient pair — lime-to-emerald category swatch for sales/growth tags
Feature card gradient pair — violet-to-magenta category swatch for analysis/insights tags
Feature card gradient pair — red-to-gold category swatch for benchmarking/launch tags
Neutrals11
Primary heading text, body text, dominant borders — the workhorse contrast color used at 1750+ instances
Secondary text, link text, heavy borders — softer than pure black for UI chrome and metadata
Body text, input borders, body chrome — near-black with a cool cast for dense informational UI
Deep body text, secondary headings — sits between charcoal and black for weighted text that isn't headline-level
Muted body text, helper text, icon borders — the primary de-emphasized text tone
Hairline borders, dividers, placeholder text — light structural lines that recede
Shadow tint, ultra-light dividers, ghost surfaces — the near-invisible layer
Hero ambient background wash — a barely-there pink-to-peach atmospheric tint behind the headline
Warm off-white surface layer for elevated cards and section bands — gives the page its sunlit warmth without leaving pure white
Accent card surface, tinted feature panels — a warmer cream for highlight cards that need to stand apart from the base canvas
Page canvas, card surfaces, button text on dark fills — the base everything else rests on
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Ink Black on Ember Coral
6.85 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
