Yllw

Yllw

Preview image. Unlock full-res

Industrial Blueprint on Fog

Industryagency
Palette
#000000
#ffffff
#cac7b4
#191919
#cccccc
#ffdd00

Yllw employs a bold, industrial aesthetic: stark black typography makes an immediate impact against a mostly white and 'foggy gray' canvas. The layout often alternates between dense, high-contrast text blocks and more spacious sections featuring architectural line drawings, giving a sense of technical precision without being overly rigid. Component borders are crisp, often 1px black, reinforcing the structured, no-nonse feel, while a single vivid yellow accent provides a punch of energetic utility for alerts and interactive prompts. Prioritize high contrast with Midnight Ink (#000000) for all primary text and critical UI elements against lighter backgrounds. Use Foggy Gray (#cac7b4) and Ghost White (#ffffff) as the primary background and surface colors, alternating them to create visual rhythm between sections. Apply Gd Grio Vf with dense, impactful kerning, especially at larger sizes, to convey a strong, architectural typographic presence (e.g., -0.0250em for display text). Employ the 2px border radius for all interactive elements like buttons and navigation items, maintaining a sharp, precise feel. Reserve School Bus Yellow (#ffdd00) sparingly for high-attention alerts, banners, and functional highlights rather than decorative purposes. Maintain consistent 1px Midnight Ink (#000000) borders for all outline buttons and visual separators to reinforce a structured system. Use 64px for section gaps to create generous breathing room between major content blocks, with 16px as the primary element spacing within sections. Avoid using multiple chromatic colors; restrict non-neutral color to School Bus Yellow (#ffdd00) for accent and utility. Do not introduce soft shadows or gradients for elevation; rely on stark color contrast and 1px borders for depth. Refrain from using heavily rounded corners; adhere to the 2px default radius for buttons and links, and 6px for cards. Do not break away from the Gd Grio Vf font; avoid generic sans-serif substitutes that dilute the bold, industrial aesthetic. Do not vary line heights significantly for body text; keep it tight and consistent to maintain readability and density. Avoid decorative imagery that is not aligned with the brand's architectural, industrial, or blueprint aesthetic.

More like this