{"id":"3d6eda0c-16ab-4e7e-aca6-5f9a5432bfd1","name":"AutoSend","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/3d6eda0c-16ab-4e7e-aca6-5f9a5432bfd1","originalSiteUrl":"https://autosend.com","capturedAt":"2026-04-30T00:14:11.326Z","colors":[{"name":"Ink","hex":"#292524","role":"Primary text, strong headings, prominent icons, dark borders","group":"neutral","cssVariable":"--color-ink"},{"name":"Paper","hex":"#fafaf9","role":"Page background, button backgrounds","group":"neutral","cssVariable":"--color-paper"},{"name":"Whisper","hex":"#e7e5e4","role":"Subtle borders, dividers, secondary backgrounds","group":"neutral","cssVariable":"--color-whisper"},{"name":"Snow","hex":"#ffffff","role":"Card backgrounds, elevated surfaces, button text on colored backgrounds","group":"neutral","cssVariable":"--color-snow"},{"name":"Graphite","hex":"#79716b","role":"Secondary text, muted links, subtle icons, placeholder text","group":"neutral","cssVariable":"--color-graphite"},{"name":"Stone","hex":"#a6a09b","role":"Tertiary text, decorative strokes, very light borders","group":"neutral","cssVariable":"--color-stone"},{"name":"Ebony","hex":"#0c0a09","role":"Deepest text, high-contrast borders","group":"neutral","cssVariable":"--color-ebony"},{"name":"Violet Action","hex":"#615fff","role":"Primary call-to-action background, active states, key interactive indicators","group":"brand","cssVariable":"--color-violet-action"},{"name":"Violet Accent","hex":"#4f39f6","role":"Outlined button borders, decorative strokes and accents, links requiring emphasis","group":"brand","cssVariable":"--color-violet-accent"},{"name":"Sunset Orange","hex":"#d97757","role":"Decorative card borders, subtle highlights, specific data points","group":"accent","cssVariable":"--color-sunset-orange"},{"name":"Emerald Green","hex":"#5ea500","role":"Green outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color","group":"accent","cssVariable":"--color-emerald-green"},{"name":"Alert Red","hex":"#ff0000","role":"Red accent for outlined action borders, linked labels, and lightweight interactive emphasis. Use as a supporting accent, not as a status color","group":"accent","cssVariable":"--color-alert-red"},{"name":"Ocean Teal","hex":"#22b8cd","role":"Informational highlights, secondary data points, decorative icons","group":"accent","cssVariable":"--color-ocean-teal"},{"name":"Sky Blue","hex":"#007ebb","role":"Informational links, decorative borders, specific icon states","group":"accent","cssVariable":"--color-sky-blue"},{"name":"Lime Accent","hex":"#9ae600","role":"Background for subtle highlights, decorative fills for illustrations","group":"accent","cssVariable":"--color-lime-accent"}],"typography":[{"role":"Primary UI text for body copy, navigation, buttons, and most headings — the core workhorse sans-serif for readability and clean modern feel.","sizes":"12px, 14px, 16px, 18px, 20px, 40px","family":"Geist","weight":"400, 600","weights":[400,600],"lineHeight":"1.20, 1.33, 1.38, 1.43, 1.50, 1.56","substitute":"Inter","letterSpacing":"normal"},{"role":"Monospaced text for code blocks, tags, and data points where precise alignment and character distinction are important.","sizes":"12px, 13px, 14px, 16px","family":"Geist Mono","weight":"400, 500, 600","weights":[400,500,600],"lineHeight":"1.00, 1.14, 1.33, 1.43, 1.50, 1.54","substitute":"JetBrains Mono","letterSpacing":"0.0400em for smaller sizes, 0.1000em for emphasized labels."},{"role":"Display font used for prominent page titles and hero headlines, adding a touch of classic sophistication and distinctiveness.","sizes":"18px, 80px","family":"cooperLtBT","weight":"400","weights":[400],"lineHeight":"1.10, 1.33","substitute":"serif font like Playfair Display","letterSpacing":"normal"},{"role":"Specialized font for specific body text sections, offering unique character for product descriptions or callouts.","sizes":"24px","family":"dataType","weight":"400","weights":[400],"lineHeight":"1.33","substitute":"Montserrat","letterSpacing":"normal"},{"role":"Fallback sans-serif for general text, ensuring readability across all platforms if custom fonts fail to load.","sizes":"16px","family":"ui-sans-serif","weight":"400","weights":[400],"lineHeight":"1.50","substitute":"system-ui","letterSpacing":"normal"}],"spacing":{"radius":{"tags":"12px","cards":"16px","buttons":"8px","interactiveElements":"8px"},"elementGap":"24px","sectionGap":"80px","cardPadding":"16px","pageMaxWidth":"1200px"},"radius":{"tags":"12px","cards":"16px","buttons":"8px","interactiveElements":"8px"},"shadows":{"surfaces":[{"hex":"#fafaf9","name":"Page Background","level":0,"purpose":"The primary canvas for content, providing a light, airy foundation."},{"hex":"#ffffff","name":"Card Surface","level":1,"purpose":"Used for content cards and elevated elements, creating a sense of lift from the page background."},{"hex":"#e7e5e4","name":"Subtle Background","level":2,"purpose":"An even lighter neutral used for subtle background variations or muted sections."}]},"guidelines":{"do":["Prioritize Geist for all marketing and UI text, reserving cooperLtBT exclusively for hero headlines and prominent display text.","Use Paper (#fafaf9) for main page backgrounds and Snow (#ffffff) for card and elevated surfaces to establish surface hierarchy.","Apply Violet Action (#615fff) strictly to primary call-to-actions, ensuring it consistently signals interactivity and importance.","Maintain a clear visual rhythm with section gaps of 80px and elemental gaps of 24px.","Use 8px border-radius for all interactive elements like buttons and input fields, and 16px for larger content cards.","For subtle depth, apply the card shadow (rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px) sparingly, primarily on content cards.","Utilize Geist Mono for all code snippets, data labels, and elements requiring monospace alignment, applying 0.04em or 0.10em letter-spacing as appropriate for emphasis."],"dont":["Avoid using saturated accent colors other than Violet Action (#615fff) for primary button backgrounds; these are reserved for borders, icons, or specific highlights.","Do not deviate from the defined border radii; mixing different radius values will disrupt the systematic feel.","Refrain from introducing new shadow styles; rely solely on the specified card shadow for elevation.","Do not use generic system fonts for headings or body text, as Geist and cooperLtBT define the brand's typographic identity.","Avoid excessive use of borders; many components rely on background color differences or subtle shadows for separation.","Do not use the neutral colors with chromatic names like 'Twilight Indigo' when creating new color tokens; stick to neutral descriptions.","Do not apply letter-spacing to regular body text set in Geist; it should remain 'normal' for optimal readability."]}}