{"id":"abbaa70a-5fe2-44a9-9c5f-272e68c450c3","name":"customer.io","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","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","cssVariable":"--color-midnight-ink"},{"name":"Oceanic Deep","hex":"#0b363b","role":"Secondary text, active navigation elements, button outlines, subtle borders. A deep, cool gray that maintains readability","group":"neutral","cssVariable":"--color-oceanic-deep"},{"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","cssVariable":"--color-sky-mist"},{"name":"Amber Pop","hex":"#8b3911","role":"Highlight text within body copy, decorative indicators. A vivid orange that draws attention to specific words","group":"accent","cssVariable":"--color-amber-pop"},{"name":"Indigo Pop","hex":"#0a3890","role":"Highlight text within body copy, decorative indicators. A vivid violet that draws attention to specific words","group":"accent","cssVariable":"--color-indigo-pop"},{"name":"Slate Grille","hex":"#354d51","role":"Muted text, less prominent body copy, icon fills. A medium-dark gray for secondary information","group":"neutral","cssVariable":"--color-slate-grille"},{"name":"Stone Whisper","hex":"#4f6466","role":"Subtle text for secondary buttons or helper text. A mid-tone gray that recedes","group":"neutral","cssVariable":"--color-stone-whisper"},{"name":"Ash Cloud","hex":"#a1c2c6","role":"Lightest secondary text, faint borders, inactive states. A very light gray for tertiary information","group":"neutral","cssVariable":"--color-ash-cloud"},{"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","cssVariable":"--color-spring-leaf"},{"name":"Deep Teal","hex":"#437278","role":"Link text, decorative icon fills. A muted teal for functional, clickable elements","group":"accent","cssVariable":"--color-deep-teal"},{"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","cssVariable":"--color-electric-blue"},{"name":"Pale Mint","hex":"#eafde8","role":"Primary page canvas and white card surfaces","group":"neutral","cssVariable":"--color-pale-mint"},{"name":"Canvas","hex":"#ebebeb","role":"Page background, main content area canvas. A light, neutral gray base for the entire interface","group":"neutral","cssVariable":"--color-canvas"},{"name":"Surface White","hex":"#ffffff","role":"Card backgrounds, navigation bar, interactive element fills. Provides a clean, bright layer above the canvas","group":"neutral","cssVariable":"--color-surface-white"},{"name":"Fog Gray","hex":"#fafafa","role":"Subtly elevated card backgrounds, inner panel sections. A very light gray, barely distinct from white","group":"neutral","cssVariable":"--color-fog-gray"},{"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","cssVariable":"--color-warm-mist"}],"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"}],"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."]}}