Things

This design system evokes a sense of calm efficiency, like a meticulously organized desktop with clean lines and subtle visual cues. The primary visual identity is built around shades of cool gray and a vibrant, yet restrained, blue. High contrast text on light backgrounds prioritizes readability, while carefully applied rounded corners and a singular, subtle shadow provide a touch of visual softness without compromising the overall crispness. The experience feels grounded and clear, guiding the user with precision. Use Midnight Ink (#303336) for all primary headings and major text elements to maintain high contrast and visual weight. Apply Cloud Gray (#f2f5f7) as a background for distinct content sections or cards to create clear visual separation. Reserve Ocean Blue (#2576eb) for critical interactive elements like active links, primary icons, and CTA text to guide user focus. Use a consistent border-radius of 6px for all functional elements like buttons and input fields to ensure a cohesive interactive experience. Ensure generous vertical spacing between sections, using multiples of the 12px token to establish a comfortable content density. Do not introduce new color hues; strictly adhere to the defined grays and blues to preserve the system’s crisp and minimalist aesthetic. Avoid arbitrary border-radii; use 3px for icons, 6px for buttons/inputs, and 18px for cards, and 12.8px for select larger elements. Do not use box-shadows liberally; limit to the subtle rgba(0, 0, 0, 0.1) 0px 2px 8px 0px for single-level elevation. Do not vary font families; maintain the system's reliance on ui-sans-serif for all text to ensure consistent typography and OS integration. Avoid dense packing of content; ensure minimum element gaps of 4px and significant section gaps with 48px to allow content to breathe.