
Preview image. Unlock full-res
Typographic Brutalism in a Monochrome Gallery. The design feels like a curated exhibition where letterforms are the central art pieces.
This design system is a study in stark monochrome contrast, evoking a gallery space for typographic art. Large-scale, custom typography dominates, creating a bold, almost brutalist visual identity. The absence of color and subtle shifts in near-achromatic tones (#262523 on #ECECEC) place absolute focus on form, text, and playful graphic interventions within the letterforms themselves. Subtle hints of illustration are integrated directly into oversized headlines, turning text into hero content. Prioritize Messina Sans for all visual-hero level typography, at sizes above 240px with a line-height of 0.80 and letter-spacing of -0.0600em. Maintain a strict monochrome palette using Anchor Black (#262523) for text and Gallery White (#ececec) for backgrounds as primary colors. Use Basis font with negative letter spacing (e.g., -0.0600em for 120px) to enhance the condensed, impactful look of large headlines. Leverage the 160px sectionGap to create significant breathing room between major content blocks, emphasizing spaciousness. Integrate playful iconography or graphic elements directly into large text headlines rather than as standalone images, as seen with the heart and asterisk. Apply Anchor Black (#262523) for all interactive text elements to ensure a consistent focal point for action. Avoid introducing any saturated chromatic colors; the system relies purely on a grayscale palette with minor shifts. Do not use box-shadows or complex elevation effects; depth is created through scale and typographic hierarchy. Do not use default system font styles for any textual content; all type must conform to Basis or Messina Sans rules. Avoid generic imagery like stock photos; if visuals are needed, they should be integrated graphically with typography. Do not use small, secondary buttons or badges that break the overall bold, oversized aesthetic. Do not introduce border-radius values other than 0px, except for intentional graphic elements like the 70px rounded shape in the headline.









