Todo App Signup UI Skill (High‑Level UI/UX)

This skill defines a production‑ready, premium signup experience designed with black glassmorphism, pink accents, and strong typographic hierarchy. The goal is emotional impact, clarity, and modern SaaS quality — not just a form.

Design Philosophy (Senior Designer Approach)

• •Dark luxury UI with pink glass highlights
• •Clear visual hierarchy (headline → value → action)
• •Minimal but expressive UI
• •Signup feels exclusive, smooth, and trust‑building
• •Every element earns its place

When to Use

• •User requests a signup screen only for a todo app
• •User wants premium glassmorphism
• •Theme preference: black background + pink glass
• •User wants modern SaaS‑level UI, not basic layouts
• •Visual impact is as important as functionality

High‑Level Layout Structure

Overall Canvas

• •Full viewport height (100vh)
• •Black / near‑black background
• •Soft ambient pink glow in background (radial / blur)
• •Two‑column layout on desktop, stacked on mobile

Left Panel (45%) — Emotional & Brand Side

Purpose: Sell the feeling, not the form

• •App logo or minimal icon
• •Strong headline (1–2 lines max)
• •Supporting description (1 short paragraph)
• •Subtle animated pink glow / glass shapes in background

Example Content Hierarchy:

• •Heading: "Organize your life. One task at a time."
• •Description: "A clean, focused todo app designed to help you stay consistent and stress‑free."

Right Panel (55%) — Functional Glass Card

Purpose: Frictionless signup

• •Centered glassmorphic card
• •Pink‑tinted blur glass
• •Soft neon pink border glow
• •Rounded corners (16–24px)

Inside the card:

• •Card heading: Sign Up
• •Short helper text below heading
• •Form fields
• •Primary CTA
• •Social signup section

Glassmorphism (Pink on Black)

Card Style Rules:

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

No white or gray glass — only pink‑tinted glass.

Typography System (Very Important)

Heading Font (Modern & Premium)

• •

  Suggested styles:

  • •Inter
  • •Poppins
  • •Satoshi
  • •SF Pro (if available)

Signup Heading:

• •Size: 28–32px
• •Weight: 600–700
• •Color: #FFFFFF

Description / Helper Text

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

Input Labels & Text

• •Labels: subtle pink or soft white
• •Input text: white
• •Placeholder: muted pink/white

Form Fields

Required:

• •Full Name / Username
• •Email Address
• •Password
• •Confirm Password

Input Style:

• •Dark glass input background
• •Pink focus ring on active
• •Smooth focus animation

Primary Action Button

• •Text: Create Account
• •Background: Pink gradient
• •Rounded: 12–16px
• •Hover: Glow intensifies
• •Active: Slight scale down (micro‑interaction)

Social Signup Section

• •Position: Bottom of glass card
• •Divider text: "or continue with"
• •Icons only (no text)

Icons:

• •Facebook
• •Instagram
• •Pinterest

Style:

• •Circular glass buttons
• •Pink border on hover

Design Constraints (Strict)

• •❌ No sign‑in link
• •❌ No forgot password
• •❌ No extra CTA buttons
• •❌ No white/gray glass panels
• •✅ Signup only, distraction‑free

Responsiveness Rules

• •

  Desktop: Two‑column layout

• •

  Tablet: Reduced spacing, same structure

• •

  Mobile:

  • •Single column
  • •Left panel content moves above
  • •Card centered

Touch targets minimum: 44px

High‑Level UX Workflow Diagram

BLACK BACKGROUND CANVAS
(soft pink glow ambience)

┌─────────────────────────────────────────────────────────┐
│                                                         │
│  LEFT: BRAND FEEL (45%)        RIGHT: ACTION (55%)      │
│                                                         │
│  ┌───────────────┐           ┌─────────────────────┐  │
│  │  Logo / Icon  │           │  Pink Glass Card    │  │
│  │               │           │                     │  │
│  │  BIG HEADING  │  ─────▶   │   Sign Up           │  │
│  │  (Trust +     │  Visual   │   Helper text       │  │
│  │   Motivation) │  Flow     │                     │  │
│  │               │           │  [ Name ]           │  │
│  │  Short Desc   │           │  [ Email ]          │  │
│  │               │           │  [ Password ]       │  │
│  │  Pink Glow    │           │  [ Confirm ]        │  │
│  │  Shapes       │           │                     │  │
│  │               │           │  [ Create Account ] │  │
│  │               │           │                     │  │
│  │               │           │   — or —            │  │
│  │               │           │  ○  ○  ○            │  │
│  └───────────────┘           └─────────────────────┘  │
│                                                         │
└─────────────────────────────────────────────────────────┘

USER FLOW:
Emotion → Trust → Focus → Action → Account Created

Output Deliverables

One or more of:

• •High‑fidelity UI mockup
• •Tailwind / CSS layout
• •Design tokens (colors, spacing, radius)
• •Responsive breakpoints
• •Interaction notes (hover, focus, transitions)

Senior‑Level Best Practices

1. •Strong headline before form
2. •One clear CTA only
3. •Glass must feel soft, not noisy
4. •Animations < 300ms
5. •Accessibility contrast maintained
6. •Visual calm — no clutter
7. •Design should feel premium, not playful

This skill represents a modern SaaS‑grade signup experience — minimal, confident, and visually striking.