Todo App Sign-In UI Skill (High-Level UI/UX)
This skill defines a dedicated, premium sign-in page — not a reused signup form. It follows the exact same theme, colors, glassmorphism, and typography as the signup UI, while introducing a new layout logic and user mindset focused on returning users.
Design Philosophy (Senior Designer View)
- Same visual system as signup (brand consistency)
- Different psychology: speed, familiarity, confidence
- Sign-in should feel instant, secure, and calm
- Layout must feel intentional — not copied
When to Use
- User requests a sign-in screen for the todo app
- Theme must exactly match signup UI
- User wants premium black + pink glassmorphism
- User wants a new page layout, not a simple form clone
Global Styling Rules (Must Match Signup)
- 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
High-Level Page Layout
Overall Canvas
- Full height viewport
- Black background with subtle animated pink glow
- Layout differs from signup while staying familiar
Left Panel (35–40%) — Context & Trust
Purpose: Reassure returning users
- Minimal app logo or icon
- Calm headline
- Short supportive description
- Visuals less loud than signup
Example hierarchy:
- Heading: "Welcome back"
- Description: "Pick up right where you left off. Your tasks are waiting."
Right Panel (60–65%) — Primary Action Area
Purpose: Fast authentication
- Large centered pink glass card
- Slightly wider than signup card
- Strong visual focus
Inside card:
- Sign In heading
- Email + Password fields
- Forgot password (allowed here)
- Primary CTA
- Social sign-in
Glassmorphism Rules (Same as Signup)
- Background:
rgba(255, 110, 199, 0.12)
- Backdrop blur:
20–30px
- Border:
rgba(255, 110, 199, 0.35)
- Soft pink outer glow
Typography System (Exact Match)
Card Heading
- Size: 26–30px
- Weight: 600–700
- Color: #FFFFFF
Helper / Description Text
- Size: 14–16px
- Color: rgba(255,255,255,0.75)
Input Labels
- Small, subtle, pink-tinted
Form Fields
Required:
Optional:
- Remember me (toggle / checkbox)
Forgot Password
- Position: Below password field
- Style: Subtle pink text
- No heavy underline
- Secondary action only
Primary Action Button
- Text: Sign In
- Pink gradient background
- Same hover, focus, active behavior as signup
- Strong visual priority
Social Sign-In Section
- Position: Bottom of card
- Divider: "or continue with"
- Icons only
Icons:
- Facebook
- Instagram
- Pinterest
Style:
- Circular glass buttons
- Pink glow on hover
Navigation Hint (Allowed Difference)
- Small text below card:
"Don’t have an account? Sign up"
- Styled subtle — not a CTA button
Responsiveness
High-Level UX Workflow Diagram
BLACK BACKGROUND CANVAS
(soft pink glow ambience)
┌─────────────────────────────────────────────────────────┐
│ │
│ LEFT: TRUST & CONTEXT RIGHT: QUICK ACTION │
│ │
│ ┌───────────────┐ ┌─────────────────────┐ │
│ │ App Icon │ │ Pink Glass Card │ │
│ │ │ │ │ │
│ │ Welcome Back │ ─────▶ │ Sign In │ │
│ │ Message │ Visual │ Helper text │ │
│ │ │ Flow │ │ │
│ │ Calm Desc │ │ [ Email ] │ │
│ │ │ │ [ Password ] │ │
│ │ Soft Glow │ │ │ │
│ │ │ │ Forgot password? │ │
│ │ │ │ │ │
│ │ │ │ [ Sign In ] │ │
│ │ │ │ │ │
│ │ │ │ — or — │ │
│ │ │ │ ○ ○ ○ │ │
│ └───────────────┘ └─────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘
USER FLOW:
Recognition → Trust → Speed → Access → Productivity
Output Deliverables
- High-fidelity sign-in UI
- Frontend layout (Tailwind / CSS)
- Responsive behavior notes
- Interaction & animation specs
Senior-Level Best Practices
- Faster visual scan than signup
- Less text, more clarity
- Consistent brand language
- No visual noise
- Smooth micro-interactions
- Accessibility contrast
- Feels familiar but distinct
This sign-in skill complements the signup skill as a cohesive auth system — consistent, premium, and intentional.
1---2name: todo-signin-ui3description: Generate a premium, black-background, pink glassmorphic sign-in experience for a todo app with a distinct page layout, strong hierarchy, and refined UX flow. Styling must exactly match the signup skill.4---5--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
6
7# Todo App Sign-In UI Skill (High-Level UI/UX)
8
9This skill defines a **dedicated, premium sign-in page** — not a reused signup form. It follows the **exact same theme, colors, glassmorphism, and typography** as the signup UI, while introducing a **new layout logic and user mindset** focused on *returning users*.
10
11---
12
13## Design Philosophy (Senior Designer View)
14
15* Same **visual system** as signup (brand consistency)
16* Different **psychology**: speed, familiarity, confidence
17* Sign-in should feel *instant*, *secure*, and *calm*
18* Layout must feel intentional — not copied
19
20---
21
22## When to Use
23
24* User requests a **sign-in screen** for the todo app
25* Theme must **exactly match signup UI**
26* User wants **premium black + pink glassmorphism**
27* User wants a **new page layout**, not a simple form clone
28
29---
30
31## Global Styling Rules (Must Match Signup)
32
33* Background: Near-black / black canvas
34* Ambient pink glow (radial / blurred shapes)
35* Glass color: **Pink-tinted only**
36* No white or gray glass
37* Same border radius, shadows, blur intensity
38
39---
40
41## High-Level Page Layout
42
43### Overall Canvas
44
45* Full height viewport
46* Black background with subtle animated pink glow
47* Layout differs from signup while staying familiar
48
49---
50
51### Left Panel (35–40%) — *Context & Trust*
52
53Purpose: **Reassure returning users**
54
55* Minimal app logo or icon
56* Calm headline
57* Short supportive description
58* Visuals less loud than signup
59
60**Example hierarchy:**
61
62* Heading: *"Welcome back"*
63* Description: *"Pick up right where you left off. Your tasks are waiting."*
64
65---
66
67### Right Panel (60–65%) — *Primary Action Area*
68
69Purpose: **Fast authentication**
70
71* Large centered pink glass card
72* Slightly wider than signup card
73* Strong visual focus
74
75Inside card:
76
77* Sign In heading
78* Email + Password fields
79* Forgot password (allowed here)
80* Primary CTA
81* Social sign-in
82
83---
84
85## Glassmorphism Rules (Same as Signup)
86
87* Background: `rgba(255, 110, 199, 0.12)`
88* Backdrop blur: `20–30px`
89* Border: `rgba(255, 110, 199, 0.35)`
90* Soft pink outer glow
91
92---
93
94## Typography System (Exact Match)
95
96### Card Heading
97
98* Size: 26–30px
99* Weight: 600–700
100* Color: #FFFFFF
101
102### Helper / Description Text
103
104* Size: 14–16px
105* Color: rgba(255,255,255,0.75)
106
107### Input Labels
108
109* Small, subtle, pink-tinted
110
111---
112
113## Form Fields
114
115Required:
116
117* Email Address
118* Password
119
120Optional:
121
122* Remember me (toggle / checkbox)
123
124---
125
126## Forgot Password
127
128* Position: Below password field
129* Style: Subtle pink text
130* No heavy underline
131* Secondary action only
132
133---
134
135## Primary Action Button
136
137* Text: **Sign In**
138* Pink gradient background
139* Same hover, focus, active behavior as signup
140* Strong visual priority
141
142---
143
144## Social Sign-In Section
145
146* Position: Bottom of card
147* Divider: "or continue with"
148* Icons only
149
150Icons:
151
152* Facebook
153* Instagram
154* Pinterest
155
156Style:
157
158* Circular glass buttons
159* Pink glow on hover
160
161---
162
163## Navigation Hint (Allowed Difference)
164
165* Small text below card:
166 *"Don’t have an account? Sign up"*
167* Styled subtle — not a CTA button
168
169---
170
171## Responsiveness
172
173* Desktop: Two-panel layout
174* Tablet: Panels compress
175* Mobile:
176
177 * Single column
178 * Card centered
179 * Left panel content moves above
180
181---
182
183## High-Level UX Workflow Diagram
184
185```text
186BLACK BACKGROUND CANVAS
187(soft pink glow ambience)
188
189┌─────────────────────────────────────────────────────────┐
190│ │
191│ LEFT: TRUST & CONTEXT RIGHT: QUICK ACTION │
192│ │
193│ ┌───────────────┐ ┌─────────────────────┐ │
194│ │ App Icon │ │ Pink Glass Card │ │
195│ │ │ │ │ │
196│ │ Welcome Back │ ─────▶ │ Sign In │ │
197│ │ Message │ Visual │ Helper text │ │
198│ │ │ Flow │ │ │
199│ │ Calm Desc │ │ [ Email ] │ │
200│ │ │ │ [ Password ] │ │
201│ │ Soft Glow │ │ │ │
202│ │ │ │ Forgot password? │ │
203│ │ │ │ │ │
204│ │ │ │ [ Sign In ] │ │
205│ │ │ │ │ │
206│ │ │ │ — or — │ │
207│ │ │ │ ○ ○ ○ │ │
208│ └───────────────┘ └─────────────────────┘ │
209│ │
210└─────────────────────────────────────────────────────────┘
211
212USER FLOW:
213Recognition → Trust → Speed → Access → Productivity
214```
215
216---
217
218## Output Deliverables
219
220* High-fidelity sign-in UI
221* Frontend layout (Tailwind / CSS)
222* Responsive behavior notes
223* Interaction & animation specs
224
225---
226
227## Senior-Level Best Practices
228
2291. Faster visual scan than signup
2302. Less text, more clarity
2313. Consistent brand language
2324. No visual noise
2335. Smooth micro-interactions
2346. Accessibility contrast
2357. Feels *familiar but distinct*
236
237---
238
239**This sign-in skill complements the signup skill as a cohesive auth system — consistent, premium, and intentional.**
tools-only