Tidy Task Detail - Desktop

A focused, ADHD-friendly task management UI featuring soft glassmorphism, a calming teal color palette, and high-legibility typography. The design emphasizes a single primary call-to-action to reduce cognitive load, utilizing large touch targets and generous whitespace. Suitable for wellness apps, meditation platforms, productivity tools, and neuro-inclusive software designs. Key features include a glassmorphic hero gradient, bold 'Lexend' headers, and 'Plus Jakarta Sans' for supportive UI elements.

Summary

A minimalist, high-contrast task detail screen designed for focus and low cognitive friction. It features a top-down glassmorphic teal gradient, centered high-radius cards, and a massive primary action button with a vibrant gradient to drive user completion without overwhelming the interface.

Style

The style utilizes a 'Soft Wellness' aesthetic. Typography pairings: 'Lexend' for bold, rounded headings that feel approachable; 'Plus Jakarta Sans' for body and metadata for high readability. Colors: Primary Teal (#006b5f), secondary bright teal (#14b8a6), and a neutral warm surface (#f9f9f8). Shadows are extremely subtle (0 4px 20px -2px rgba(0, 0, 0, 0.03)) to maintain a light, airy feel.

Layout & Structure

A vertically stacked, centered layout optimized for mobile and desktop focus. The top section uses a background gradient to create depth, while the main content area focuses on a single task at a time.

Header and Glass Hero

Room and Task Identifier

Information Badges

Duration Card

Action and Timer Section

Components

Teal Gradient Primary Button

High-visibility action button designed for tactile satisfaction.

Soft Glassmorphic Container

Background element providing depth without distracting the user.

Special Notes

Must maintain a high degree of whitespace to prevent sensory overload. The 'Skip' link must never feel like a 'failure' button—it should be styled as a low-emphasis utility link. The primary action button must be the most visually heavy element on the page. Use a mono-spaced font only for the timer to prevent layout shifts as numbers change.

Use this prompt