ProtoPie

ProtoPie's design system creates a feeling of approachable high-tech proficiency. Its light theme and ample whitespace are punctuated by vibrant violet accents that guide interaction without overwhelming, like glowing controls on a clean white console. The judicious use of rounded corners—from subtle 4px button radii to emphatic 9999px pills—softens the technical edge, making complex prototyping feel open and inviting. Custom display fonts contribute to a distinctive, playful yet authoritative brand voice. Use Iris Bloom (#8169ff) for primary interactive buttons and links to consistently highlight calls to action. Apply Gilroy 700 for all headings to maintain brand's bold and clear voice, particularly at display sizes up to 62px. Implement 4px border-radius on primary action buttons for a subtle softening, contrasting with the overall sharpness. Incorporate radial-gradient(47.72% 108.66% at -12.1% 21.18%, rgba(129, 219, 219, 0.25) 24.27%, rgba(160, 232, 232, 0) 100%) for background accents to add depth without strong hard lines. Maintain a clear visual hierarchy using Midnight Ink (#181818) for primary text, Stone Gray (#555555) for secondary, and Pale Gray (#999999) for tertiary information. Use 9999px radius for all pill-shaped elements to differentiate them clearly as tags or small categorizations. Employ the rgba(0, 0, 0, 0.12) 0px 3px 12px 0px, rgba(0, 0, 0, 0.3) 0px 0px 2px 0px shadow for cards or elevated content to give subtle lift. Avoid using highly saturated colors outside of the brand's defined violet and aqua accents to maintain a clean, light aesthetic. Do not introduce sharp corners on card-like elements; maintain a minimum of 8px radius to keep the system's approachable feel. Refrain from heavy, dark backgrounds on main content areas; the Ghost White (#ffffff) and Crystal Frost (#e9e9e9) provide necessary breathing room. Do not use generic system fonts for prominent headings; always use Gilroy or designated substitutes to preserve brand identity. Avoid excessive use of Palmer Lake Print; reserve it for specific, high-impact decorative headings only, due to its distinct character. Do not clutter layouts; leverage the comfortable density and significant whitespace to emphasize key content and interactions. Do not deviate from the established padding and spacing units; consistent use of 8px, 12px, 16px is crucial for a cohesive system.