Substack

Colors

• #FFFFFFBackground White · screen background
• #242424Primary Dark · header title
• #3CA3F9Active Input Border Blue · active text field border
• #BDBDBDPlaceholder Gray · text field placeholder text
• #737373Helper Gray · helper caption text
• #F0F0F2Disabled Button Fill · continue button background
• #B0B3BADisabled Button Text · continue button label

Type

• Step HeaderNewsreader · 72px · 700 · #242424
• Input PlaceholderSF Pro Text · 36px · 400 · #BDBDBD
• Helper TextSF Pro Text · 30px · 400 · #737373
• Button LabelSF Pro Text · 36px · 600 · #B0B3BA

Elements

• Back Navigation Button · button

  Top-left positioned below status bar, 48px from left edge, circular ~80px diameter · Minimalist translucent circular hit target with black chevron left icon

• Email Text Input · input_field

  Below header title, full width spanning 984px, height ~130px, 48px lateral margins · White fill with 3px solid sky blue focused outline border

• Continue Action Button · button

  Fixed near bottom, width ~984px, height ~116px, 48px horizontal margins · Flat light gray fill with disabled muted text state

Layout

Linear registration step with top navigation back button, serif form heading, active text input with explanation sublabel, and bottom-pinned disabled submit button.

Notes

Active focus state indicated by prominent blue border on input.