Uniswap Cup

Uniswap Cup

Preview image. Unlock full-res

Fuchsia-accented data panel. Precise, high-contrast, and digitally sharp typography on a stark white canvas, with a single, vibrant fuchsia cutting through the cool neutrality.

Industrycrypto
Palette
#f2f2f2
#000000
#ffffff
#222222
#fef4ff
#f50db4

The Uniswap Cup design system evokes a digital battle arena with a high-contrast, almost monochrome palette punctuated by a single vibrant fuchsia. The aesthetic is clean and precise, leveraging stark black and white surfaces for visual clarity, while sharp corners and a compact density suggest a dynamic, competitive environment. Typography combines robust monospace with subtle sans-serifs, and layout is highly structured, emphasizing information readouts and tournament brackets over fluid narrative. Prioritize a stark, high-contrast palette of Midnight Ink (#000000) on Canvas White (#f2f2f2) for all core UI elements. Use Fuchsia Flare (#f50db4) exclusively for accenting active states, score leaders, competitive highlights, and key interactive elements. Employ ui-monospace for all numerical data and critical, precise labels, tracking it tightly with letterSpacing: -0.0200em. Maintain sharp, 0px corner radii for all structural elements and information blocks to preserve a technical, precise feel. Utilize 8px as the default element spacing for compact arrangement of UI items, such as scores and team logos. Ensure headings and titles use ui-monospace weight 700 at 32px to convey importance and technical specificity. Do not introduce additional chromatic colors; Fuchsia Flare (#f50db4) is the singular brand accent. Avoid soft gradients or shadows; the aesthetic relies on flat, high-contrast surfaces and sharp edges. Do not use ui-sans-serif or Basel for numerical data or score displays where ui-monospace provides critical alignment and precision. Refrain from using rounded corners on cards or primary containers; the design language favors a hard-edged, digital aesthetic. Do not deviate from the compact spacing unit of 8px for inter-element gaps; avoid excessive whitespace that would dilute the information density. Do not apply padding to ghost buttons; they should remain minimalist and blend seamlessly into their surroundings.

More like this