Pietrastudio

Pietrastudio

Preview image. Unlock full-res

Warm digital canvas

Industrysaas
Palette
#ffffff
#f8f6f2
#1f2026
#141414
#6b6b6b
#c4c4c4
#e8e8ea
#ff5c3c
#fffbe7
#f9e070
#57ad6a
#7d32f7

Pietra exudes a dynamic, clean, digital canvas aesthetic. Its visual system is built on a crisp white backdrop, punctuated by a vibrant, warm orange action color and muted, pastel gradients that provide visual interest and a sense of depth without overwhelming the UI. Typography is compact and understated, allowing the strong contrasts of the brand orange and deep charcoal text to command attention. Components tend towards soft, rounded shapes and subtle shadow effects, creating a friendly yet capable interface. Use Labil Grotesk (or Inter) weight 400 at 16px with line height 1.57 and -0.01em letter spacing for all body copy to maintain legibility and a compact feel. Apply Canvas White #ffffff as the default background for the main canvas and most card surfaces. Reserve Action Orange #ff5c3c for primary call-to-action buttons and critical interactive elements, ensuring high visibility. Utilize a soft, subtle 'neuromorphic' shadow effect from rgba(221, 223, 228, 0.5) 5px 5px 24px 0px for cards and elevated components, paired with inset highlights for depth. Employ consistent 8px border radius for all buttons and input fields, with cards using 12px or 20px for a softer, more approachable aesthetic. Maintain a clear vertical rhythm using 24px spacing below secondary elements and 12px padding within cards. Use Attila-Bold (or Archivo Black) for headlines, especially at 48px with -0.02em letter spacing, to create a strong, condensed visual impact. Avoid using highly saturated colors outside the defined brand and accent palette; maintain a largely achromatic UI. Do not use sharp, square corners on interactive elements; all buttons, inputs, and cards should have a minimum of 8px border radius. Refrain from dense text blocks without sufficient line height; ensure body text maintains a line height of 1.57 for readability. Do not introduce strong, dark shadows without the complementary light inset shadows; the visual system relies on a subtle, luminous depth. Avoid large variations in text letter spacing other than the defined tight values; excessive spacing breaks the compact typographic style. Do not use generic system fonts for prominent text; stick to Labil Grotesk or its substitutes for brand consistency. Do not add additional decorative borders or heavy outlines to elements; surfaces gain definition through subtle shadows and internal highlights.

More like this