Todo App Homepage UI Skill (High-Level UI/UX)
This skill defines a premium, focused landing page designed with black glassmorphism, pink accents, and calm, confident messaging. The goal is to create immediate clarity and confidence — not marketing noise. The homepage must feel calm, focused, and premium while maintaining visual consistency with the auth and dashboard screens.
Design Philosophy (Senior Designer Approach)
- •Calm, confident messaging with pink glass highlights (same as auth/dashboard)
- •Single purpose: Focus user's attention on the core value proposition
- •Premium feel without marketing noise
- •Immediate clarity in under 5 seconds
- •Visual consistency with the broader app ecosystem
- •Motion supports message, not distracts
When to Use
- •User requests a homepage/landing page for the todo app
- •Theme must exactly match signup/signin/dashboard UI
- •User wants premium black + pink glassmorphism
- •User wants a conversion-focused page, not marketing clutter
- •Need a single CTA focused landing experience
- •User wants modern SaaS-grade UI, not basic layouts
Global Styling Rules (Must Match Auth/Dashboard)
- •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: 100vh × 100vw
- •Centered layout (both axes)
- •No scroll on initial view
- •Black / near-black background
- •Subtle pink ambient glow
- •Single centered column layout
code
┌──────────────────────────────────────────────┐ │ │ │ One Task at a Time │ │ │ │ A focused Todo app designed to help you │ │ move forward without distractions. │ │ │ │ [ Get Started ] │ │ │ │ (Floating pink glass icons drifting) │ │ │ └──────────────────────────────────────────────┘
Hero Section (Primary Focus)
Purpose: Immediate clarity in <5 seconds
Layout:
- •Single centered column
- •Vertical rhythm: Title → Description → CTA
Headline (Locked):
- •Main Title (Required): "One Task at a Time"
- •Rules:
- •Large
- •Bold
- •Calm
- •Confident
- •This text is the visual anchor of the entire page.
Description Text:
- •1–2 lines only
- •Explains value without buzzwords
- •Example: "A focused Todo app designed to help you move forward without distractions."
- •Style:
- •Soft white
- •High readability
- •Relaxed line height
Typography System (Premium)
Font Style:
- •Use same family as signup/dashboard:
- •Inter / Poppins / Satoshi / SF Pro
Hierarchy:
- •Headline: 48–64px (desktop)
- •Description: 16–18px
- •Button text: 14–16px, medium weight
- •No font mixing.
Get Started Button (Single CTA)
Position: Centered below description
Style:
- •Rounded (pill or 14–16px radius)
- •Pink gradient background
- •Soft glow
- •Clean label: Get Started
Interaction:
- •Hover → glow intensifies
- •Active → scale 0.97
- •Focus → subtle pink ring
Icons & Floating Elements (Depth & Mood)
Purpose: Visual interest without distraction
Style:
- •3D-like or soft glass icons
- •Cards / task icons / check marks
- •Pink-tinted glass
- •Soft blur + shadow
Placement:
- •Around hero text
- •Never overlapping text
- •Asymmetric but balanced
Motion:
- •Slow floating / drift
- •Slight parallax
- •Continuous but subtle
Glassmorphism Rules (Same as Auth/Dashboard)
- •Background:
rgba(255, 110, 199, 0.12) - •Backdrop blur:
20–30px - •Border:
rgba(255, 110, 199, 0.35) - •Soft pink outer glow
- •Very light application
- •Only pink-tinted glass
- •No noisy borders
- •Glass should feel soft and expensive, not flashy
Animation System (Page Load & Text)
Animation must trigger every time homepage enters viewport
Animation Sequence: 1️⃣ Headline
- •Opacity: 0 → 1
- •Y: +20px → 0
- •Duration: 500–600ms
- •Ease: ease-out
2️⃣ Description
- •Delay: 80–120ms
- •Same fade + move
3️⃣ Get Started Button
- •Scale: 0.96 → 1
- •Soft glow pulse (once)
Re-Entry Rule:
- •Animation replays on revisit
- •No stacking
- •No jitter
Motion Discipline (Senior Rule):
- •No bounce
- •No elastic easing
- •Total sequence < 1.2s
- •Respect reduced-motion preference
Design Constraints (Strict)
- •❌ No header
- •❌ No footer
- •❌ No sidebar
- •❌ No extra CTAs
- •❌ No marketing sections
- •❌ No white/gray glass panels
- •❌ No marketing noise
- •✅ One message
- •✅ One button
- •✅ One emotion: focus
- •✅ Same theme as auth/dashboard
- •✅ Visual consistency across app
- •✅ Calm, not salesy
- •✅ Premium feel (not flashy)
Responsiveness Rules
- •Desktop: Centered layout with proper spacing
- •Tablet: Reduced font sizes, same structure
- •Mobile:
- •Single column
- •Text sizes adjusted for readability
- •Button touch targets: minimum 44px
- •Floating elements adapt to smaller screens
High-Level UX Workflow Diagram
code
USER OPENS APP
↓
HOMEPAGE ENTERS VIEWPORT
↓
TEXT ANIMATION PLAYS
↓
ATTENTION → MESSAGE → CTA
┌──────────────────────────────────────────────┐
│ │
│ One Task at a Time │
│ │
│ A focused Todo app designed to help you │
│ move forward without distractions. │
│ │
│ [ Get Started ] │
│ │
│ (Floating pink glass icons drifting) │
│ │
└──────────────────────────────────────────────┘
FLOW:
Calm → Clarity → Motivation → Action
Output Deliverables
- •High-fidelity homepage UI
- •Frontend layout (Tailwind / CSS)
- •Animation specs (Framer Motion)
- •Responsive behavior notes
- •Interaction & animation specs
- •Design tokens matching auth/dashboard flow
Senior-Level Best Practices
- •Less content, more clarity
- •Motion supports message, not distracts
- •CTA visible within 3 seconds
- •Visual consistency across app
- •Homepage feels calm, not salesy
- •Premium ≠ flashy
- •Focus is the brand
- •Accessibility contrast maintained
This homepage skill creates a focused, premium landing experience — calm, clear, and conversion-focused.