{"id":"10ab6120-3d03-48ff-aebe-0b4910edc046","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/10ab6120-3d03-48ff-aebe-0b4910edc046","originalSiteUrl":"https://playsuperlative.com","capturedAt":"2026-04-30T03:18:37.257Z","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":"Superlative","summary":"Precision instrument interface—white text glowing on a matte gray panel.","description":"Superlative employs a dark, high-contrast aesthetic that feels like a precision instrument's interface—sharp, functional, and minimal. White and various shades of dark gray define the palette, highlighted by a stark orange accent used for critical indicators. Typography is condensed and uppercase, contributing to a technical, almost industrial feel. Components are stripped down: ghost buttons with thin borders and minimal padding, and tight, disciplined spacing create a sense of focused control.","industry":"design","colorScheme":"dark","colors":[{"name":"Superlative Black","hex":"#141414","role":"Primary surface background, text color for light surfaces, prominent borders","group":"neutral"},{"name":"Instrument Gray","hex":"#232323","role":"Secondary surface backgrounds, muted text on very dark surfaces, darker borders","group":"neutral"},{"name":"Panel Gray","hex":"#8c8c8c","role":"Placeholder text, subtle borders, inactive link text, secondary headings","group":"neutral"},{"name":"Signal Orange","hex":"#e66f27","role":"Orange wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color","group":"brand"},{"name":"Ghost White","hex":"#ffffff","role":"Primary text on dark backgrounds, ghost button text, active link text","group":"neutral"},{"name":"Surface White","hex":"#f6f4f2","role":"Badge backgrounds, specific content sections when a lighter contrast is needed","group":"neutral"},{"name":"Divider Gray","hex":"#e4e3e2","role":"Subtle borders and dividers on lighter surfaces","group":"neutral"},{"name":"Absolute Black","hex":"#000000","role":"Outline button borders, selected text on light backgrounds","group":"neutral"}],"typography":[{"role":"Primary display font for headings and calls to action. The wide letter spacing and condensed form create a mechanical, precise feel.","sizes":"15px, 23px, 90px","family":"SL-Regular-Condensed","weight":"400","weights":[400],"lineHeight":"1.00, 1.33","substitute":"Bebas Neue","letterSpacing":"0.0800em"},{"role":"Secondary display font for larger headings, providing legibility at scale while maintaining a lean profile.","sizes":"25px, 90px","family":"SL-Light","weight":"400","weights":[400],"lineHeight":"1.00, 1.20","substitute":"Open Sans Light","letterSpacing":"normal"},{"role":"Body text, navigation links, and smaller UI labels. Its regular width balances the condensed display fonts.","sizes":"15px","family":"SL-Regular","weight":"400","weights":[400],"lineHeight":"1.00","substitute":"Open Sans","letterSpacing":"normal"}],"typeScale":[{"role":"body","size":15,"lineHeight":1,"letterSpacing":0.08},{"role":"subheading","size":23,"lineHeight":1.33,"letterSpacing":0.08},{"role":"heading","size":25,"lineHeight":1},{"role":"display","size":90,"lineHeight":1}],"spacing":{"radius":{"badges":"15px","buttons":"3px"},"elementGap":"15px","sectionGap":"60px","cardPadding":"30px"},"radius":{"badges":"15px","buttons":"3px"},"shadows":{"surfaces":[{"hex":"#141414","name":"Superlative Black Canvas","level":0,"purpose":"Dominant page background, providing a dark, immersive base for content."},{"hex":"#232323","name":"Instrument Gray Panel","level":1,"purpose":"Used for background of content blocks within the main canvas, offering slight visual separation."},{"hex":"#f6f4f2","name":"Surface White","level":2,"purpose":"Reserved for occasional use as a contrasting content block background, such as specific badges or info cards."}]},"guidelines":{"do":["Use Superlative Black (#141414) as the default background for most sections.","Employ Ghost White (#ffffff) text for primary content on dark backgrounds.","Borders for interactive components should be 1px solid using Superlative Black (#000000) or Panel Gray (#8c8c8c).","Apply Signal Orange (#e66f27) sparingly, strictly for functional highlights and indicators, not for primary actions.","Maintain a tight layout with an element gap of 15px for most UI elements.","Utilize SL-Regular-Condensed with 0.0800em letter-spacing for all headlines and button text.","Apply a 15px border radius to badges and a 3px radius to outlined buttons, with 0px for Ghost Buttons."],"dont":["Avoid using Signal Orange (#e66f27) for actionable button backgrounds or primary calls to action.","Do not introduce heavy shadows or excessive elevation; maintain a generally flat and minimalist appearance.","Refrain from using color gradients, as the system relies on solid colors and strong contrast.","Never use serif fonts; stick to the sans-serif SL typefaces for a consistent technical aesthetic.","Do not deviate from the specified tight letter-spacing for condensed fonts or normal spacing for regular fonts.","Avoid complex or ornamental visual elements; simplicity and utility are paramount.","Do not use large, soft paddings; maintain compact and disciplined spacing around components."]},"components":[{"name":"Ghost Primary Button","role":"Main call to action, outlining key interactive elements."},{"name":"Ghost Secondary Button","role":"Secondary calls to action, maintaining visual weight with interaction."},{"name":"Input Field","role":"User input areas for forms."},{"name":"New Badge","role":"Highlighting new features or products."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #ffffff\nbackground: #141414\nborder: #000000\naccent: #e66f27\nprimary action: no distinct CTA color\n\nExample Component Prompts:\nNo distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.\n2. Create a feature callout: Instrument Gray Panel (#232323) background. Title 'The Sound of the Past' at 25px SL-Light weight 400, Ghost White (#ffffff), normal letter-spacing. Subtext 'Crafted for the Future' at 15px SL-Regular weight 400, Ghost White (#ffffff), normal letter-spacing.\n3. Create a navigation link: Text 'PRODUCT' in Panel Gray (#8c8c8c), 15px SL-Light weight 400, normal letter-spacing. On hover, change text to Ghost White (#ffffff).\n4. Create a 'New' badge: Background Surface White (#f6f4f2), text 'NEW' in Superlative Black (#141414), 15px SL-Regular-Condensed weight 400, letter-spacing 0.0800em. Radius 15px, 0px vertical padding, 15px horizontal padding."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777519099582-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777519099582-thumb.jpg"},"similarStyleIds":["6b5a0bf4-3d2a-4c3b-aa2e-652f1acb82c0","5183054c-4c6e-4ecf-bd90-f7d794d5eb17","98ab0172-9474-43b5-9055-98cf1a6a2401","e5081033-bd79-479a-aef6-8b002df6086a","8b708ba5-5c94-45a7-9868-36506fc423d0","f11750fc-d7c0-4d26-b32a-3b1d2098ae34","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","9e5bd4b1-0ba8-4592-a5ec-a935bd4ea9c6","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","418b374a-be64-44f0-b17e-1d45308c7e62","764b6a64-c233-4e0f-b8e1-bc01e2f8aa16","297f65f7-0fbd-4521-ab91-a5f6e17175d9","46f01790-e488-4aba-9236-02466b0fb3cd","8401cb26-91a3-4b46-941e-1c75790821eb","dcd215e5-3511-4e40-87ff-95c095f44ad6","63bd1ed9-b161-45fd-8734-85282bd945ec","a1b78a21-a304-482b-8ce5-f612d95d44fe","733e6475-892a-4138-8835-bf40344df317","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7"],"exports":{"designMdUrl":"/references/refero/10ab6120-3d03-48ff-aebe-0b4910edc046/design.md","tokensJsonUrl":"/references/refero/10ab6120-3d03-48ff-aebe-0b4910edc046/tokens.json","tailwindV4Url":"/references/refero/10ab6120-3d03-48ff-aebe-0b4910edc046/tailwind-v4.css","cssVariablesUrl":"/references/refero/10ab6120-3d03-48ff-aebe-0b4910edc046/tailwind-v4.css"}}