Dylanbrouwer

Dylanbrouwer

Preview image. Unlock full-res

Brutalism meets engineered minimalism.

Industrydesign
Palette
#3c3a3e
#a2a2a2
#ffffff
#c9c7cc
#f1f1f1
#7b7a7c
#161616
#ff4c24
#ff6436
#000000
#040305

The Dylanbrouwer design system projects a bold, industrial aesthetic through a highly constrained greyscale palette, sharp edges, and oversized, tightly tracked typography. A single vibrant orange hue serves as a sharp, functional accent. Component surfaces are mostly transparent or subtle, emphasizing a layered, almost architectural feel rather than solid blocks. Interactions are minimal and precise, with an underlying sense of restrained power. Use 'Die Grotesk B' 500 for all primary headings, adjusting letter spacing specific to each size to maintain visual tension. Apply 'ABC Gravity Variable' for large display typography, ensuring tight letterSpacing to maximize impact and solidity. Maintain a monochromatic base with 'Ink Slate' #3c3a3, 'Ghost Gray' #a2a2a2, and 'Canvas White' #ffffff for 95% of UI elements and backgrounds. Introduce 'Sunrise Orange' #ff4c24 or 'Action Orange' #ff6436 only as a distinct, vivid accent for functional cues or compelling highlights. Utilize a 14.4px border radius for all corner rounding, contributing to the distinct, subtle softness in an otherwise sharp design. Prioritize transparent or semi-transparent backgrounds for cards and overlays, using rgba(255, 255, 255, 0.5) for a frosted effect or full transparency. Implement the base unit of 6px for all spacing, with element gaps at 6px and card padding at 12px, to reinforce the compact density. Avoid introducing additional saturated colors beyond the established orange accents, as it dilutes the brand's sharp monochromatic identity. Do not use heavy shadows or significant elevation, as the system prefers transparent layering and subtle background shifts over pronounced depth. Refrain from altering the prescribed letter-spacing values for 'Die Grotesk B' and 'ABC Gravity Variable'; these are critical to the typographic personality. Do not break the compact density by introducing large, inconsistent spacing between elements or sections. Avoid decorative imagery that isn't either tightly cropped product shots or abstract, monochromatic visuals, to maintain focus on the UI. Do not use generic system fonts without explicit reasoning; prioritize 'Die Grotesk B' and 'IBM Plex Mono' for their specific roles. Resist using heavily decorated or outlined buttons; the system favors ghost buttons or solid, color-neutral badges.

More like this