{"id":"8c3f2805-dfce-4edd-8a9c-946bee4f1cff","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","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":"Leonardo.ai","summary":"Luminous Digital Void: vibrant hues punching through deep darkness.","description":"Leonardo.Ai evokes a luminous digital void, where vibrant hues punch through deep darkness. Typography is bold and oversized, often warping or stacked for dramatic effect, suggesting a world of limitless creation. Interface elements are primarily ghosted or outlined, allowing the rich generative imagery and expressive text to dominate, with solid accents used sparingly for key interactions. The system maintains a high contrast, dark-mode default, relying on the interplay of black canvas, bright white text, and a focused palette of vivid, single-color accents for points of interest.","industry":"ai","colorScheme":"dark","colors":[{"name":"Midnight Void","hex":"#000000","role":"Primary page background, high-contrast text color on white surfaces, shadow base","group":"neutral"},{"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"},{"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%)"},{"name":"Pure White","hex":"#ffffff","role":"Primary text color against dark backgrounds, filled button backgrounds, active navigation elements","group":"neutral"},{"name":"Subtle Surface","hex":"#353535","role":"Elevated card backgrounds, differentiated from the main background without introducing significant lightness","group":"neutral"},{"name":"Muted Ash","hex":"#999999","role":"Secondary text, descriptive elements, inactive link states. Reduces visual hierarchy","group":"neutral"},{"name":"Luminous Green","hex":"#03e65b","role":"Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content","group":"brand"},{"name":"Deep Violet","hex":"#6e60ee","role":"Violet wash for highlight backgrounds, decorative bands, and soft emphasis behind content.","group":"brand"},{"name":"Electric Yellow","hex":"#ffc533","role":"Secondary accent for categorization, highlights, and occasional decorative elements. Creates visual energy","group":"brand"},{"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"},{"name":"Sunset Red","hex":"#ff5d4b","role":"A warmer red accent, similar in use to Vivid Crimson for visual variety and categorization","group":"brand"}],"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"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.1,"letterSpacing":0},{"role":"body","size":14,"lineHeight":1.2,"letterSpacing":0},{"role":"subheading","size":18,"lineHeight":1.25,"letterSpacing":0},{"role":"heading-sm","size":22,"lineHeight":0.8,"letterSpacing":-0.22},{"role":"heading","size":39,"lineHeight":0.9,"letterSpacing":-0.78},{"role":"heading-lg","size":59,"lineHeight":0.85,"letterSpacing":-1.18},{"role":"display","size":165,"lineHeight":0.8,"letterSpacing":-3.3}],"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."]},"components":[{"name":"Ghost Pill Button","role":"Secondary action button for navigation or tertiary interactions."},{"name":"Filled Pill Button (Light)","role":"Primary action button, high contrast."},{"name":"Icon-only Button","role":"Navigation or small interactive elements where size is minimal."},{"name":"Horizontal Tab Button","role":"Segmented control for filtering or switching views."},{"name":"Basic Content Card","role":"Container for secondary content like descriptions or detailed information."},{"name":"Accent Product Card","role":"Visually distinct card for showcasing featured items or categories."},{"name":"Content Badge","role":"Label or tag for categorization."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #ffffff\nbackground: #000000\nborder: #e5e5e5\naccent: #6e60ee\nprimary action: #ffffff (filled action)\n\nExample Component Prompts:\n1. Create a Hero Headline: 'YOUR IDEAS YOURS TO CREATE' using `leoSans` weight 900 at 165px, color #6e60ee, letter-spacing -3.3px, on a Midnight Void (#000000) background. Ensure 0.8 line height.\n2. Create a Ghost Outlined Button: 'Start now' using `canvaSans` weight 400 at 16px, text color #ffffff, background transparent, border 1px solid #ffffff, and 60px border radius. Apply 6.75px vertical and 20.25px horizontal padding.\n3. Create an Accent Product Card: displaying generative art. Set background to Luminous Green (#03e65b), 20.4375px border radius, with 16.875px padding. Inside, place a 'Product Title' using `canvaSans` weight 700 at 19px, color #0a0a0a.\n4. Create a Secondary Text Link: 'Learn more' using `canvaSans` weight 400 at 14px, color Muted Ash (#999999), on a Midnight Void (#000000) background."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777507959924-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777507959924-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/8c3f2805-dfce-4edd-8a9c-946bee4f1cff-1777581526440-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/8c3f2805-dfce-4edd-8a9c-946bee4f1cff-1777581526440-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/8c3f2805-dfce-4edd-8a9c-946bee4f1cff-1777581526440-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/8c3f2805-dfce-4edd-8a9c-946bee4f1cff-1777581526440-preview-detail-poster.jpg"},"similarStyleIds":["461da0f0-fde6-46bc-8137-7eca006260a8","3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc","d3caa7bf-2e2e-489a-845d-5cab274e7a92","225059ac-0450-49d3-b2b7-d0e98b7ae938","7510b18e-63c3-4c2a-97c3-39fa7dfa6ae3","325ab18a-72a5-4ff3-8823-eed4d8bceef0","cf8cd07d-bff0-41dc-ab70-fa85750f6168","4d4772a3-e1da-415f-a6d7-658dcefdcecd","e81d4724-9615-4159-8678-cef35f986cab","34baa524-5d5b-4165-bbab-d01f05e6d6b9","8f623d19-51f6-4da2-bc45-05573cc98283","ddd9ffaa-d831-4cb4-a5bf-a1efce421dca","186775da-7568-49e5-8110-4fd0bbc7bbe3","607e0dbf-e2fc-45c9-b939-946b8981c156","312423bf-72ea-42fb-b8f5-ab0104e778f3","a7530405-e523-4268-bba5-ef13549fd61c","f532c703-1179-465d-9933-7736df44d0ae","d16b85ee-0bbc-4030-9190-71e1408ff119","a6950b49-8ce4-4330-9499-26ca08061599","18a75348-513a-49d8-94f5-e2df8c118b6b"],"exports":{"designMdUrl":"/references/refero/8c3f2805-dfce-4edd-8a9c-946bee4f1cff/design.md","tokensJsonUrl":"/references/refero/8c3f2805-dfce-4edd-8a9c-946bee4f1cff/tokens.json","tailwindV4Url":"/references/refero/8c3f2805-dfce-4edd-8a9c-946bee4f1cff/tailwind-v4.css","cssVariablesUrl":"/references/refero/8c3f2805-dfce-4edd-8a9c-946bee4f1cff/tailwind-v4.css"}}