Opal: Screen Time Control

Colors

• #0a0707Background Dark · background
• #2ecc71Green Heart Accent · icon fill

Type

• section headerSF Pro Text · 12px · 700 · #b0ffaa
• titleSF Pro Display · 34px · 700 · #ffffff

Elements

• Heart Icon Box · container

  Top left aligned below header, square with rounded corners · Dark translucent card with green heart emoji

• Quote Callout Box · box

  Centered horizontally in lower middle section · Dark container with thin yellow-green border

Layout

Informational layout with top icon, category header, bold title, descriptive body text, and highlighted callout box.

Notes

Informatative screen layout.