Healthy Together

Healthy Together employs a cool, dark-mode canvas accented by vibrant, saturated gradients and a subtle, soft light theme for content sections. Typography is grounded in a single, versatile sans-serif family, used confidently across a wide range of sizes and precise tracking. Components feature large, pill-shaped buttons for primary actions and subtly rounded cards, providing a friendly yet professional interface. Use Inter font family for all text, applying a global letter-spacing of -0.05em to maintain a consistently tight, condensed feel. Prioritize Plasma Violet (#4541fe) for all primary interactive elements like buttons and key brand highlights. Apply 16000px border-radius for all buttons and small interactive elements to achieve a distinct pill shape. Utilize Canvas Ice (#f9f0ff) or Snow White (#ffffff) for card backgrounds and content sections, reserving Midnight Ink (#101722) for entire page backgrounds in dark mode or hero sections. Maintain a clear visual hierarchy by using the Radiant Gradient for hero sections and dramatic visual introductions. Use 42px border-radius for standard content cards to ensure a soft and approachable appearance across the system. Employ 16px for elementGap horizontally and vertically to create comfortable spacing between UI elements. Avoid using harsh, saturated primary colors for large background areas that are not hero sections or prominent feature cards. Do not deviate from the Inter font family or its defined letter-spacing; consistency is crucial for brand recognition. Never use square or minimally rounded corners for interactive components; all buttons and critical interactive elements should be pill-shaped. Do not introduce new shadow styles for elevated elements; stick to the predefined shadow for Gradient Hero Cards or use no shadow. Avoid using multiple font sizes for body text; aim for 14px or 16px for main content based on context. Do not introduce strong, contrasting colors for text that are not Midnight Ink (#101722), Pale Stone (#6c6c7a), or Snow White (#ffffff). Avoid generic or standard button shapes; the pill-shaped 16000px radius is a core identifier.