drink818

The drink818 brand design system evokes a sense of understated luxury, blending natural tones with classic typography. A dominant muted green-gray serves as a grounding canvas, while a creamy off-white provides a soft, warm counterpoint for text and interactive elements. Typography is a mix of heritage serif for display and modern sans-serif for functional text, often with generous letter-spacing for an airy, refined feel. Interface elements are generally subtle, favoring rounded shapes and a focus on content over heavy decoration, with interactivity indicated by color shifts and slight elevation. Prioritize Agave Green (#536451) as the primary background for full-screen overlays or prominent sections, and Parchment White (#f3e9d5) for text and interactive elements on these darker surfaces. Use CaslonPro for general body text and navigation, maintaining the provided size/line-height/letter-spacing combinations to ensure the classical, refined feel. Implement ABCFavoritMono for all input fields and dense data displays, ensuring generous letter-spacing to enhance its distinct monospace character. Apply 4px border-radius to all interactive buttons and navigational components for a subtle softening of edges, and 10-20px for larger content cards and input fields for a more prominent rounded aesthetic. Ensure headings use GravityVariable with its specific letter-spacing, particularly the negative tracking at larger sizes, to convey a crisp, modern presence. Leverage Ink Black (#0e1111) for primary text on Parchment White (#f3e9d5) or Warm Linen (#faf7ef) surfaces to maintain optimal contrast and readability. Maintain a comfortable density with element gaps typically around 10px and card padding at 16px to ensure visual breathability throughout the layout. Avoid arbitrary use of #bebc65 (Lemon Zest) as a UI element; reserve it strictly for decorative backgrounds or product highlights as an accent, not for functional components. Do not introduce sharp, unrounded corners for interactive elements such as buttons and inputs, as the system consistently uses 4px or 10px radii. Refrain from using heavily saturated colors for backgrounds or large UI areas, as the system relies on a muted, earthy palette for its primary identity. Do not deviate from the specified letter-spacing values for typefaces, especially the unique tracking of GravityVariable and ABCFavoritMono, as these are critical to the brand's typographic tone. Avoid excessive use of elevation or shadows, as the design system favors subtle surface changes and color separation for hierarchy. Do not create dense, text-heavy blocks without sufficient line-height or letter-spacing, which would compromise the airy and refined feel of the typography. Do not combine multiple contrasting background colors within a single section unless specifically designed as an accent feature, as the system prioritizes monolithic color blocks for clarity.