Achievement gamification screen with progress rings

Achievement gamification screen with progress rings, minimal, dark-mode, dark

Preview image. Unlock full-res

Dark app screen celebrating a daily achievement milestone using centered typography, a ring-progress diagram with one accent dot, and a blue call-to-action button.

Summary

Dark app screen celebrating a daily achievement milestone using centered typography, a ring-progress diagram with one accent dot, and a blue call-to-action button.

Visual description

Vertical center-aligned composition on solid black background. Large bold headline in white ("Time to move your mind. You've earned 1 of 8 daily mind minutes.") sits at the top in display weight sans-serif. Below, seven white circles arranged in a loose ring formation with one bright magenta/pink dot as an accent highlight. A pill-shaped button with rounded corners in white sits at the bottom with blue sans-serif text reading "Let's get to work". Minimal spacing, strong visual hierarchy, high contrast between elements.

Key takeaway

The single accent-color dot in a circle pattern creates visual interest without clutter. The centered lockup with whitespace above and below the icon gives the achievement moment breathing room. Using a secondary action button (ghost-style) instead of a primary fill maintains visual calm while still being actionable.

Reuse notes

Strong pattern for in-app reward screens, daily-challenge notifications, or progress milestones. The simple icon system scales across different achievement types. Works well at mobile widths and in-app modal contexts.

More like this