Superlative

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. 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. 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.