Premium Dark Mode Card Design for SaaS Productivity Tools

Premium Dark Mode Card Design for SaaS Productivity ToolsPremium Dark Mode Card Design for SaaS Productivity Tools

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Mahin Rahman

• Feb 23

A fully color-corrected dark mode card component designed for a SaaS productivity tool. The goal was to create a UI that feels premium and readable while handling multiple types of content — metadata, AI-generated summaries, and task lists — all in one compact card.

Font: Geist Mono, Inter.

This is the type of component work I bring to SaaS and AI product teams — thoughtful, systematic, and production-ready.

Tools: Figma · UI Design · Color Systems · Dark Mode Design

Product Design Web Design productdesigner Figma uidesign UI Design

Abhiram Tinguria

• Feb 23

Designing for information density without sacrificing readability is where UI really becomes product design.

Ali Kashif

pro

• May 28

Exploring "How We Work" section

Which colour is best (both colours are the main colour guide)?

Figma UI Design Web Design

37 voted

54%

31 voted

46%

68 votes

Closed

Varun Bhagtani

• May 28

Personally leaning towards the dark blue-green version. The cooler tone feels more aligned with trust and clarity especially for a “How We Work” section. The Dark brown version has a strong cinematic mood, but the blue-green helps the structure and content breathe a bit more to me.