Circle

Circle utilizes a dark canvas with bright, soft UI elements to project an approachable, yet professional, digital community space. Typography is compact and precise, maintaining clarity against gradients and dark backgrounds. Components are fluid and often feature subtle shadows or blurred backdrops, giving them depth without harshness. The system leverages a rich, cool-toned gradient palette for a vibrant, modern feel, reserving pure white for interactive surfaces to highlight action. Use Inter for all typography, adjusting weight and letter-spacing according to semantic role and size. Apply 9999px border-radius to all interactive elements like buttons and input fields for a consistent soft-edged feel. Reserve Canvas White (#ffffff) for primary content surfaces and interactive elements to maintain high contrast and clarity. Employ the Deep Indigo to Sky Burst linear gradient as a primary background for hero sections and expressive areas, creating a sense of depth. Use Slate Border (#e4e7eb) for subtle dividers, non-essential borders, and outlines to avoid visual clutter. Maintain a clear visual hierarchy with Midnight Eclipse (#0a0a0a) for primary text and Silver Whisper (#737373) for secondary/helper text. Use an 8px element gap for comfortable spacing between most inline and block elements to ensure readability and comfortable density. Avoid using harsh, saturated colors as backgrounds to maintain the site's soft, futuristic aesthetic. Do not deviate from the Inter typeface; alternative fonts will disrupt the precise typographic harmony. Do not use square or sharp-cornered elements; all significant UI components should leverage the established border-radius values. Refrain from heavy, opaque shadows; utilize the transparent, diffused rgba(169, 169, 169, 0.08) 0px 4px 8px 0px for subtle elevation. Do not introduce new primary action colors; the design system favors accent-tinted light buttons for calls to action. Avoid excessive spacing or overly wide line lengths; keep text compact and content focused on the 1376px max-width constraint. Do not use plain solid backgrounds for large content blocks where a gradient or blurred backdrop could provide more visual interest and depth.