Todo App Dashboard UI Skill (High-Level UI/UX)

This skill defines a production-ready, premium dashboard experience designed with black glassmorphism, pink accents, and strong task-focused hierarchy. The goal is seamless visual continuity with signup/signin, with a focus on task management efficiency — not just a basic todo list.

Design Philosophy (Senior Designer Approach)

•Dark luxury UI with pink glass highlights (same as signup/signin)
•Clear task-oriented visual hierarchy (stats → input → list)
•Minimal but expressive UI
•Dashboard feels professional, calm, and productive
•Every element earns its place
•Visual consistency with auth screens (no disconnect)

When to Use

•User requests a dashboard screen for the todo app
•Theme must exactly match signup/signin UI
•User wants premium black + pink glassmorphism
•User wants a task-focused experience, not generic dashboard
•Visual consistency with auth flow is required
•User wants modern SaaS-level UI, not basic layouts

Global Styling Rules (Must Match Signup/Signin)

•Background: Near-black / black canvas
•Ambient pink glow (radial / blurred shapes)
•Glass color: Pink-tinted only
•No white or gray glass
•Same border radius, shadows, blur intensity
•Same typography system
•Same animation philosophy

High-Level Layout Structure

Overall Canvas

•Full viewport height (100vh)
•Black / near-black background
•Soft ambient pink glow in background (radial / blur)
•Sidebar + main workspace layout
•NO HEADER

code

┌──────────────┬─────────────────────────────┐
│ Sidebar      │  Main Dashboard Area        │
└──────────────┴─────────────────────────────┘

Sidebar (Icon + Text)

Purpose: Navigation & context

Style:

•Dark glass background (same as auth cards)
•Subtle pink border or glow on active item
•Rounded internal elements
•Consistent with auth glassmorphism

Icons (Mandatory - React Icons):

•All Tasks → checklist icon (React Icons)
•Active Tasks → clock / play icon (React Icons)
•Completed → check-circle icon (React Icons)

Icons style:

•Line / outline icons
•Same stroke weight as auth icons
•Pink when active, muted white otherwise

Main Content Area

1️⃣ Welcome Section

•Text only (no card)
•Low emphasis
•White / muted gray text
•No icon needed

2️⃣ Stats Cards (Animated) Style:

•Light / white glass cards (same glass as auth)
•Rounded corners
•Soft shadow
•Pink number accent

Icons:

•Optional but allowed
•Very subtle, low opacity
•Never louder than numbers

Animation:

•Fade + slight upward motion
•Duration: 200–300ms
•Trigger: On dashboard load

3️⃣ Add New Task Panel (Primary Focus) Style:

•White or light glass card
•Matches signup card softness
•Clean spacing

Fields:

•Title
•Description
•Priority (pink dropdown)
•Tags
•Due date
•Recurring
•Reminder toggle

Buttons:

•Create Task → Pink gradient (same as signup CTA)
•Cancel → Subtle outline

Glassmorphism Rules (Same as Signup/Signin)

•Background: rgba(255, 110, 199, 0.12)
•Backdrop blur: 20–30px
•Border: rgba(255, 110, 199, 0.35)
•Soft pink outer glow

Typography System (Exact Match)

Headings

•Same font family as signup/signin
•Size: 24–28px for main sections
•Weight: 600–700
•Color: #FFFFFF

Body Text

•Size: 14–16px
•Weight: 400–500
•Color: rgba(255,255,255,0.75)
•Line height: relaxed (1.5+)

Stats Numbers

•Bold, clear typography
•Pink accent color for important metrics

Animation System (Same Philosophy)

Dashboard animations must feel calm & professional, not flashy.

Page Load:

•Sidebar fades in
•Main content slides up slightly
•Stats cards animate sequentially

Interaction Animations:

•Button hover → glow increases
•Button press → scale 0.98
•Input focus → pink glow ring

Motion Rules:

•No bounce
•No elastic easing
•All animations < 300ms

Design Constraints (Strict)

•❌ No header
•❌ No marketing copy
•❌ No new color palette
•❌ No heavy animations
•❌ Visual disconnect from auth flow
•❌ No custom SVG icons
•✅ Same theme as signup/signin
•✅ React Icons library only
•✅ Icons included
•✅ Subtle motion
•✅ Task-first UI
•✅ Visual consistency with auth screens

Responsiveness Rules

•Desktop: Sidebar + main content layout
•Tablet: Reduced spacing, same structure
•
Mobile:
- •Sidebar collapses to top/bottom navigation
- •Main content takes full width
- •Add task panel adapts to mobile
•Touch targets minimum: 44px

High-Level UX Workflow Diagram

code

BLACK BACKGROUND CANVAS
(soft pink glow ambience)

┌─────────────────────────────────────────────────────────┐
│                                                         │
│  SIDEBAR NAVIGATION      MAIN DASHBOARD AREA           │
│                                                         │
│  ┌─────────────┐        ┌──────────────────────────┐  │
│  │  [Checklist │        │  Welcome Text            │  │
│  │  Icon] All │        │  (Low emphasis)          │  │
│  │  Tasks      │        │                          │  │
│  │             │        │                          │  │
│  │  [Clock/    │  ────▶ │  ┌─ Stats Cards ──┐      │  │
│  │  Play Icon] │ Visual │  │  0   0   0     │      │  │
│  │  Active     │  Flow │  └────────────────┘      │  │
│  │             │        │                          │  │
│  │  [Check-    │        │  ┌─ Add New Task ─┐     │  │
│  │  Circle     │        │  │  Title         │     │  │
│  │  Icon]      │        │  │  Description   │     │  │
│  │  Completed  │        │  │  Priority      │     │  │
│  │  (Active =  │        │  │  [Create Task] │     │  │
│  │   Pink)    │        │  └────────────────┘     │  │
│                         └──────────────────────────┘  │
│                                                         │
└─────────────────────────────────────────────────────────┘

USER FLOW:
Authenticate → Navigate → Orient → Review → Create → Focus

Output Deliverables

•High-fidelity dashboard UI
•Frontend layout (Tailwind / CSS)
•Responsive behavior notes
•Interaction & animation specs
•Design tokens matching auth flow

Senior-Level Best Practices

•Strong visual continuity with auth flow
•Task-first, productivity-focused
•Consistent brand language
•No visual noise
•Smooth micro-interactions
•Accessibility contrast maintained
•Feels familiar but functional

This dashboard skill completes the auth-to-product journey — consistent, premium, and task-focused.