Preview image. Unlock full-res
Gallery Grid and Whisper
This design system projects a refined, minimalist aesthetic through a stark monochrome palette punctuated by a single, muted accent. Predominantly light backgrounds with subtle texture create an expansive, almost gallery-like feel. Typography is paramount, delivered in a custom-designed, highly legible sans-serif with precise letter-spacing adjustments, fostering a sense of sharp, intellectual precision. The restrained use of an "azalea" pink shade for subtle interactive cues or emotive accents prevents the system from feeling cold, adding an unexpected, almost artistic touch amidst the otherwise severe structure.
Prioritize SctoGroteskA for all typography, leveraging its weight and letter-spacing variations for hierarchy.
Maintain a monochromatic base with Storm Graphite (#252422) for primary text and elements, and Canvas White (#ffffff) or Cloud Whisper (#f4f4f4) for backgrounds and inverse elements.
Use Azalea Frost (#f9cdcd) explicitly for interactive states, badges, or subtle, emotionally resonant accents.
Employ 0px border-radius almost universally, reserving 50% radius only for prominent circular interactive elements.
Ensure generous sectionGap of 150px to create ample negative space and a sense of calm visual rhythm.
Utilize a precise typographic scale where letter-spacing is systematically decreased for larger font sizes: e.g., 22px text uses -0.0350em letter-spacing.
Implement the Cloud Whisper (#f4f4f4) neutral background for primary page content, providing a soft, subtle backdrop.
Avoid introducing additional chromatic colors; the Azalea Frost (#f9cdcd) is the sole accent.
Do not use box-shadows or other elevation techniques; all depth is implied through color contrast and compositional layering.
Refrain from using heavily saturated images; prefer desaturated or monochrome photography that blends with the system's muted palette.
Do not deviate from the single typeface SctoGroteskA; typographic diversity comes from size and weight.
Avoid excessive padding on ghost buttons; they should appear as underlined text links unless styled with a border for emphasis.
Do not introduce rounded corners (e.g. 4px, 8px) on cards, containers, or general elements; maintain sharp, angular forms.
Never use pure black (#000000) for body text on light backgrounds; always opt for Storm Graphite (#252422) for softer contrast.
