Atoms

This design system feels like a friendly, efficient digital workshop. It skillfully blends utility with approachable charm through its use of a clean, high-contrast palette predominantly featuring white and deep black text. The signature playful elements include the 'Atoms Blue' primary accent, soft rounded corners on interactive elements and cards, and a subtle card elevation that adds visual depth without distracting. This balance creates an experience that is both professional and inviting, hinting at complex technology made simple. Use IBM Plex Sans for all text elements unless a specific distinction for display headings is required, reserving IBM Plex Serif for display role. Apply Atoms Blue (#4267ff) exclusively for primary CTAs and key interactive elements, maintaining its impact. Ensure all buttons and badges utilize a 9999px border radius for a consistent, soft-edged interaction point. Maintain a clear visual hierarchy by using Deep Graphite (#0d0d0d) for primary headings and important text, and Medium Gray (#767676) for secondary information. Use the specific card shadow (rgba(13, 13, 13, 0.08) 0px 8px 24px -4px, rgba(13, 13, 13, 0.04) 0px 4px 4px 0px) to give elements subtle elevation and visual distinction. Do not introduce new typefaces; rely on IBM Plex Sans and IBM Plex Serif for all typographic needs. Avoid using saturated colors as background for large content areas; reserve them for accents and specific gradients. Do not vary the border radius on interactive buttons; always use 9999px for consistent affordance. Refrain from adding heavy borders or strong dropshadows to elements other than the defined card variant; maintain a light and airy feel. Do not deviate from the established spacing scale (multiples of 4px and 8px) to maintain a harmonious layout density.