Tapbots

Ivory's design system evokes a cosmic, playful yet precise feel, like exploring a high-tech constellation. Deep space purples and blacks provide a dramatic stage for luminous accents of violet and glowing green, creating a narrative of discovery. Spherical and rounded forms, particularly the 40px radius on interactive elements, soften the tech aesthetic, making the advanced functionality feel approachable. Use Midnight Void (#05050b) as the default background color for full-bleed sections and Deep Shadow (#1a1a1a) for hero sections, creating a sense of depth and atmosphere. Apply a 40px radius to all interactive elements, like buttons and prominent links, for a consistent soft and approachable feel. For primary call-to-action buttons, use Button Violet (#301e4f) as the background and Luminous Violet (#ba94ff) for text, ensuring high contrast and brand coherence. Highlight key headings and feature descriptions with Highlight Violet (#9466e7) or Emerald Glow (#74ec5a) to punctuate the dark background. Maintain generous vertical spacing between sections, leveraging values like 64px for sectionGap to ensure spaciousness and readability. Prioritize -apple-system font with weight 400 or 500 and Ghost White (#ffffff) for all main body text to maximize readability on dark surfaces. Incorporate Skyfire Gradient (linear-gradient(to right bottom, rgb(108, 176, 255), rgb(247, 71, 255))) for decorative backgrounds or visual accents to reinforce the cosmic metaphor. Avoid using harsh, fully saturated primary colors for large text blocks; reserve vivid hues like Luminous Violet (#ba94ff) only for interactive elements or small accents. Do not use sharp corners; the 40px global radius for interactive elements and 18px for lists is fundamental to the system's soft, playful character. Do not introduce additional font families; the entire system relies on -apple-system to maintain its native and unified aesthetic. Avoid generic gray for interactive elements; all buttons and active links must use Luminous Violet (#ba94ff) or Button Violet (#301e4f) tones. Do not neglect vertical spacing; the generous sectionGap of at least 64px and elementGap of 10px are crucial for maintaining the spacious layout. Refrain from using strong shadows or complex elevation; the site foregrounds depth through color shifts rather than traditional shadow mechanics. Avoid box-shadow values. Never use background-color: #ffffff on its own as a primary background; the design is dark-themed and relies on the progression of deep grays and purples.