{"id":"10ab6120-3d03-48ff-aebe-0b4910edc046","name":"Superlative","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","colors":[{"name":"Superlative Black","hex":"#141414","role":"Primary surface background, text color for light surfaces, prominent borders","group":"neutral","cssVariable":"--color-superlative-black"},{"name":"Instrument Gray","hex":"#232323","role":"Secondary surface backgrounds, muted text on very dark surfaces, darker borders","group":"neutral","cssVariable":"--color-instrument-gray"},{"name":"Panel Gray","hex":"#8c8c8c","role":"Placeholder text, subtle borders, inactive link text, secondary headings","group":"neutral","cssVariable":"--color-panel-gray"},{"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","cssVariable":"--color-signal-orange"},{"name":"Ghost White","hex":"#ffffff","role":"Primary text on dark backgrounds, ghost button text, active link text","group":"neutral","cssVariable":"--color-ghost-white"},{"name":"Surface White","hex":"#f6f4f2","role":"Badge backgrounds, specific content sections when a lighter contrast is needed","group":"neutral","cssVariable":"--color-surface-white"},{"name":"Divider Gray","hex":"#e4e3e2","role":"Subtle borders and dividers on lighter surfaces","group":"neutral","cssVariable":"--color-divider-gray"},{"name":"Absolute Black","hex":"#000000","role":"Outline button borders, selected text on light backgrounds","group":"neutral","cssVariable":"--color-absolute-black"}],"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"}],"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."]}}