Signup Skill

name: todo-signup-ui version: 2.0.0 level: Senior / 10+ Years UI Design Standard description: Generate a premium, black‑background, pink glassmorphic signup‑only UI for a todo app with clear hierarchy, refined typography, and a high‑level UX workflow mindset.

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.