Todo Homepage UI

---

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

┌──────────────────────────────────────────────┐
│                                              │
│        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

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

1. Less content, more clarity
2. Motion supports message, not distracts
3. CTA visible within 3 seconds
4. Visual consistency across app
5. Homepage feels calm, not salesy
6. Premium ≠ flashy
7. Focus is the brand
8. Accessibility contrast maintained

---

This homepage skill creates a focused, premium landing experience — calm, clear, and conversion-focused.