Homepage Skill

---
name: todo-homepage-ui
version: 2.0.0
level: Senior / 10+ Years UI Design Standard
description: A premium, minimal, animated Todo App homepage with a strong hero message, refined typography, floating icons, and a single focused CTA — visually aligned with black-pink glassmorphism used across auth and dashboard.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

# 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.**