Jitter

Jitter's design system feels like a playful yet precise workspace, balancing modern utility with a hint of creative energy. The stark contrast between near-black text and a luminous white background creates immediate clarity, while the prominent use of rounded forms, especially large 40-50px radii, softens the otherwise sharp presentation. Energetic violet and blue accents punctuate key interactions, guiding the user through a clean, spacious interface. Prioritize TWK Lausanne for all display text and primary headings to maintain a bold, modern voice, using the tight letter-spacing as found in the typography specification. Utilize Jitter Violet (#7A40ED) exclusively for primary calls-to-action to ensure maximum visual hierarchy and user guidance. Apply a 40px border-radius to almost all interactive elements and contained content blocks to maintain the system's signature soft, approachable shape. Use White Canvas (#FFFFFF) as the dominant background color for page sections and primary content areas, contrasted by deep Carbon (#19171C) text. Implement the layered shadow rgba(25, 23, 28, 0.01) 0px 152px 61px, rgba(25, 23, 28, 0.05) 0px 85px 51px, rgba(25, 23, 28, 0.09) 0px 38px 38px, rgba(25, 23, 28, 0.1) 0px 9px 21px for elements requiring significant visual elevation. Employ Inter font for all body copy and UI element text for optimal readability across various sizes and contexts. Maintain a clear page structure with a maximum content width of 860px, ensuring consistent alignment and readability. Avoid using flat, square buttons or cards; all interactive elements should incorporate the generous 40-50px border-radius. Do not introduce new vibrant colors beyond the defined Jitter Violet and Sky Blue accents; the color palette is intentionally refined. Refrain from using excessive or varied drop shadows; stick to the defined layered shadow for elevation or no shadow for flat elements. Do not deviate from the specified TWK Lausanne and Inter fonts or their respective letter-spacing values, especially for headings, to preserve typographic identity. Avoid centering large blocks of body text; left-alignment is preferred for readability within the narrow max-width constraint. Do not use dark backgrounds for entire page sections unless leveraging the specific Nebula Gradient, preserving the light theme's clarity.