Resident

Resident employs a disciplined, gallery-like visual language, emphasizing product photography with stark white space and precise, minimal typography. Achromatic tones of black and white dominate, providing a quiet canvas for product hero shots. The design system leans into content-rich layouts, using tight typographic control for an authoritative, editorial feel, with interactive elements sparingly articulated through subtle borders and text rather than bold fills. Prioritize product photography as the focal point, allowing images to extend full-bleed or occupy significant visual space without heavy UI overlays. Use Ink Black (#000000) for all primary text and headings against Canvas White (#ffffff) backgrounds to maintain a high-contrast, editorial feel. Maintain a density of comfortable spacing by defaulting to 21px for element gaps and 14px for card padding, creating breathing room around content. Apply 0px border-radius to all major interactive elements and cards, preserving the sharp, architectural aesthetic. Utilize MessinaSansWeb for headlines and prominent body text with letter-spacing adjusted for precise visual fit, like -0.0370em at 27px. Employ sans-serif (system font) for secondary and utility text, ensuring high legibility and efficiency for smaller, functional details. Use subtle, text-based interactive elements (buttons, links) with minimal styling — often transparent backgrounds and thin borders instead of filled shapes. Avoid using saturated or bright colors; restrict the palette almost entirely to achromatic neutrals (Canvas White, Ink Black, Muted Ash, Graphite). Do not use box-shadows or elevated elements; maintain a flat, two-dimensional design language for all UI components. Refrain from using heavily styled buttons with solid color fills; default to text links, ghost buttons, or subtly outlined elements. Do not introduce decorative gradients or complex backgrounds; interfaces should be clean Canvas White to highlight content. Avoid generic large-scale letter-spacing; use the precise, negative letter-spacing defined for MessinaSansWeb at larger sizes for consistency. Do not break away from the minimal, stark presentation of interactive elements; avoid hover effects that drastically change component appearance.