OLIPOP

This design system evokes a sense of playful nostalgia fused with modern health consciousness. Dominant dark teal (#14433d) and creamy off-white (#fdf7e7) establish a comforting, natural palette, punctuated by a diverse array of pastel and vivid fruit-inspired accent colors for product showcase. The custom 'WindsorEF' typeface with weighty, generous letterforms and tight line-height gives headings an almost hand-drawn, vintage soda shop feel, while the 'Ano' sans-serif provides crisp, legible body text. Rounded corners and liberal padding contribute to an approachable, soft aesthetic, countering the sharp contrast of the headline fonts. Do use WindsorEF at weights 700-900 for all primary headings, particularly 72px and 80px, to establish the distinct brand voice. Do apply a 50px border-radius to all buttons and a 49px radius to input fields, ensuring a consistent soft, pill-shaped interaction aesthetic. Do use Deep Sea Teal (#14433d) for all primary interactive elements like buttons and active navigation links. Do ensure Creamy Canvas (#fdf7e7) or Cloud Burst Gray (#d3e8e3) serve as the primary background colors for sections, providing a light, inviting base. Do employ a diverse array of pastel and vivid accent colors (e.g., #febac4, #e3d2ed, #fdf4b5) for product cards to visually differentiate offerings. Do maintain a compact vertical rhythm, with section gaps typically between 40-80px and elemental gaps between 8-20px. Do use Ash Slate (#3a3a3a) for all primary body text to ensure strong readability against light backgrounds. Don't use overly sharp or angular graphic elements; everything should lean towards rounded and soft forms (min 16px radius for cards). Don't dilute the impact of Deep Sea Teal (#14433d) by using other saturated primary colors for main calls to action. Don't introduce additional display fonts; WindsorEF is exclusive for prominent headlines, and Ano for supporting text. Don't use strong box shadows for cards or general elevation; the design relies on color and slight border separation for depth. Don't use generic system UI fonts like Helvetica for prominent information; it's reserved for subtle functional text. Don't deviate from the established accent color palette for product categorization; stick to the provided range (e.g., #febac4, #e3d2ed, #fdf4b5, #4ac1e0).