UFC

Colors

• #0A0A0ABlack · background
• #FFFFFFWhite · text · toggle handle
• #1C1C1EDark Gray · setting group background
• #E50914Red · toggle active fill · button background
• #888888Gray · descriptions

Type

• screen titleRoboto · 16px · bold · #FFFFFF
• section headerRoboto · 14px · bold · #FFFFFF
• setting labelRoboto · 15px · regular · #FFFFFF

Elements

• Settings List Group · card group

  Rounded container grouping related preference options · Dark grey fill with internal divider lines

• Toggle Switch · switch

  Aligned to the right edge of setting rows · Red pill background with white circular handle when active

Layout

Vertical scrolling list of grouped preference settings with a top navigation bar containing a back button and title.

Notes

Preferences configuration screen.