{"id":"3d6eda0c-16ab-4e7e-aca6-5f9a5432bfd1","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","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":"AutoSend","summary":"Crisp White Canvas","description":"AutoSend employs a crisp, modern aesthetic built on a soft white canvas and strong typographic presence. A single vibrant violet is designated for primary actions, contrasting with otherwise subdued interactions. Surfaces are clean and often borderless, relying on subtle shadows for depth rather than heavy outlines. The system prioritizes clear information hierarchy and lightweight components, allowing content to take precedence.","industry":"saas","colorScheme":"light","colors":[{"name":"Ink","hex":"#292524","role":"Primary text, strong headings, prominent icons, dark borders","group":"neutral"},{"name":"Paper","hex":"#fafaf9","role":"Page background, button backgrounds","group":"neutral"},{"name":"Whisper","hex":"#e7e5e4","role":"Subtle borders, dividers, secondary backgrounds","group":"neutral"},{"name":"Snow","hex":"#ffffff","role":"Card backgrounds, elevated surfaces, button text on colored backgrounds","group":"neutral"},{"name":"Graphite","hex":"#79716b","role":"Secondary text, muted links, subtle icons, placeholder text","group":"neutral"},{"name":"Stone","hex":"#a6a09b","role":"Tertiary text, decorative strokes, very light borders","group":"neutral"},{"name":"Ebony","hex":"#0c0a09","role":"Deepest text, high-contrast borders","group":"neutral"},{"name":"Violet Action","hex":"#615fff","role":"Primary call-to-action background, active states, key interactive indicators","group":"brand"},{"name":"Violet Accent","hex":"#4f39f6","role":"Outlined button borders, decorative strokes and accents, links requiring emphasis","group":"brand"},{"name":"Sunset Orange","hex":"#d97757","role":"Decorative card borders, subtle highlights, specific data points","group":"accent"},{"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"},{"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"},{"name":"Ocean Teal","hex":"#22b8cd","role":"Informational highlights, secondary data points, decorative icons","group":"accent"},{"name":"Sky Blue","hex":"#007ebb","role":"Informational links, decorative borders, specific icon states","group":"accent"},{"name":"Lime Accent","hex":"#9ae600","role":"Background for subtle highlights, decorative fills for illustrations","group":"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"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5,"letterSpacing":0.48},{"role":"body-sm","size":14,"lineHeight":1.43,"letterSpacing":0.56},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":0},{"role":"subheading","size":18,"lineHeight":1.38,"letterSpacing":0.72},{"role":"heading","size":40,"lineHeight":1.2,"letterSpacing":0},{"role":"display","size":80,"lineHeight":1.1,"letterSpacing":0}],"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."]},"components":[{"name":"Primary Filled Button","role":"Primary call-to-action button."},{"name":"Ghost Button","role":"Secondary action button."},{"name":"Text Button","role":"Minimal interactive element, inline actions."},{"name":"Feature Card","role":"Content container for features or articles with subtle elevation."},{"name":"Minimal Card","role":"Flat content container without elevation."},{"name":"Input Field","role":"Standard text input field."},{"name":"Navigation Link","role":"Primary site navigation items."},{"name":"Badge","role":"Small, informative labels or tags."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference: \n- text: #292524\n- background: #fafaf9\n- border: #e7e5e4\n- accent: #d97757\n- primary action: #615fff (filled action)\n\nExample Component Prompts:\n- Create a hero section: Paper background, centered cooperLtBT weight 400 headline at 80px in Ink. Subtext in Geist weight 400 at 18px in Graphite. Primary Filled Button (#615fff, text Snow, 8px radius, 8px vertical padding, 24px horizontal padding) and a Ghost Button (Ink text and border, 8px radius, 8px vertical padding, 24px horizontal padding).\n- Generate a feature card: Snow background, 16px radius, with the subtle card shadow. Use Geist weight 600 at 20px for headings in Ink, and Geist weight 400 at 16px for body text in Graphite. Card padding 16px. Include a small icon in Violet Accent (#4f39f6).\n- Create a Primary Action Button: #615fff background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508026241-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508026241-thumb.jpg"},"similarStyleIds":["b5fdba21-fd4d-427e-b551-1e22c51e42db","e050061c-346d-44cc-92ba-6b22beb4a91f","736830b5-90b1-47b0-99dd-d79454a0d22a","12255b63-e506-4bc1-a4cd-d05487de32f3","75fdb89f-ca64-41b3-af36-7a78bd09448e","2eab438d-32cd-40c2-b160-1e4127dac569","cbd8a058-6ecb-4f1b-9b5a-2bf2597826ee","7b083729-e694-4b66-82a3-befb08451722","9501cfdc-3eb3-4b64-90f6-9afdded48945","9fecf7d6-b717-49ca-8edc-b10d6110b21c","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","186775da-7568-49e5-8110-4fd0bbc7bbe3","62b22816-2d98-4e98-9c17-bf600ddb2fc8","11cfc460-807b-42c5-b10a-7b042c60f3e8","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","123a15b8-4e17-4812-83ec-899cce45db5b","15d10d6c-1844-46c6-ae69-c99a56e6ad41","0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d","47c9e353-bed3-4d6c-8316-63a2db5cc377"],"exports":{"designMdUrl":"/references/refero/3d6eda0c-16ab-4e7e-aca6-5f9a5432bfd1/design.md","tokensJsonUrl":"/references/refero/3d6eda0c-16ab-4e7e-aca6-5f9a5432bfd1/tokens.json","tailwindV4Url":"/references/refero/3d6eda0c-16ab-4e7e-aca6-5f9a5432bfd1/tailwind-v4.css","cssVariablesUrl":"/references/refero/3d6eda0c-16ab-4e7e-aca6-5f9a5432bfd1/tailwind-v4.css"}}