Animates - life companions

Colors

• #0D0B10background_black · screen background
• #19161Ecard_surface · group container background
• #FFFFFFtext_primary_white · headings · labels · companion name
• #86818Etext_secondary_grey · section header labels · chevron · free badge
• #34C759toggle_active_green · switch toggle active fill
• #27232Edivider_dark · list item separator

Type

• screen_titleSF Pro Display · 68px · 800 · #FFFFFF
• section_headerSF Pro Text · 34px · 400 · #86818E
• card_titleSF Pro Display · 60px · 800 · #FFFFFF
• button_labelSF Pro Text · 32px · 600 · #0D0B10
• list_item_labelSF Pro Text · 34px · 400 · #FFFFFF

Elements

• back_button · icon_button

  Top-left below status bar, 80x80px circular button · Dark circular container with centered white left chevron

• companion_card · card

  Full width with 40px margins, vertically stacked character avatar, name 'Yuki', and action button · Dark charcoal rounded card container

• switch_companion_button · button

  Inside companion card, full width with 32px side margins, height 96px · Solid white rounded pill button with circular arrows icon and dark text

• settings_switch_group · list_group

  Inset rounded card containing 2 rows with icons, labels, and toggle switches · Dark surface card with subtle horizontal divider between items

• ios_toggle_switches · toggle

  Right-aligned in row items, ~100x60px · iOS style green active toggle with white circular thumb

• subscription_group · list_group

  Inset rounded card below Subscriptions header with 2 actionable rows · Dark surface card, right chevrons and 'Free' status text

Layout

Standard iOS settings list layout with grouped inset cards, section titles, rounded buttons, and system toggles on dark background.

Notes

Follows standard iOS grouped table view design patterns.