HelloChinese - Learn Chinese

Colors

• #131315Dark Neutral Background · Screen background
• #1A222FCard Slate Surface · Profile hero card background
• #1FE07FBrand Neon Mint · Sign up button · Active tab indicator · Accent highlights
• #103C26Notice Green Dark · Warning callout background
• #D1F5E0Notice Green Text · Warning callout text
• #FFDF00Warning Yellow · Premium upsell banner background
• #1B1B1EMetric Card Fill · Statistics item background

Type

• Profile Button Labelsystem-ui · 34px · 800 · #FFFFFF
• Warning Noticesystem-ui · 32px · 400 · #D1F5E0
• Banner Titlesystem-ui · 42px · 700 · #121212
• Section Headersystem-ui · 44px · 700 · #FFFFFF
• Metric Valuesystem-ui · 44px · 700 · #FFFFFF
• Metric Captionsystem-ui · 30px · 400 · #94949C

Elements

• Header Icons · Action Icons

  Top right corner, horizontal row with notification bell and settings gear · Monochrome white line icons with subtle notification red dot

• User Profile Card · Card

  Upper section below header, margins 60px, height ~380px · Dark blue-slate subtle gradient card holding profile circle silhouette, streak icon, and stacked green buttons

• Data Warning Notice · Callout Box

  Below profile card, margins 60px, padding 36px · Dark green flat fill with rounded corners and light green helper text

• Premium Upgrade Banner · Promotional Banner

  Center section, horizontal ribbon banner spanning ~90% screen width · Bright yellow background with angled right cut/chevron styling, crown icon on left, circular arrow button on right

• Statistics Grid · Grid

  2x2 grid below 'Statistics' heading, ~20px gutter spacing · Dark grey cards with rounded corners, white metric text, muted grey subtitle, and right chevron arrow

Layout

Vertical scrollable profile view. Top actions header, account authentication banner, guest account preservation alert, prominent yellow premium subscription callout, and 2-column metrics dashboard. Bottom navigation anchored at bottom.

Notes

The yellow banner has an asymmetric chevron right design pointing towards the circular trigger button.