{"id":"a80507cb-afda-46dd-a2b9-ba91f3a78e78","name":"LottieFiles","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/a80507cb-afda-46dd-a2b9-ba91f3a78e78","originalSiteUrl":"https://lottiefiles.com","capturedAt":"2026-04-11T16:12:48.372Z","colors":[{"name":"Cloud White","hex":"#ffffff","role":"Page background, primary surface color for cards and interactive elements.","group":"neutral","cssVariable":"--color-cloud-white"},{"name":"Ash White","hex":"#fafafa","role":"Slightly off-white background where subtle contrast is needed, input fields, subtle section dividers.","group":"neutral","cssVariable":"--color-ash-white"},{"name":"Slate Gray","hex":"#e4e4e7","role":"Subtle borders, dividers, outlines for card elements.","group":"neutral","cssVariable":"--color-slate-gray"},{"name":"Dark Graphite","hex":"#f4f4f5","role":"Secondary background for sections, muted buttons.","group":"neutral","cssVariable":"--color-dark-graphite"},{"name":"Carbon Black","hex":"#09090b","role":"Primary text, prominent headings, strong contrast elements.","group":"neutral","cssVariable":"--color-carbon-black"},{"name":"Charcoal Black","hex":"#18181b","role":"Hover states for dark text, occasionally as button background.","group":"neutral","cssVariable":"--color-charcoal-black"},{"name":"Steel Gray","hex":"#71717b","role":"Secondary text, icons, muted brand elements.","group":"neutral","cssVariable":"--color-steel-gray"},{"name":"Cadet Gray","hex":"#9f9fa9","role":"Fainter text, placeholder text, disabled states.","group":"neutral","cssVariable":"--color-cadet-gray"},{"name":"Lottie Teal","hex":"#019d91","role":"Primary call to action buttons, active navigation indicators, key brand accents. This moderate teal provides a fresh, energetic touch without being overly aggressive.","group":"brand","cssVariable":"--color-lottie-teal"},{"name":"Vivid Aqua","hex":"#00ddb3","role":"Used within illustrations and occasionally for very bold accent elements, appearing brighter than Lottie Teal.","group":"brand","cssVariable":"--color-vivid-aqua"},{"name":"Sunshine Yellow","hex":"#f0b100","role":"Highlighting specific elements in illustrations, secondary accent color for badges or notifications.","group":"accent","cssVariable":"--color-sunshine-yellow"},{"name":"Electric Blue","hex":"#3a86ff","role":"Used for specific interactive elements in illustrations, providing a bright, modern accent.","group":"accent","cssVariable":"--color-electric-blue"},{"name":"Jolly Green","hex":"#94d19f","role":"A softer green, used primarily inside illustrations to add to the playful aesthetic.","group":"accent","cssVariable":"--color-jolly-green"},{"name":"Coral Pink","hex":"#ff8eed","role":"A vibrant pink used in illustrations for character elements and other playful accents.","group":"accent","cssVariable":"--color-coral-pink"}],"typography":[{"role":"Display headlines and prominent marketing text. The tight letter spacing on larger sizes creates a modern, impactful feel, while maintaining readability at smaller headline sizes.","sizes":"14px, 16px, 18px, 20px, 24px, 32px, 48px, 64px, 96px","family":"DM Sans","weight":"400, 500, 600","weights":[400,500,600],"lineHeight":"1.04-1.56","substitute":"DM Sans (Google Fonts)","letterSpacing":"-0.05em at 96px, progressing to 0.01em at 14px"},{"role":"Body text, navigation, buttons, and most UI elements. Its neutrality and legibility ensure a consistent and approachable voice across the interface, supporting the more expressive DM Sans.","sizes":"10px, 12px, 14px, 16px, 18px, 24px, 32px","family":"Inter","weight":"400, 500, 600","weights":[400,500,600],"lineHeight":"1.10-1.71","substitute":"Inter (Google Fonts)","letterSpacing":"-0.01em"}],"spacing":{"radius":{"cards":"16px","forms":"8px","buttons":"12px","thumbnails":"24px"},"elementGap":"8-24px","sectionGap":"40-80px","cardPadding":"24-32px","pageMaxWidth":"1200px"},"radius":{"cards":"16px","forms":"8px","buttons":"12px","thumbnails":"24px"},"guidelines":{"do":["Prioritize DM Sans for headlines (sizes > 24px) with specific letter-spacing as defined in typography, using Carbon Black (#09090b) for high impact.","Use Lottie Teal (#019d91) exclusively for primary calls to action, maintaining its distinctive brand presence.","Apply rounded corners consistently: 12px for buttons, 16px for cards, and 24px for larger visual elements like image containers to reinforce approachability.","Maintain generous spacing with elementGap at 8px, 16px, or 24px, and sectionGap between 40-80px to ensure visual comfort and focus.","Employ the subtle shadow rgba(0, 0, 0, 0.05) 0px 1px 2px 0px for all elevated cards and interactive elements, adding minimal depth.","Utilize Inter font at 14px or 16px for all body text, links, and UI labels, ensuring high readability with a default letter-spacing of -0.01em.","Ensure adequate contrast: Carbon Black (#09090b) on Cloud White (#ffffff) or Ash White (#fafafa) for all primary text content."],"dont":["Avoid applying excessive shadows; stick to the single, subtle shadow defined for elevation.","Do not introduce new chromatic colors outside of the defined brand and accent palette; maintain the vibrant teal focus with select pops of yellow/blue.","Refrain from using sharp corners or radii smaller than 8px for interactive elements; the visual style leans into softer, friendlier shapes.","Do not use DM Sans for large blocks of body text; reserve it for headlines and short, impactful statements to preserve its distinctive role.","Avoid dense, information-heavy sections without adequate white space; prioritize breathability and comfortable reading experiences.","Do not deviate from the specified dark neutral colors for primary text and headings; maintain high contrast and legibility.","Do not use Lottie Teal (#019d91) for body text or non-interactive elements; keep it reserved for key actions and brand accents."]}}