Clay

This design system feels like a thoughtfully organized play-space, balancing crisp professional typography with unexpected bursts of vibrant, playful color in testimonial cards and illustrations. The overall tone is light and inviting, grounded by a clean, spacious layout. Subtle border treatments and generous radii on containers soften the digital edge, creating a friendly yet authoritative aesthetic. Prioritize Roobert for all text, applying specific letter-spacing: -0.0400em for 60px headings and 0.0900em for 10px text, balancing readability and visual density. Use Pitch Black (#000000) for primary text and calls to action, ensuring high contrast against light backgrounds like Ghost White (#ffffff) or Cloud Gray (#f9f8f6). Employ the 40px border-radius for distinct content blocks like testimonial cards, paired with vibrant accent colors (e.g., #ff7614 Tangerine, #cbd810 Lime Pop). Apply Oatmeal (#dad4c8) for subtle borders on UI elements, contributing to a warm, approachable feel without harsh lines. Maintain a clear pageMaxWidth of 1200px for main content, using generous section gaps around multiples of 64px to create a spacious layout. Utilize Clay Violet (#3859f9) consistently for primary interactive elements, links, and key brand highlights, providing a cohesive brand signature. Use 1584px radius for all pill-shaped elements and buttons, reserving the 8px radius for smaller interactive components like nav items. Avoid using harsh, sharp corners; instead, adopt the system's rounded radii, with 12px as a default for most interactive elements and 40px for prominent display cards. Do not introduce new shadow effects; adhere to the subtle inset button shadow (rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px -1px 1px 0px inset, rgba(0, 0, 0, 0.05) 0px -0.5px 1px 0px) for elevation. Refrain from using highly saturated colors for large text blocks; reserve them for accents, backgrounds of component-level cards, or illustrations. Do not deviate from Roobert's specific letter-spacing values at given sizes; these are crucial for the font's intended visual rhythm and legibility. Avoid arbitrary text alignments; maintain left-aligned text for paragraphs and headlines, centered only for specific hero sections or impactful statements. Do not introduce body text sizes smaller than 13px or larger than 18px; use the designated type scale for readable content blocks.