Preview image. Unlock full-res
Shadow Gallery, Spotlit Art. The website feels like stepping into a dark art gallery with carefully curated, dramatically lit pieces.
This design system conjures the atmosphere of a clandestine gallery at twilight, where stark, graphic information exists within the dramatic interplay of light and shadow, and hero imagery is presented like precious art under a spotlight. Typography drives much of the visual drama: a bold, wide-set serif announces key content with a theatrical flourish, while precise, functional sans-serif provides navigational clarity and textual detail. The overall impression is one of curated intensity, favoring strong visual statements over intricate details or soft transitions. Do use Void Black (#000000) as the primary page background to contrast dramatically with content. Do use Ghost White (#ffffff) for all text and interactive elements to ensure high contrast and focal point. Do apply the Dahlia font at 144px weight 400 for all major project titles, emphasizing its wide, artistic character. Do use the Inter font for all navigational and body text, with 1.5 line-height for readability at smaller sizes. Do implement 9999px border-radius for any compact interactive tag that needs a pill-like shape. Do use no explicit padding or border for default interactive components like navigation links, letting text content define their visual footprint. Don't introduce any background colors other than Void Black (#000000) or Ghost White (#ffffff) to maintain visual starkness. Don't use Inter for display headlines; reserve Dahlia for that specific, dramatic role. Don't apply shadows or elevated effects; achieve depth through bold typography and contrasting backgrounds. Don't use letter-spacing values other than normal for Inter font, maintaining its intended readability. Don't add borders to primary interactive elements; their clickable state is indicated by color contrast and inherent link styling.
