Vibrants

Vibrants uses a clean, bright aesthetic where information is presented on a spacious white canvas. Typography is primarily functional, with clear sans-serifs defining structure, while a custom display font adds a touch of friendly sophistication to headlines. The system relies on a focused color palette, primarily neutral for backgrounds and text, punctuated by a vibrant green accent color that signals action. Components are lightweight with subtle rounding and minimal elevation, maintaining an airy and approachable feel. Use Midnight Ink (#021422) for all primary body text and most headings to ensure strong contrast and legibility. Apply Cloud White (#ffffff) as the dominant background color for pages and cards to maintain a spacious and clean aesthetic. Reserve Forest Green (#00852e) exclusively for primary call-to-action buttons and prominent promotional badges. Employ new-kansas for main headlines and titles, leveraging its custom weight and negative letter-spacing for brand distinction. Maintain an inverse border radius for card elements, using 8px at the product image's top and 8px at the content area's bottom, with a seamless middle for content flow. Use a minimum element gap of 16px to ensure comfortable spacing between UI elements and content blocks. Apply a 1px solid Fog Gray (#e6e8e9) border for subtle dividers and navigation item separation, not for card outlines. Do not use highly saturated colors for large background areas; limit them to accents and interactive elements. Avoid generic system fonts for headlines; the custom new-kansas and rift-soft families are integral to brand identity. Do not introduce strong drop shadows; keep elevation subtle, if present at all, to maintain the light and airy feel. Do not use multiple accent colors prominently; rely on Forest Green (#00852e) and Sky Blue (#91c3ff) for most interactive states. Avoid dense, information-heavy blocks of text; break content into manageable cards or sections with ample white space. Do not use hard, sharp corners on interactive elements; consistently apply 8px or 3px radii for buttons and badges, or 20px/32px for pill shapes. Refrain from dark mode implementations; the system is designed explicitly for a light theme with high contrast primary text and backgrounds.