replit

Replit's design system evokes a playful yet powerful creative studio, featuring a bright, almost tactile off-white canvas overlaid with soft, rounded forms. Vivid orange accents punctuate the UI, highlighting active states and key actions, suggesting energy and innovation. Typography balances modern geometric sans-serifs with classic readability, often employing tight tracking for headlines to convey a sense of precision and forward momentum. Components are distinctly shaped with generous radii, ranging from slight curves to full pills, giving the interface a friendly, approachable feel despite its technical focus. Prioritize 'Canvas' (#faf6f1) as the primary page background to maintain the warm, receptive visual tone. Use 'Signal Orange' (#ff3c00) exclusively for primary calls-to-action to maximize impact and user focus. Apply generous border-radii: 'pill' (90px) for prominent buttons, '2xl' (60px) for key cards, and 'sm' (6px) for inputs and less prominent interactive elements. Employ ABC Diatype Plus Variable with tight letter-spacing (e.g., -1.92px at 48px) for all headings to create a modern, precise feel. Utilize 'Carbon' (#0e0e0f) for main body text and 'Ash' (#898c94) for secondary or descriptive text consistently for clear hierarchy. Maintain a comfortable density with an 'elementGap' of 8px and 'cardPadding' of 24px between internal block elements. Avoid using multiple bright accent colors; 'Signal Orange' (#ff3c00) and 'Accent Blue' (#2492ff) should be used judiciously and functionally. Do not introduce sharp corners or minimal border-radii; rounded shapes are a core identifier of this system. Refrain from heavy shadows or complex gradients; the system prefers clean surfaces and minimal elevation. Do not use dark backgrounds for major content sections, as the system is anchored in a light mode aesthetic. Avoid generic system fonts when custom fonts are specified; the unique tracking and weights of ABC Diatype are crucial to the brand's typographic identity. Do not rely on subtle color differences for interactive states; ensure sufficient contrast and use 'Signal Orange' for clear feedback.