{"id":"6b4c8ca5-476e-442b-b713-d5fc58cf04ac","name":"Vanta","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","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, form inputs, button backgrounds","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Background Snow","hex":"#f7f8fa","role":"Subtle section backgrounds, alternative light surfaces","group":"neutral","cssVariable":"--color-background-snow"},{"name":"Cloud Gray","hex":"#eaeaf1","role":"Subtle accents for UI elements, light border accents","group":"neutral","cssVariable":"--color-cloud-gray"},{"name":"Border Fog","hex":"#dfdfe9","role":"Functional borders, dividers, subtle outlines","group":"neutral","cssVariable":"--color-border-fog"},{"name":"Muted Ash","hex":"#9e9fb7","role":"Secondary borders, ghost button outlines, disabled states","group":"neutral","cssVariable":"--color-muted-ash"},{"name":"Stone Gray","hex":"#6d6e87","role":"Tertiary text, subtle fills, supporting icons","group":"neutral","cssVariable":"--color-stone-gray"},{"name":"Dark Charcoal","hex":"#484960","role":"Secondary text, link text, muted headings","group":"neutral","cssVariable":"--color-dark-charcoal"},{"name":"Midnight Ink","hex":"#181822","role":"Primary text, main headings, critical information","group":"neutral","cssVariable":"--color-midnight-ink"},{"name":"Deep Plum","hex":"#260048","role":"Footer background, secondary brand elements, text on vivid backgrounds","group":"brand","cssVariable":"--color-deep-plum"},{"name":"Vanta Purple","hex":"#5e05c4","role":"Primary action buttons, interactive elements, brand accents","group":"brand","cssVariable":"--color-vanta-purple"},{"name":"Royal Violet","hex":"#8f47d5","role":"Link colors, badge text, decorative icon accents","group":"brand","cssVariable":"--color-royal-violet"},{"name":"Misty Lavender","hex":"#ddd6ff","role":"Hero background, soft brand washes","group":"brand","cssVariable":"--color-misty-lavender"},{"name":"Sky Lavender","hex":"#cdd2f8","role":"Supporting background color, subtle brand elevation","group":"brand","cssVariable":"--color-sky-lavender"},{"name":"Warning Gold","hex":"#ffbe0f","role":"Warning badges, informational highlights","group":"semantic","cssVariable":"--color-warning-gold"}],"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"}],"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."]}}