Preview image. Unlock full-res
Dark teal hero showcasing typography hierarchy and interaction states, anchored by two contrasting button styles: outlined and filled neon-green.
Summary
A fintech product page featuring dark teal background with white headline, body text, and button states, using bright neon-green for high-contrast primary action.
Visual description
A split-screen ui specimen showing typography and button patterns over a dark teal background. Left side displays a large display-weight headline "This Headline Is Titlecase styled w/ Work Sans Medium" with a horizontal rule beneath it, followed by body copy at 30% the headline size describing the typography system (Inter Regular and SemiBold). Below are two button styles: an outlined "Learn More" button with bright neon-green border and white text, and a filled "Connect Wallet" button with solid bright neon-green background and black text. Right side shows typography color and scale reference chips: large "Abc" in white, neon-green, and black against their background colors, labeled with specs (H1, Line Height 110%, Sample = 100 pts). Annotated labels mark font names and roles (Subheaders, Body Text, CTA Buttons, Work Sans).
Key takeaway
The two-button hierarchy: a low-stakes outline button paired with a high-emphasis solid-filled button, both using the same bright accent color to guide the eye but with contrasting fills. The inline typography scale specimen (showing the same characters at different sizes and colors) quickly communicates the system without narrative. The bright neon-green maintaining contrast and energy against a dark, cool background without feeling chaotic.
Reuse notes
Strong pattern for fintech, crypto, or developer-tool flows where wallet/account actions are primary. Works best on dark teal or similar deep cool tones. The neon accent can feel overstimulating if repeated too densely; reserve it for ctas and key states.
