Everafter

EverAfter projects a refined, intelligent digital environment using a deep violet primary color accented by vibrant, almost neon, hues. Typography is a confident mix of a distinctive serif for headings and a clean sans-serif for body text, establishing an authoritative yet approachable tone. Surfaces are predominantly light and spacious, juxtaposed with the dramatic dark hero sections, creating clear visual hierarchy and drawing attention to key AI product features. Interaction elements are clearly defined with ample padding and generously rounded corners, suggesting a user-friendly, modern experience. Use Moret font for all headlines, applying letterSpacing: -0.0190em consistently for high impact. Apply Electric Violet (#793cfb) only for primary interactive elements, reserving its vividness for key actions. Ensure all buttons and inputs have a 999px border-radius, creating a soft, approachable pill-shaped appearance. Maintain a clear visual hierarchy by using Midnight Orchid (#221437) for primary text and Canvas White (#ffffff) for page backgrounds in light sections. Separate sections with a minimum of 186px vertical spacing, and content blocks with 42px internal card padding to ensure readability and spaciousness. Utilize Ghost Marble (#f8f5ff) as a subtle background for secondary content sections or slightly elevated interface elements to add depth without heaviness. Apply the Hero Gradient (linear gradient from #e7cae4 to #f8f5ff) specifically for prominent banner areas and large hero sections to build visual drama. Do not use saturated colors on anything other than accent tags or primary calls to action; maintain a mostly neutral palette for content. Avoid applying heavy drop shadows; the system favors subtle elevation cues like background color changes or faint shadow tints. Do not deviate from the established border radii; the combination of 999px for interactive elements and 24px for cards is a signature element. Refrain from tight spacing; an ample use of a minimum 8px element gap and much larger section gaps defines the spacious aesthetic. Do not mix Moret with other serif typefaces; stick to Moret for display and Inter for body copy. Avoid using any black (#000000) for body text; it's reserved for specific graphic elements or very large, impactful text against light backgrounds. Do not introduce new border styles; the design primarily uses subtle 1px solid borders or relies on background contrast for separation.