Duties.xyz

Duties.xyz, brutalist, minimalist

Preview image. Unlock full-res

Raw concrete with meticulous stenciling.

Industryother, agency
Palette
#f1f0ee
#252525
#000000
#dbdad9
#a7beb1
#0000ee

This design feels like a stark, industrial space, where information is presented with an almost raw honesty. The heavy, irregular custom typefaces create a sense of directness, balanced by a clean paper-like background and compact, precise layouts. The visual language emphasizes functionality and impact over ornate aesthetics, making bold statements through strong typography and structured content. Use AS Therma Bold Condensed for all display-level headlines to enforce the 'brave' aesthetic, ensuring -0.06em letter spacing on larger sizes. Maintain a clear hierarchy using Pitch Black (#000000) for primary headings and Inkwell (#252525) for body text and secondary elements. Employ the 32px border radius for all interactive buttons and menu items to create visual consistency for actionable elements. Utilize Canvas (#f1f0ee) as the dominant page background to provide a clean, high-contrast base for all content. Apply PP Neue Montreal Mono Medium with its specific font features ('case', 'dlig', 'ss04', 'ss07', 'ss08', 'zero') for structured text and metadata to introduce a technical, precise feel. Use 10px or 20px horizontal padding consistently for element grouping and spacing within compact sections. Avoid generic serif or highly decorative fonts that would dilute the brutalist-industrial feel of the display typography. Do not introduce strong chromatic colors beyond the Accent Blue for interactive elements, as it would disrupt the monochrome foundation. Do not use subtle shadows or gradients, as the design relies on stark contrast and flat surfaces for depth. Avoid soft, organic shapes; stick to sharp edges and predefined radii like 8px or 32px for purposeful geometric form. Do not break content out of the Canvas (#f1f0ee) or Stone Wall (#dbdad9) backgrounds with arbitrary colors. Do not use letter spacing greater than 'normal' for body text; only the display fonts should have negative letter spacing for effect.

More like this