위프 - BL 취향저격 AI 채팅

Colors

• #13111DBackground Dark · screen background
• #1E1A29Card Surface · plan card fill · table container fill
• #5835C4Border Selected · selected plan card highlight border
• #EAB308Accent Gold · booster plan price highlight
• #A855F7Accent Purple · master plan price highlight · most popular tag fill
• #D946EFButton Gradient Start · bottom CTA button start
• #8B5CF6Button Gradient End · bottom CTA button end
• #FFFFFFText Primary · headings · benefit rows · CTA text
• #8D879FText Muted · strikethrough prices · subtitle text

Type

• Screen TitleSF Pro Display · 42px · 700 · #FFFFFF
• Plan TitleSF Pro Display · 38px · 700 · #FFFFFF
• Price DisplaySF Pro Display · 50px · 800 · #A855F7
• Table HeaderSF Pro Text · 28px · 600 · #C084FC
• Feature Row LabelSF Pro Text · 28px · 500 · #FFFFFF

Elements

• Navigation Bar · header

  Left-aligned back arrow with adjacent 'Subscription' title · Clean dark header without border line

• Booster Key Plan Card · selection card

  Rounded card with icon, title, renewal subtitle, and right-aligned price · Subtle border with dark fill (#1E1A29), gold accent pricing ($5.99)

• Master Key Plan Card · featured selection card

  Stacked plan card with 'Most popular' badge at top right and bullet feature list · Highlighted purple border (#5835C4), diamond icon, purple accent pricing, and 5-item feature breakdown

• Comparison Table · data table

  4-column matrix: Benefit, Free, Booster, Master · Dark rounded container (#1A1725) with alternating dividers and highlighted headers

• Primary Action CTA · fixed bottom button

  Full width button pinned near screen bottom with arrow icon · Linear gradient from pink to violet (#D946EF to #8B5CF6) with rounded capsule styling

Layout

Vertical hierarchical purchase page featuring plan cards, an in-depth tier comparison table, and a sticky gradient primary CTA at the bottom.

Notes

The Master Key Plan card is visually elevated through the Most Popular badge and explicit multi-line feature list.