SCREEN ROOT STRUCTURE
Scaffold
→ SafeArea
→ Padding (Equal margin on all sides)
→ Column
→ (Main vertical layout for all elements)
BRAND LOGO SECTION
Column
→ SizedBox (height: 80)
→ Center
→ Row
→ MainAxisAlignment: center
→ SvgPicture.asset
→ Claude Star Logo
→ SizedBox (width: 10)
→ Text
→ "Claude"
→ Style: Bold / Serif font
MAIN TAGLINE
Column
→ SizedBox (height: 20)
→ Center
→ Text
→ "Do your best work with Claude"
→ Style: Serif font / H1
→ TextAlign: center
SOCIAL AUTH BUTTON STRUCTURE (REUSABLE)
Column
→ ElevatedButton
→ BackgroundColor: Black
→ BorderRadius: Rounded
→ Padding
→ Row
→ MainAxisAlignment: center
→ Icon / Image (Provider logo)
→ SizedBox (width: 10)
→ Text
→ Button label
→ Color: White
SOCIAL AUTH — GOOGLE & APPLE
SizedBox (height: 50)
→ ElevatedButton
→ Image.asset (Google logo)
→ Text: "Continue with Google"
SizedBox (height: 15)
→ ElevatedButton
→ Icon (Apple logo, White)
→ Text: "Continue with Apple"
OR DIVIDER SECTION
Column
→ SizedBox (height: 30)
→ Row
→ Expanded
→ Divider
→ Padding (Horizontal: 15)
→ Text
→ "OR"
→ Style: Small / Grey
→ Expanded
→ Divider
EMAIL INPUT FIELD
Column
→ SizedBox (height: 30)
→ TextField
→ InputDecoration
→ HintText: "Personal or work email"
→ ContentPadding (Internal spacing)
→ OutlineInputBorder
→ BorderRadius: Rounded
TERMS & PRIVACY SECTION
Column
→ SizedBox (height: 30)
→ RichText
→ TextAlign: center
→ TextSpan
→ "By continuing, you agree to Anthropic's "
→ TextSpan
→ "Consumer Terms"
→ Style: Underline / Link
→ TextSpan
→ " and "
→ TextSpan
→ "Usage Policy"
→ Style: Underline / Link
→ TextSpan
→ ", and acknowledge their "
→ TextSpan
→ "Privacy Policy"
→ Style: Underline / Link
1. SCREEN ROOT STRUCTURE
Scaffold
→ SafeArea
→ Padding (Equal margin on all sides)
→ Column
→ (Main vertical layout for all elements)
2. BRAND LOGO SECTION
Column
→ SizedBox (height: 80)
→ Center
→ Row
→ MainAxisAlignment: center
→ SvgPicture.asset
→ Claude Star Logo
→ SizedBox (width: 10)
→ Text
→ "Claude"
→ Style: Bold / Serif font
3. MAIN TAGLINE
Column
→ SizedBox (height: 20)
→ Center
→ Text
→ "Do your best work with Claude"
→ Style: Serif font / H1
→ TextAlign: center
4. SOCIAL AUTH BUTTON STRUCTURE (REUSABLE)
SizedBox (height: 50)
→ ElevatedButton
→ Image.asset (Google logo)
→ Text: "Continue with Google"
SizedBox (height: 15)
→ ElevatedButton
→ Icon (Apple logo, White)
→ Text: "Continue with Apple"
5. SOCIAL AUTH — GOOGLE & APPLE
SizedBox (height: 50)
→ ElevatedButton
→ Image.asset (Google logo)
→ Text: "Continue with Google"
SizedBox (height: 15)
→ ElevatedButton
→ Icon (Apple logo, White)
→ Text: "Continue with Apple"
6. OR DIVIDER SECTION
Column
→ SizedBox (height: 30)
→ Row
→ Expanded
→ Divider
→ Padding (Horizontal: 15)
→ Text
→ "OR"
→ Style: Small / Grey
→ Expanded
→ Divider
7. EMAIL INPUT FIELD
Column
→ SizedBox (height: 30)
→ TextField
→ InputDecoration
→ HintText: "Personal or work email"
→ ContentPadding (Internal spacing)
→ OutlineInputBorder
→ BorderRadius: Rounded
8. TERMS & PRIVACY SECTION
Column
→ SizedBox (height: 30)
→ RichText
→ TextAlign: center
→ TextSpan
→ "By continuing, you agree to Anthropic's "
→ TextSpan
→ "Consumer Terms"
→ Style: Underline / Link
→ TextSpan
→ " and "
→ TextSpan
→ "Usage Policy"
→ Style: Underline / Link
→ TextSpan
→ ", and acknowledge their "
→ TextSpan
→ "Privacy Policy"
→ Style: Underline / Link