customer.io

Customer.io employs a crisp, data-driven interface characterized by clean segmentation and a dominant light theme. The visual system features achromatic surfaces with a cool-tinted dark primary text, accented by a single vivid blue-green for interactive elements and brand signaling. Layouts are structured and functional, using subtle borders and a deliberate lack of heavy shadows to maintain a lightweight feel, allowing data visualizations and key information to stand out. Typography is distinct, utilizing a custom sans-serif with a wide range of weights and precise letter-spacing to convey clarity and precision. Prioritize Midnight Ink (#00262b) for all primary text and headings to ensure strong contrast and readability. Use Oceanic Deep (#0b363b) for essential interface elements like borders, secondary text, and active navigation indicators. Employ the pill-shaped radius (1.67772e+07px) exclusively for buttons and interactive tags to provide a consistent, user-friendly affordance. Utilize Surface White (#ffffff) for card backgrounds and elevated content areas to create visual separation from the Canvas (#ebebeb). Apply Spring Leaf (#abffae) sparingly for interactive button outlines or subtle highlights, leveraging its vividness as an accent. Maintain a clear visual hierarchy by adjusting font weight and size according to the defined type scale, ensuring proper letter-spacing for each role. Separate content sections with clear vertical spacing using the defined sectionGap of 96px for visual breathing room. Do not introduce new saturated primary colors; limit the palette to the defined brand and accent colors. Avoid heavy shadow effects; rely on subtle borders or background color shifts for elevation. Do not use highly decorative fonts; stick to the clean, functional 'saansFont' for all typography. Do not apply excessive padding or margins; follow the comfortable density established by the elementGap and cardPadding. Avoid arbitrary border radii; adhere to 2px for general elements, 6px for specific images, and the pill-shape for buttons. Do not use Electric Blue (#006af2) as a primary button background; reserve it for numerical highlights and specific headline accents. Do not introduce complex gradients; the system relies on solid colors and subtle achromatic shifts for surfaces.