{"id":"6b4c8ca5-476e-442b-b713-d5fc58cf04ac","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/6b4c8ca5-476e-442b-b713-d5fc58cf04ac","originalSiteUrl":"https://www.vanta.com","capturedAt":"2026-04-30T00:51:41.197Z","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":"Vanta","summary":"Regal Clarity on White Canvas","description":"Vanta projects a refined, authoritative presence through a primarily achromatic palette accented by deep, vivid violets. Stark white backgrounds provide a sense of expansive clarity, acting as a clean canvas for content. Typography is precise and impactful, balancing a custom sans-serif for functional elements with a sophisticated serif for headlines. Components are lightweight and well-defined by subtle borders, emphasizing content over heavy ornamentation. Elevation is minimal, achieved through soft borders and contained interactions rather than prominent shadows.","industry":"saas","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, form inputs, button backgrounds","group":"neutral"},{"name":"Background Snow","hex":"#f7f8fa","role":"Subtle section backgrounds, alternative light surfaces","group":"neutral"},{"name":"Cloud Gray","hex":"#eaeaf1","role":"Subtle accents for UI elements, light border accents","group":"neutral"},{"name":"Border Fog","hex":"#dfdfe9","role":"Functional borders, dividers, subtle outlines","group":"neutral"},{"name":"Muted Ash","hex":"#9e9fb7","role":"Secondary borders, ghost button outlines, disabled states","group":"neutral"},{"name":"Stone Gray","hex":"#6d6e87","role":"Tertiary text, subtle fills, supporting icons","group":"neutral"},{"name":"Dark Charcoal","hex":"#484960","role":"Secondary text, link text, muted headings","group":"neutral"},{"name":"Midnight Ink","hex":"#181822","role":"Primary text, main headings, critical information","group":"neutral"},{"name":"Deep Plum","hex":"#260048","role":"Footer background, secondary brand elements, text on vivid backgrounds","group":"brand"},{"name":"Vanta Purple","hex":"#5e05c4","role":"Primary action buttons, interactive elements, brand accents","group":"brand"},{"name":"Royal Violet","hex":"#8f47d5","role":"Link colors, badge text, decorative icon accents","group":"brand"},{"name":"Misty Lavender","hex":"#ddd6ff","role":"Hero background, soft brand washes","group":"brand"},{"name":"Sky Lavender","hex":"#cdd2f8","role":"Supporting background color, subtle brand elevation","group":"brand"},{"name":"Warning Gold","hex":"#ffbe0f","role":"Warning badges, informational highlights","group":"semantic"}],"typography":[{"role":"Functional UI text: body copy, navigation, buttons, labels. Its variable nature allows for precise weight control for hierarchy.","sizes":"10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px, 40px","family":"Inter Variable","weight":"400, 500, 600, 700","weights":[400,500,600,700],"lineHeight":"1.30, 1.35, 1.43, 1.50, 1.60","substitute":"system-ui","letterSpacing":"-0.0020em"},{"role":"Headline text, where its serif elegance softens the technical feel of the content. The lighter weights provide authority through grace.","sizes":"30px, 42px, 56px, 72px, 90px","family":"Reckless","weight":"400, 500","weights":[400,500],"lineHeight":"1.10, 1.20, 1.25","substitute":"serif","letterSpacing":"-0.0180em"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.6,"letterSpacing":-0.2},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":-0.32},{"role":"subheading","size":20,"lineHeight":1.43,"letterSpacing":-0.4},{"role":"heading-sm","size":24,"lineHeight":1.35,"letterSpacing":-0.48},{"role":"heading","size":32,"lineHeight":1.3,"letterSpacing":-0.64},{"role":"heading-lg","size":42,"lineHeight":1.1,"letterSpacing":-0.714},{"role":"display","size":56,"lineHeight":1.1,"letterSpacing":-0.784}],"spacing":{"radius":{"cards":"16px","inputs":"999px","buttons":"999px","default":"8px"},"elementGap":"16px","sectionGap":"32px","cardPadding":"32px"},"radius":{"cards":"16px","inputs":"999px","buttons":"999px","default":"8px"},"shadows":{"surfaces":[{"hex":"#f7f8fa","name":"Background Snow","level":1,"purpose":"Primary page background"},{"hex":"#ffffff","name":"Canvas White","level":2,"purpose":"Default card surfaces, interactive containers"},{"hex":"#cdd2f8","name":"Sky Lavender","level":3,"purpose":"Accentuated section backgrounds, soft elevated areas"}]},"guidelines":{"do":["Use Midnight Ink (#181822) for all primary body text and main headings to ensure strong contrast and readability.","Apply Canvas White (#ffffff) as the default background for most content sections and interactive components.","Utilize Vanta Purple (#5e05c4) exclusively for primary calls to action, such as 'Get a demo' buttons.","Maintain a 999px border-radius for all interactive elements like buttons and input fields to ensure a consistent friendly, modern feel.","Establish hierarchy in headings by using Reckless font, applying its smaller letter-spacing values (-0.0180em to -0.0120em) for larger sizes.","Use Border Fog (#dfdfe9) or Muted Ash (#9e9fb7) for all hairline borders and subtle dividers.","Prioritize Inter Variable for all functional text, maintaining -0.0020em letter-spacing for consistency."],"dont":["Do not introduce strong shadows; rely on subtle borders or background color shifts for element separation.","Avoid using highly saturated colors for large background areas; reserve them for accents and interactive elements.","Do not deviate from the full-rounded (999px) radius for buttons and input fields; this is a signature shape.","Never use Reckless font for body text or other small functional elements; it is reserved for headlines.","Do not use generic blue for links or interactive elements; all brand interaction should use Royal Violet (#8f47d5) or Vanta Purple (#5e05c4).","Avoid dense stacking of information; provide ample white space, leveraging Cloud Gray (#eaeaf1) or Background Snow (#f7f8fa) for breathing room.","Do not use bright or vibrant photography; imagery should be understated, product-focused, or abstract to allow UI to dominate."]},"components":[{"name":"Primary Filled Button","role":"Call to action button for primary actions"},{"name":"Ghost Navigation Button","role":"Secondary navigation or subtle actions"},{"name":"Outlined Input Field","role":"Text input areas for forms"},{"name":"Elevated Content Card","role":"Container for features or grouped information"},{"name":"Feature Highlight Card","role":"Cards within hero section or for key features"},{"name":"Brand Chip Badge","role":"Informational tags or status indicators"},{"name":"Warning Badge","role":"Notification or status badge indicating a warning"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\n- text: #181822\n- background: #f7f8fa\n- border: #dfdfe9\n- accent: #5e05c4\n- primary action: #5e05c4 (filled action)\n\nExample Component Prompts:\n- Create a hero section with a Misty Lavender (#ddd6ff) background. Headline 'Trust is everything' at 56px Reckless weight 500, #181822, letter-spacing -0.784px. Below, a Ghost Navigation Button with 'Learn more' text in #181822, border #9e9fb7, 999px radius, 8px vertical 10.4px horizontal padding.\n- Design a feature card: Canvas White (#ffffff) background, 16px radius, no shadow. Inside, use a heading 'Compliance' at 24px Inter Variable weight 700, #181822, line-height 1.35. Body text at 16px Inter Variable weight 400, #484960.\n- Create a Primary Action Button: #5e05c4 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n- Create an input field: Canvas White (#ffffff) background, 999px border-radius, border 1.5px solid Muted Ash (#9e9fb7). Placeholder text should be #484960 at 16px Inter Variable weight 400. Internal padding 13.6px vertical, 16px horizontal.\n- Display a Warning Badge with text 'Review' using Warning Gold (#ffbe0f) background and Deep Plum (#260048) text, no border-radius and 4px horizontal padding."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777510253081-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777510253081-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/6b4c8ca5-476e-442b-b713-d5fc58cf04ac-1777581568717-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/6b4c8ca5-476e-442b-b713-d5fc58cf04ac-1777581568717-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/6b4c8ca5-476e-442b-b713-d5fc58cf04ac-1777581568717-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/6b4c8ca5-476e-442b-b713-d5fc58cf04ac-1777581568717-preview-detail-poster.jpg"},"similarStyleIds":["12255b63-e506-4bc1-a4cd-d05487de32f3","1ae4bcfe-c613-42fc-aab7-f9583381e7cc","a5089389-4220-4fc2-82d9-973203d2e2f5","b5fdba21-fd4d-427e-b551-1e22c51e42db","88a00b3e-1c1e-49d3-ae0f-9fbc1f35ad99","f24daf3a-d43f-4dec-85a9-8ac1d5148a03","e549766e-b8b1-48a2-bd72-8cc04e9e4e9d","dfe5faa4-a108-45a8-a68c-ed19be2db766","62b22816-2d98-4e98-9c17-bf600ddb2fc8","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","7b083729-e694-4b66-82a3-befb08451722","ced1c98f-d489-48f7-a01f-1fa59a07b706","c14bfde7-6f08-4b54-bd9b-39989d10cfef","123a15b8-4e17-4812-83ec-899cce45db5b","e7876363-181a-44a9-9e5c-2255cf98aea5","4d0a5051-1c4c-4338-8406-2babdc97915c","2eab438d-32cd-40c2-b160-1e4127dac569","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","c81d2be0-05b7-4755-8046-f2d19fbc448c","e050061c-346d-44cc-92ba-6b22beb4a91f"],"exports":{"designMdUrl":"/references/refero/6b4c8ca5-476e-442b-b713-d5fc58cf04ac/design.md","tokensJsonUrl":"/references/refero/6b4c8ca5-476e-442b-b713-d5fc58cf04ac/tokens.json","tailwindV4Url":"/references/refero/6b4c8ca5-476e-442b-b713-d5fc58cf04ac/tailwind-v4.css","cssVariablesUrl":"/references/refero/6b4c8ca5-476e-442b-b713-d5fc58cf04ac/tailwind-v4.css"}}