Hugo & Marie

Hugo & Marie operates with a refined, understated aesthetic characterized by stark monochrome typography and a deliberately sparse, almost gallery-like layout. Clean, unadorned surfaces provide a neutral canvas for striking visual content, while subtle hints of interactivity appear as ghost buttons and hairline borders. The system prioritizes clarity and a sense of curated space, allowing the visual work to take center stage. Use Canvas White (#ffffff) for all main page and card backgrounds to maintain a clean, expansive feel. Employ saol-display weight 100 at 100px with -10px letter-spacing for primary headlines to create a striking, elegant visual statement. Structure content with ample white space, using sectionGap of 90px between major content blocks. Maintain a monochromatic palette with only Ink Black, Graphite, Ash Gray, Silver Mist, and Input Border Gray for UI elements. Apply 9999px border-radius to all badges for a consistent pill shape. Prioritize text-based interactions; button backgrounds are typically transparent, with text and borders defining interactivity. Ensure input fields use explicit borders like Input Border Gray and Canvas White to define their boundaries distinctly from the minimalistic buttons. Avoid using bright or saturated colors for backgrounds, primary text, or interactive elements; reserve accent for content visuals. Do not introduce heavy shadows or gradients on UI components, favoring flat surfaces and subtle borders. Refrain from using bold or heavy weights for soehne when styling headings; its primary use should be for body and navigation. Do not add additional padding to ghost buttons; they should remain as minimalist text links with an implied interactive zone. Avoid decorative iconography that is colorful or heavily outlined; icons should be monochromatic, using Ink Black or Ash Gray. Do not deviate from the defined 9999px radius for badges; all interactive tags or status indicators should adopt this pill shape.