Preview image. Unlock full-res
Art Gallery Minimalism: Project thumbnails, like curated art pieces, float on a light, matte background, each framed by a subtle, soft shadow box.
This design system evokes the ambiance of a high-end art gallery, where precise visual arrangement and subtle material textures give objects a curated weight. A minimalist palette of near-white, light gray, and charcoal provides a neutral stage, making the content—especially project thumbnails framed by soft shadows—the primary visual event. The extensive use of achromatic tones ensures a calm, contemplative experience, subtly emphasizing the work itself rather than decorative flair. Sparse, intentional typography with a high degree of contrast feels both academic and accessible.
Use Canvas White (#f4f3f1) as the primary background for all major content sections and interactive elements.
Apply Graphite Text (#333333) for all primary body text, headings, and high-contrast UI labels.
Frame significant visual content, like project cards, with the soft elevation shadow: rgba(90, 50, 40, 0.15) 0px 5px 15px 0px, rgba(80, 40, 30, 0.1) 0px 4px 8px 0px.
Maintain a clear vertical rhythm between sections using a 122px gap (sectionGap).
Employ a uniform 5px border radius (radius.inputs, radius.buttons, radius.cards) for all rounded elements.
Utilize Ash Details (#aaaaaa) for all auxiliary textual elements, links, and borders on non-primary UI elements.
Avoid using highly saturated or chromatic colors; adhere strictly to the achromatic palette.
Do not introduce sharp corners or larger radii than 5px for any interactive or card-like elements.
Do not vary line heights for sans-serif from the specified 1.2, 1.4, or 1.5, or for Suisse Works Trial from 1.5.
Do not deviate from the specified letter-spacing for Suisse Works Trial; its tightly spaced appearance is a signature element.
Do not use complex gradient fills or patterned backgrounds; surfaces should remain uniformly Canvas White (#f4f3f1) or Dust Border (#dddddd).
