Robinhood

Robinhood, dark-mode, high-contrast

Preview image. Unlock full-res

Electric lime on a dark canvas. The design feels like a financial dashboard powered by neon-green data points against a dark, responsive background.

This system evokes a high-contrast, edgy digital experience, like a sleek command interface. Its stark visual identity is built on a limited palette of near-black, pure white, and a single, aggressive electric lime green. Typography plays a crucial role in establishing authority through custom typefaces, with a distinct serif for display headings creating a sense of luxury and importance, while a sans-serif maintains legibility for body text. Rounded pill-shaped buttons stand out against the predominantly angular design, providing clear interactive points. Prioritize Deep Space Black (#110e08) for backgrounds and Ghost White (#ffffff) for primary text to maintain high contrast. Use Rocket Lime (#ccff00) exclusively for primary CTA buttons and explicit accent elements, never for large blocks or generic text. Apply 36px border-radius to all interactive components like buttons and inputs for a consistent 'pill' shape. Utilize Martina Plantijn at 72px or 80px for all page-level headlines to establish a luxurious and authoritative tone. Ensure consistent spacing with the 8px base unit, particularly for element-to-element gaps. Leverage Capsule Sans Text for all body copy and most UI elements, adjusting letter-spacing as per its defined profiles for optimal visual rhythm. Do not introduce new vibrant colors outside of the Rocket Lime (#ccff00) accent. Avoid using hard-edged rectangles for interactive elements; all buttons and input fields must be pill-shaped with 36px radius. Do not use generic system fonts; stick strictly to Capsule Sans Text, Phonic, and Martina Plantijn. Do not dilute the impact of Rocket Lime by using it for non-interactive or purely decorative elements. Refrain from heavy drop shadows or excessive elevation; the aesthetic relies on flat, high-contrast layers and typography for hierarchy. Avoid using multiple line-heights or letter-spacings for the same font/size combination — adhere to the defined typographic profiles.

More like this