UNVEIL®

UNVEIL®, achromatic, monochrome

Preview image. Unlock full-res

Architectural blueprint on white marble. Information is presented with surgical precision on a crisp, unblemished background.

This design system evokes a sense of highly precise, almost clinical, digital presentation. The stark achromatic palette and geometric typography create a serious, focused atmosphere. The lack of color accents and subtle interactive states prioritize content and function, presenting information with direct clarity. The overlapping image layers give an illusion of depth and interaction. Maintain a monochromatic palette with #FFFFFF backgrounds and #000000 text and borders, avoiding any chromatic colors. Apply a consistent 6px border-radius to all interactive containers, including buttons and navigation items. Use nb_international_proregular (or Inter) at weight 400 for all text, varying only size and line height. Ensure letter spacing is applied: 0.165px for 11px text and 0.304px for 16px text. Utilize transparent backgrounds and 1px #000000 borders for default button states, defining borders as the primary visual differentiator. Prioritize compact spacing, with internal padding values of 2px, 4px, 7px, 10px, 14px, 16px, and 40px. Do not introduce any chromatic colors; the system relies on a strictly achromatic palette. Avoid any drop shadows or complex elevation schemes; depth is suggested through content layering. Do not use font weights other than 400; all text should maintain a uniform visual density. Do not use border-radius values other than 6px; maintain this consistent level of corner rounding. Do not add decorative gradients or textures; surfaces should remain flat and unadorned. Do not introduce large content gaps or widely spaced elements; the design emphasizes density and precision.

More like this