{"id":"8c3f2805-dfce-4edd-8a9c-946bee4f1cff","name":"Leonardo.ai","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/8c3f2805-dfce-4edd-8a9c-946bee4f1cff","originalSiteUrl":"https://leonardo.ai","capturedAt":"2026-04-30T00:13:09.512Z","colors":[{"name":"Midnight Void","hex":"#000000","role":"Primary page background, high-contrast text color on white surfaces, shadow base","group":"neutral","cssVariable":"--color-midnight-void"},{"name":"Ghostly Gray","hex":"#e5e5e5","role":"Subtle borders, dividers, secondary ghost button borders, and input outlines. Provides minimal structural definition without asserting strong presence","group":"neutral","cssVariable":"--color-ghostly-gray"},{"name":"Off-Black Text","hex":"#0a0a0a","role":"Text on light surfaces, also appearing as link color on dark backgrounds, suggesting a subtle tonal shift from pure black; Background gradient for sections, providing a smooth transition from deep black","group":"neutral","gradient":"linear-gradient(rgb(10, 10, 10) 0%, rgba(37, 37, 37, 0.65) 100%)","cssVariable":"--color-off-black-text"},{"name":"Pure White","hex":"#ffffff","role":"Primary text color against dark backgrounds, filled button backgrounds, active navigation elements","group":"neutral","cssVariable":"--color-pure-white"},{"name":"Subtle Surface","hex":"#353535","role":"Elevated card backgrounds, differentiated from the main background without introducing significant lightness","group":"neutral","cssVariable":"--color-subtle-surface"},{"name":"Muted Ash","hex":"#999999","role":"Secondary text, descriptive elements, inactive link states. Reduces visual hierarchy","group":"neutral","cssVariable":"--color-muted-ash"},{"name":"Luminous Green","hex":"#03e65b","role":"Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content","group":"brand","cssVariable":"--color-luminous-green"},{"name":"Deep Violet","hex":"#6e60ee","role":"Violet wash for highlight backgrounds, decorative bands, and soft emphasis behind content.","group":"brand","cssVariable":"--color-deep-violet"},{"name":"Electric Yellow","hex":"#ffc533","role":"Secondary accent for categorization, highlights, and occasional decorative elements. Creates visual energy","group":"brand","cssVariable":"--color-electric-yellow"},{"name":"Vivid Crimson","hex":"#ff3386","role":"Tertiary accent, often paired with other vivid colors for visual interest or to denote specific categories. Used judiciously","group":"brand","cssVariable":"--color-vivid-crimson"},{"name":"Sunset Red","hex":"#ff5d4b","role":"A warmer red accent, similar in use to Vivid Crimson for visual variety and categorization","group":"brand","cssVariable":"--color-sunset-red"}],"typography":[{"role":"Primary legible text for body content, UI labels, links, and navigation. Its consistent weight range and neutral tone support the more expressive display fonts.","sizes":"10px, 12px, 14px, 16px, 18px, 19px","family":"canvaSans","weight":"400, 500, 700","weights":[400,500,700],"lineHeight":"1.10, 1.15, 1.20, 1.25, 1.33","substitute":"system-ui, sans-serif","letterSpacing":"normal"},{"role":"Bold, condensed display typeface used for all major headings and artistic text. Its varied weights and negative letter-spacing create a distinct, authoritative, and slightly aggressive feel. The large sizes and tight tracking are a signature element.","sizes":"14px, 22px, 34px, 35px, 39px, 44px, 45px, 48px, 50px, 51px, 59px, 65px, 66px, 68px, 75px, 76px, 78px, 79px, 85px, 86px, 90px, 98px, 165px","family":"leoSans","weight":"500, 800, 900","weights":[500,800,900],"lineHeight":"0.80, 0.85, 0.90, 0.93, 1.00, 1.25","substitute":"Georgia, serif","letterSpacing":"-0.0200em at large sizes, -0.0100em at smaller heading sizes"},{"role":"Specialized display face for specific, highly stylized heading elements. Its specific 34px size with tight letter spacing creates a unique, impactful visual identity for specific marketing text.","sizes":"34px","family":"ufficioDisplay","weight":"500","weights":[500],"lineHeight":"0.92","substitute":"serif","letterSpacing":"-0.0200em"}],"spacing":{"radius":{"tags":"270px","cards":"8.4375px","buttons":"60px"},"elementGap":"7-10px","sectionGap":"34-37px","cardPadding":"17-20px"},"radius":{"tags":"270px","cards":"8.4375px","buttons":"60px"},"shadows":{"surfaces":[{"hex":"#000000","name":"Midnight Void","level":0,"purpose":"Primary page background, the base canvas."},{"hex":"#353535","name":"Subtle Surface","level":1,"purpose":"Elevated card backgrounds, offering slight differentiation from the base."}]},"guidelines":{"do":["Always use Midnight Void (#000000) for page backgrounds to maintain the deep, dark aesthetic.","Utilize Pure White (#ffffff) as the primary text color on dark backgrounds for legibility and visual pop.","Apply LeoSans for all headlines and display text, using extensive letter-spacing adjustments (e.g., -0.0200em for large sizes) to achieve its distinct, compressed look.","Employ Ghostly Gray (#e5e5e5) for all non-interactive borders, including ghost buttons and dividers, to maintain a subtle structure against dark surfaces.","Reserve Luminous Green (#03e65b) and Deep Violet (#6e60ee) for distinct accent roles like active states, critical highlights, and brand iconography.","Use 60px border radius for interactive elements like buttons to achieve a strong pill-like, accessible shape.","Implement the linear-gradient(rgb(10, 10, 10) 0%, rgba(37, 37, 37, 0.65) 100%) for contained sections that need a softer, slightly varied background from the pure black canvas."],"dont":["Avoid using multiple accent colors in close proximity; instead, let a single accent color make its statement.","Do not introduce light gray backgrounds for content sections; maintain the dark theme by using Subtle Surface (#353535) for elevated cards.","Refrain from using default browser link styles; ensure all links use canvaSans and either Pure White (#ffffff) or Muted Ash (#999999) with appropriate hover states.","Do not use subtle shadows for elevation; the system relies on solid background color shifts for hierarchy.","Never use `canvaSans` for headlines; its purpose is functional readability, not expressive display.","Avoid generic rectangular buttons; all prominent buttons should adopt the distinct 60px pill radius.","Do not introduce large amounts of whitespace around tightly tracked headlines; they are designed to command dense visual space."]}}