VISIONNAIRE

The VISIONNAIRE design system embraces a raw, minimalist aesthetic with a street-wear edge. It features stark black-and-white UI elements on a primarily white canvas, punctuated by a unique, muted sandy-beige for specific content sections and occasional product photography. Typography is compact and precise, often used in all-caps, defining a tight information architecture. Interactive elements are primarily ghost buttons or unstyled links, maintaining a flat, unornamented surface treatment. Use Midnight Ink (#000000) for all primary text, borders, and icons to maintain high contrast with Paper White (#ffffff) backgrounds. Prioritize ghost button styles for interactive elements, employing Midnight Ink (#000000) or Ghost Gray (#888888) for borders and text, with 0px border-radius. Apply PP Neue Montreal as the exclusive font family across all typographic elements, leveraging its different weights for hierarchy rather than different fonts. Employ the Sand Dune (#f7f5e8) color for distinct content sections to subtly break the monochromatic flow without introducing strong chromatic elements. Maintain a compact information density with small element gaps (4px) and relatively small section gaps (30px). Use 15px border-radius sparingly for cards or images, and 50px for certain link elements, otherwise default to 0px for sharp edges. Avoid visible shadows for elevation; rely on color changes or borders to differentiate elements. Do not introduce highly saturated colors for general UI elements; these are reserved for decorative accents or specific product imagery. Refrain from using varied font families or decorative typefaces; maintain a consistent, singular font for brand identity. Do not use large, expansive whitespace between content elements; keep layouts dense and to the point. Avoid generous padding on cards or primary content blocks; content should appear close to edges. Do not use rounded corners universally; apply 0px radius unless specifically designated for cards or certain links.