HelloTalk - Language Learning

Colors

• #FFFFFFModal Card Fill · Dialogue popup background fill
• #000000Heading Text · Dialog headline
• #36D559Timer Green · Countdown digit background boxes
• #1C6BFFGradient CTA Blue · Confirm button gradient start
• #8BF368Gradient CTA Lime · Confirm button gradient end
• #767680Secondary Action Grey · Cancel text button color
• #000000Overlay Dimmer · Backdrop scrim with roughly 40% opacity

Type

• Modal TitleSF Pro Display · 52px · 700 · #000000
• Countdown TitleSF Pro Text · 36px · 600 · #30D158
• Modal CTA LabelSF Pro Display · 44px · 700 · #FFFFFF
• Modal Dismiss LabelSF Pro Text · 38px · 500 · #636366

Elements

• Exit Intent Modal Dialog · Modal Sheet / Dialog

  Centered floating card spanning roughly 86% of screen width, centered vertically. · Solid white card with large rounded corners, soft diffused drop shadow over darkened paywall background.

• Urgency Character Illustration · Illustration

  Centered within the modal, approximately 380px wide. · Orange creature character in a cape panicking next to an hourglass.

• Countdown Units · Timer

  Centered under illustration. · Three distinct bright green square blocks containing digits separated by colons.

• Get Deal Button · Button

  Full width inside modal with 48px horizontal padding, 110px height. · Horizontal blue-to-light-green gradient pill fill with bold centered white text.

• Cancel Button · Button

  Centered below primary CTA with 36px top margin. · Borderless text button with muted neutral grey font.

Layout

Modal dialog overlay layout over the dim paywall screen. Centered visual hierarchy with punchy headline, graphic mascot, countdown counter, affirmative gradient CTA button, and understated dismissal text link.

Notes

Modal creates exit friction using scarcity and urgency patterns.