{"id":"e81d4724-9615-4159-8678-cef35f986cab","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/e81d4724-9615-4159-8678-cef35f986cab","originalSiteUrl":"https://scale.com","capturedAt":"2026-04-11T18:37:56.765Z","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":"Scale","summary":"Midnight Command Center: An expanse of polished dark surfaces, illuminated by precise white text and the occasional shimmer of an iridescent, almost holographic, light.","description":"This design system evokes a sense of deep, sophisticated technology within a secure, high-contrast environment. The dominant ultra-dark palette, punctuated by crisp white text and a subtle, iridescent gradient, creates an atmosphere of serious innovation. Minimal use of vibrant colors ensures that any color interaction is highly deliberate, like an indicator light on a complex machine. Typography features whisper-light headlines, conveying authority through understated elegance against the stark backdrop.","tags":["dark-mode","high-contrast","minimalist","futuristic","enterprise","data","abstract-graphics","typographic-heavy","sophisticated"],"industry":"ai","colorScheme":"dark","colors":[{"name":"Deep Space","hex":"#000000","role":"Primary page background, card backgrounds, creating a high-contrast canvas.","group":"neutral"},{"name":"Ghost White","hex":"#ffffff","role":"Primary text color for headlines and body text, accentuating information against the dark background. Also used for borders on interactive elements.","group":"neutral"},{"name":"Iron Slate","hex":"#a1a1a1","role":"Secondary text for less prominent information, active navigation links, and subtle borders.","group":"neutral"},{"name":"Halo Pale","hex":"#f4f0ff","role":"Subtle, near-white text for secondary links and body text in less prominent sections. This provides a very soft contrast against black.","group":"neutral"},{"name":"Shadow Tint","hex":"#020202","role":"Subtle shadows and background for elements that need a touch more depth than pure black.","group":"neutral"},{"name":"Subtle Gray","hex":"#e5e5e5","role":"Text and icon color, for details that require slightly less prominence than Ghost White.","group":"neutral"},{"name":"Iridescent Glow","hex":"#bbdef2","role":"Backgrounds of geometric abstract shapes, providing a luminous, futuristic visual accent.","group":"brand"},{"name":"Spectrum Flare","hex":"#d1aad7","role":"Used for the lighter parts of the iridescent gradient, giving it a soft, ethereal quality.","group":"brand"},{"name":"Vivid Crimson","hex":"#ff6467","role":"Indicator or accent background, used sparingly to draw attention.","group":"accent"},{"name":"Goldenrod","hex":"#ffd600","role":"Indicator or accent background, used sparingly for specific highlight.","group":"accent"},{"name":"Emerald Green","hex":"#72ce7b","role":"Indicator or accent background, used sparingly for specific highlight.","group":"accent"},{"name":"Dark Rainbow Gradient","hex":"#9a9a9a","role":"Used for highly stylized, abstract background elements, providing a subtle shimmer that hints at dimension and data flow.","group":"brand","gradient":"linear-gradient(to right bottom in oklab, rgb(154, 154, 154) 0%, rgb(26, 26, 26) 50%, rgb(106, 106, 106) 100%)"}],"typography":[{"role":"Standard body text, navigation elements, buttons, and various UI labels. Its wide range of sizes and normal weight support the bulk of content, ensuring readability without distracting from the main brand typography.","sizes":"12px, 14px, 16px, 18px, 20px","family":"Inter","weight":"400, 500","weights":[400,500],"lineHeight":"1.33, 1.43, 1.50, 1.56, 1.60, 1.65, 1.71","substitute":"system-ui, sans-serif","letterSpacing":"0.10em at 12px, 0.286em at 14px, 0.333em at 16px"},{"role":"Primary display font for headlines and sub-headlines. The signature weight 300 for large sizes creates a whisper-quiet yet authoritative tone, prioritizing understatement over visual shouting, which is distinctive for a high-tech brand.","sizes":"24px, 26px, 36px, 48px, 72px, 89px","family":"aeonik","weight":"300, 400","weights":[300,400],"lineHeight":"1.00, 1.11, 1.13, 1.23, 1.25, 1.33, 1.67","substitute":"Montserrat, sans-serif","letterSpacing":"-0.01em"},{"role":"Used for small, descriptive text, often for labels or details that require a slightly technical or precise feel. The wider letter-spacing at smaller sizes improves legibility.","sizes":"12px, 14px","family":"geist","weight":"400","weights":[400],"lineHeight":"1.43, 1.50, 2.00","substitute":"Source Code Pro, monospace","letterSpacing":"0.071em at 14px, 0.083em at 12px"}],"spacing":{"radius":{"links":"16px","lists":"4px","default":"8px"},"elementGap":"8px","sectionGap":"32px","cardPadding":"24px"},"radius":{"links":"16px","lists":"4px","default":"8px"},"guidelines":{"do":["Prioritize Deep Space (#000000) for backgrounds and Ghost White (#ffffff) for primary text to maintain high contrast and sophistication.","Use aeonik font with weight 300 for all large headlines (48px and above) to achieve an understated, authoritative tone.","Apply Iron Slate (#a1a1a1) for secondary text and active navigation items to provide subtle differentiation without losing readability.","Employ the Iridescent Glow (#bbdef2) and Spectrum Flare (#d1aad7) gradient only for abstract geometric elements or distinctive brand accents, not for interactive components.","Maintain generous vertical spacing between sections, using multiples of 32px to provide breathing room on the dark canvas.","Use 8px border radius as the default for most containers and images, with 16px for larger interactive links, and 4px for smaller list items."],"dont":["Do not introduce highly saturated colors for general UI elements; reserve them for specific accent indicators if truly necessary.","Avoid heavy drop shadows; the design relies on subtle background variations and text contrast for depth, with minimal inset shadows.","Do not use aeonik font for body text; reserve it for headlines and maintain its distinctive impact.","Avoid excessive use of Halo Pale (#f4f0ff) for primary content; its low contrast is intended for secondary or subtle elements.","Do not use generic system borders; interactive elements should feature white or subtle gray borders for consistency.","Avoid dense information blocks; use ample White Space, especially on dark backgrounds, to enhance clarity and visual weight."]},"components":[{"name":"Announcement Banner","role":""},{"name":"Button Group (Primary + Secondary CTA)","role":""},{"name":"Customer Testimonial Card","role":""},{"name":"Navigation Link","role":"Primary navigation item"},{"name":"Secondary Hero Button (Text Link)","role":"Secondary call to action"},{"name":"Feature Card","role":"Content container for features"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text (Primary): #ffffff (Ghost White)\n- Background (Primary): #000000 (Deep Space)\n- CTA Button Background: transparent\n- CTA Button Border: #ffffff (Ghost White)\n- Accent Graphic: #bbdef2 (Iridescent Glow)\n\n### Example Component Prompts\n1. Create a Hero Section: Full-width Deep Space #000000 background. Centered headline 'Breakthrough AI from Data to Deployment' using aeonik 89px weight 300, Ghost White #ffffff, letter-spacing -0.01em. Subtext 'Scale delivers proven data...' using Inter 20px weight 400, Halo Pale #f4f0ff, line-height 1.6. Two buttons: 'Book a Demo' with Ghost White #ffffff text, transparent background, 1px Ghost White #ffffff border, 17px horizontal, 12px vertical padding; and 'Build AI' with Ghost White #ffffff text, transparent background, no border, 17px horizontal, 12px vertical padding. Include an abstract geometric graphic using Iridescent Glow #bbdef2 and Spectrum Flare #d1aad7 colors on the right side.\n2. Design a Navigation Bar: Deep Space #000000 background, 59-147px height. Logo 'Scale' using Inter 24px weight 500, Ghost White #ffffff. Navigation links 'Products', 'Research', 'Enterprise', 'Government', 'Resources' using Inter 16px weight 400, Ghost White #ffffff, white on hover, 4px vertical padding, 0px horizontal padding. Right-aligned buttons 'Book a Demo' (Ghost White #ffffff text, 1px Ghost White #ffffff border, transparent background) and 'Log In' (Ghost White #ffffff text, transparent background, no border).\n3. Create a Testimonial Block: Deep Space #000000 background. Headline 'We have changed the game...' using aeonik 48px weight 300, Ghost White #ffffff, letter-spacing -0.01em. A testimonial card: 8px border-radius, transparent background with inset shadow rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset. Quote text '\"We partnered with Scale AI...\"' using Inter 20px weight 400, Ghost White #ffffff. Attribution 'Mark Zuckerberg' using Inter 16px weight 500, Halo Pale #f4f0ff."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775932654225-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775932654225-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e81d4724-9615-4159-8678-cef35f986cab-1777555918992-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e81d4724-9615-4159-8678-cef35f986cab-1777555918992-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e81d4724-9615-4159-8678-cef35f986cab-1777555918992-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e81d4724-9615-4159-8678-cef35f986cab-1777555918992-preview-detail-poster.jpg"},"similarStyleIds":["62e8e59e-17a5-4eba-a6c6-1c7f67ded518","461da0f0-fde6-46bc-8137-7eca006260a8","4e1ac04c-02ae-41cf-b588-3f6226a882f8","834ce97f-61f2-4b12-bf5c-e9fad2544456","3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc","408a149c-702f-4442-99df-bea49d9c0d9b","b8ba443e-5d83-4f37-b8c6-a1acd7623d0c","d4c51049-58eb-404a-9fcb-f195928b1c99","c3ceca5c-d329-4559-b947-016172941ba2","350b1557-56f0-4361-8c8b-b7a88081982b","4d4772a3-e1da-415f-a6d7-658dcefdcecd","13b74e34-b824-4d1d-bd2c-bb9bfbc2d6e1","34baa524-5d5b-4165-bbab-d01f05e6d6b9","0acef011-07da-4416-b874-ccdd675140f6","18a75348-513a-49d8-94f5-e2df8c118b6b","e8c604cc-1c8d-42a3-aeca-fcfc25e70344","e80231a2-e4d6-406a-a2c9-2e6109679690","733e6475-892a-4138-8835-bf40344df317","4ce66adb-ed8b-4e71-8066-15d92c4d2be0","3416bd14-96bb-4c23-bd01-b2ea178ba5ce"],"exports":{"designMdUrl":"/references/refero/e81d4724-9615-4159-8678-cef35f986cab/design.md","tokensJsonUrl":"/references/refero/e81d4724-9615-4159-8678-cef35f986cab/tokens.json","tailwindV4Url":"/references/refero/e81d4724-9615-4159-8678-cef35f986cab/tailwind-v4.css","cssVariablesUrl":"/references/refero/e81d4724-9615-4159-8678-cef35f986cab/tailwind-v4.css"}}