{"id":"abbaa70a-5fe2-44a9-9c5f-272e68c450c3","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/abbaa70a-5fe2-44a9-9c5f-272e68c450c3","originalSiteUrl":"https://customer.io","capturedAt":"2026-04-30T00:54:02.159Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"customer.io","summary":"Architectural Blueprint on Frosted Glass","description":"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.","industry":"saas","colorScheme":"light","colors":[{"name":"Midnight Ink","hex":"#00262b","role":"Primary text, prominent headings, dark button backgrounds, navigation text. This near-black provides strong contrast against light surfaces","group":"neutral"},{"name":"Oceanic Deep","hex":"#0b363b","role":"Secondary text, active navigation elements, button outlines, subtle borders. A deep, cool gray that maintains readability","group":"neutral"},{"name":"Sky Mist","hex":"#e0f4ff","role":"Decorative background accents, subtle borders on cards and images. A very light, cool gray with a hint of blue","group":"neutral"},{"name":"Amber Pop","hex":"#8b3911","role":"Highlight text within body copy, decorative indicators. A vivid orange that draws attention to specific words","group":"accent"},{"name":"Indigo Pop","hex":"#0a3890","role":"Highlight text within body copy, decorative indicators. A vivid violet that draws attention to specific words","group":"accent"},{"name":"Slate Grille","hex":"#354d51","role":"Muted text, less prominent body copy, icon fills. A medium-dark gray for secondary information","group":"neutral"},{"name":"Stone Whisper","hex":"#4f6466","role":"Subtle text for secondary buttons or helper text. A mid-tone gray that recedes","group":"neutral"},{"name":"Ash Cloud","hex":"#a1c2c6","role":"Lightest secondary text, faint borders, inactive states. A very light gray for tertiary information","group":"neutral"},{"name":"Spring Leaf","hex":"#abffae","role":"Interactive button borders (e.g., ghost buttons), subtle highlights for active elements. A vivid, almost neon green-yellow that indicates interactive states","group":"brand"},{"name":"Deep Teal","hex":"#437278","role":"Link text, decorative icon fills. A muted teal for functional, clickable elements","group":"accent"},{"name":"Electric Blue","hex":"#006af2","role":"Numerical highlights (e.g., percentages), bold accents in headlines. A vivid blue for numerical and impactful data display","group":"accent"},{"name":"Pale Mint","hex":"#eafde8","role":"Primary page canvas and white card surfaces","group":"neutral"},{"name":"Canvas","hex":"#ebebeb","role":"Page background, main content area canvas. A light, neutral gray base for the entire interface","group":"neutral"},{"name":"Surface White","hex":"#ffffff","role":"Card backgrounds, navigation bar, interactive element fills. Provides a clean, bright layer above the canvas","group":"neutral"},{"name":"Fog Gray","hex":"#fafafa","role":"Subtly elevated card backgrounds, inner panel sections. A very light gray, barely distinct from white","group":"neutral"},{"name":"Warm Mist","hex":"#feefe8","role":"Decorative background accents, subtle borders on cards and images. A very light, warm gray with a hint of warm tint","group":"neutral"}],"typography":[{"role":"The primary typeface for all content. Its precise letter-spacing and varied weights allow for clear hierarchy and detail, from headings to small functional text. The custom font contributes to a sharp, modern feel, prioritizing readability at all scales.","sizes":"12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 40px, 48px, 96px","family":"saansFont","weight":"475, 500, 600, 700","lineHeight":"1.00, 1.25, 1.38","substitute":"Inter","letterSpacing":"0.017, 0.014, 0.013, 0.011, 0.01, 0.008, 0.007, 0.006, 0.005, 0.004, 0.002"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.38,"letterSpacing":0.017},{"role":"body-sm","size":14,"lineHeight":1.38,"letterSpacing":0.014},{"role":"body","size":16,"lineHeight":1.38,"letterSpacing":0.013},{"role":"subheading","size":20,"lineHeight":1.25,"letterSpacing":0.01},{"role":"heading-sm","size":24,"lineHeight":1.25,"letterSpacing":0.008},{"role":"heading","size":36,"lineHeight":1.25,"letterSpacing":0.006},{"role":"heading-lg","size":48,"lineHeight":1.25,"letterSpacing":0.004},{"role":"display","size":96,"lineHeight":1,"letterSpacing":0.002}],"spacing":{"radius":{"images":"6px","buttons":"1.67772e+07px","default":"2px"},"elementGap":"8px","sectionGap":"96px","cardPadding":"32px"},"radius":{"images":"6px","buttons":"1.67772e+07px","default":"2px"},"shadows":{"surfaces":[{"hex":"#ebebeb","name":"Canvas","level":0,"purpose":"The foundational background for all pages, providing a neutral stage."},{"hex":"#ffffff","name":"Surface White","level":1,"purpose":"Used for primary content containers like cards and main navigation, visually lifting them from the canvas."},{"hex":"#fafafa","name":"Fog Gray","level":2,"purpose":"For subtle secondary content panels or internal sections within cards, offering a slight visual distinction from Surface White."},{"hex":"#eafde8","name":"Pale Mint","level":3,"purpose":"Used for specific background sections, indicating a successful or positive context, or for decorative breaks."},{"hex":"#feefe8","name":"Warm Mist","level":4,"purpose":"Alternative decorative background used on specific UI elements or sections, offering a warm subtle contrast."},{"hex":"#e0f4ff","name":"Sky Mist","level":5,"purpose":"Another decorative background used for distinct content blocks, especially those related to data or information, providing a cool subtle tint."}]},"guidelines":{"do":["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."],"dont":["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."]},"components":[{"name":"Primary Filled Button","role":"Primary calls to action."},{"name":"Outline Accent Button","role":"Secondary calls to action, or actions requiring less visual weight."},{"name":"Ghost Inner Button","role":"Tertiary actions, often within content blocks or secondary navigation."},{"name":"Clean Content Card","role":"Container for distinct content blocks, features."},{"name":"Navigation Link","role":"Navigation items in header or footer."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference: \n- text: #00262b\n- background: #ebebeb\n- border: #0b363b\n- accent: #abffae\n- primary action: #0b363b (filled action)\n\nExample Component Prompts:\n- Create a Primary Action Button: #0b363b background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n- Create a feature card: Surface White background (#ffffff), 32px padding on all sides. Headline at 24px saansFont weight 600 (#00262b), letter-spacing 0.0080. Body text at 16px saansFont weight 475 (#354d51), letter-spacing 0.0130."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777510412953-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777510412953-thumb.jpg"},"similarStyleIds":["376baf20-9ace-405d-bf4a-086016f2b1e3","9fecf7d6-b717-49ca-8edc-b10d6110b21c","12255b63-e506-4bc1-a4cd-d05487de32f3","75fdb89f-ca64-41b3-af36-7a78bd09448e","62b22816-2d98-4e98-9c17-bf600ddb2fc8","8f42603d-7ff9-446e-99a3-6bdd1f388ae5","3677bc04-7461-4aa4-aec7-5291bac41b0b","2db41cd9-c898-4f59-b704-3042c0d87f45","a76ec6ba-20b3-495c-9d89-1e58281e79e7","ced1c98f-d489-48f7-a01f-1fa59a07b706","d3289fe7-a85e-42d8-96b7-eb7faa62a104","3963a727-8dec-4308-80c0-3ae198d15b87","68d18deb-bb09-4258-8024-001af9c844c0","9342e89b-c2fe-4acf-9993-53b44e0c13b5","7337d65c-9a98-4b0f-b8bb-6f470742af98","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","47c9e353-bed3-4d6c-8316-63a2db5cc377","9946887b-ffa9-4276-af81-ae6352795afb","1ae4bcfe-c613-42fc-aab7-f9583381e7cc","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a"],"exports":{"designMdUrl":"/references/refero/abbaa70a-5fe2-44a9-9c5f-272e68c450c3/design.md","tokensJsonUrl":"/references/refero/abbaa70a-5fe2-44a9-9c5f-272e68c450c3/tokens.json","tailwindV4Url":"/references/refero/abbaa70a-5fe2-44a9-9c5f-272e68c450c3/tailwind-v4.css","cssVariablesUrl":"/references/refero/abbaa70a-5fe2-44a9-9c5f-272e68c450c3/tailwind-v4.css"}}