Opal: Screen Time Control

Colors

• #0a0a0aBackground · screen background
• #d4ef7aSection Header Yellow · eyebrow section header text
• #141414Image Card Fill · embedded visual card background

Type

• eyebrowInter · 13px · bold · #d4ef7a
• titleInter · 32px · bold · #ffffff
• bodyInter · 15px · regular · #cccccc

Elements

• Visual Card · container card

  Center content area, holding lifestyle photograph. · Dark rounded rectangle with photo and overlaid caption banner at the bottom.

• Commit Button · primary button

  Bottom fixed horizontal pill. · Mint green gradient fill with black text.

Layout

Top navigation, yellow uppercase section header, large title, descriptive paragraph, central photographic card with caption, and bottom action button.

Notes

None