AATHER

AATHER employs a refined, subdued aesthetic, prioritizing high-quality product photography over bold UI. The design uses nearly achromatic colors, with deep charcoal text on pristine white or nuanced off-white backgrounds, creating a sense of understated luxury. Typography leans towards delicate, thin weights, establishing a gentle, sophisticated voice. Components are minimal, often borderless or with subtle hairline outlines, ensuring the UI fades into the background, allowing content to take center stage. Prioritize product photography as the focal point, ensuring it is clean, well-lit, and isolated, often on neutral backdrops. Use Gestura Text Extra Light and Thin for headings and display text, embracing its delicate nature at 35px for prominent statements. Apply Untitled Sans for all functional UI text (body, navigation, buttons, forms), varying weights from 100 to 400, for clarity and sophistication. Maintain a high-contrast palette with Inkwell (#000000) for text and Paper White (#ffffff) for backgrounds, with Ash Gray (#808080) for secondary information. Keep components visually lightweight: prefer ghost buttons, thin borders (1px Inkwell or Ash Gray), and absent shadows to ensure content dominance. Use a base unit of 4px for all spacing decisions, particularly for minimal element gaps like 10px and section separators around 25px. Employ a subtle 2px border radius specifically for interactive elements like buttons and input fields to offer a soft, modern touch without being overly rounded. Avoid using bold or heavy typography for headlines; the Brand's voice relies on lightness and restraint. Do not introduce strong accent colors or vivid hues; the palette is strictly achromatic and relies on subtle shifts in gray. Steer clear of pronounced shadows or heavy elevation styles; the design emphasizes flatness and a light, airy feel. Do not add excessive padding or prominent borders to cards; these should blend into the background as content containers. Do not use highly rounded corners (e.g., 8px or more); the maximum radius is 2px for specific interactive elements. Avoid busy or dense layouts; spaciousness is key to presenting products and content with an upscale feel. Do not use system-default link underlines or colors; all interactive text should follow the Inkwell color and subtle underline pattern.