Substack

Colors

• #F2F2F7Canvas Off-White · inset grouped background
• #FFFFFFCard White · grouped list card fill · floating button fill
• #000000Primary Text · large title · mailbox names
• #007AFFSystem Blue · chevron accents · action buttons · sent icon
• #FFCC00VIP Gold · VIP star icon stroke
• #2F80EDJunk Blue · junk box icon stroke
• #8E8E93Count Gray · badge count text · chevron accessory

Type

• Large TitleSF Pro Display · 68px · 800 · #000000
• Section HeaderSF Pro Text · 38px · 700 · #000000
• List Row LabelSF Pro Text · 34px · 400 · #000000
• Item Count / ChevronSF Pro Text · 32px · 400 · #8E8E93

Elements

• Edit Action Button · button

  Top right below status bar, rounded pill shape ~160px wide by ~72px tall · White rounded button with centered dark text

• VIP Grouped Card · card

  Horizontal card with lateral margins 44px, height ~120px · Solid white card with rounded corners containing star icon, label, and chevron

• iCloud Grouped Card · card

  Inset grouped list below iCloud section header, lateral margins 44px, height ~240px · Solid white card containing Sent and Junk rows divided by thin hairline divider

• Compose Floating Action Button · button

  Anchored bottom right, ~120px from bottom edge, diameter ~120px · White circular button with dark compose square/pencil icon and subtle drop shadow

Layout

iOS Inset Grouped Mailboxes directory layout with top navigation edit button, large title 'Mailboxes', and distinct rounded white content cards on soft off-white background with bottom floating compose trigger.

Notes

Native iOS grouped table styling.