Cycle

Cycle's design system creates a playful yet precise atmosphere, reminiscent of a digital sandbox where complex data is handled with accessible clarity. Soft, rounded elements and a palette of muted pastels with distinct, primary-adjacent accents define its visual identity. Typography combines the clean readability of Inter with the structured presence of Eudoxus Sans, creating a friendly and intelligent feel, while a subtle elevation strategy ensures content hierarchy without visual noise. Use Eudoxus Sans weight 700 and 800 set with negative letter spacing for all primary headings and display text to enforce a deliberate, structured feel. Apply Paper White (#ffffff) as the default background for all page sections and Absolute Black (#171618) for primary text to maintain high contrast and clarity. Implement 10px border-radius for all primary and secondary buttons, and 20px for all information cards, to ensure a consistent, approachable softness. Separate content sections with a sectionGap of 64px for generous vertical breathing room, fostering a clean and open layout. Use Feedback Violet (#38296c), Agent Blue (#004d60), and Insight Amber (#6c4800) as primary chromatic accents, carefully distributing them to associate with specific product features or states. Limit interactive elements like buttons and primary navigation links to Graphite (#727578) for a muted, clean secondary interaction state. Avoid using harsh or sharply angled design elements; opt for rounded corners, soft shadows, and subtle background changes instead. Do not introduce highly saturated or vivid colors into the main UI beyond the carefully curated accent and brand colors, reserving vivid colors for illustrations. Refrain from excessive use of box shadows; use the rgba(239, 239, 239, 0.55) 0px 2px 15px 0px shadow sparingly to suggest subtle elevation without heavy visual weight. Do not deviate from the Inter typeface for body copy, navigation, and button labels; its consistent application maintains readability and system unity. Avoid tight packing of content; utilize elementGap of 16px and other specified padding values to ensure a comfortable and easily scannable interface. Do not use #000000 as a primary foreground color; confine it to borders as indicated by data, defaulting to Absolute Black (#171618) for text.