Design a light-mode mobile app interface screen: a tender storybook portrait gallery framed in warm parchment, organic waveforms, and deep wine velvet.
LAYOUT
The viewport follows a focused, symmetrical single-screen mobile layout. At the top, a subtle 9:41 status bar leads into a centered header motif, primary serif title ('Choose your sister'), and secondary instruction. The center stage is dedicated to a balanced 2-column side-by-side grid holding twin character cards. The bottom fifth transitions via a natural curved wave into a soft green tint holding a centered trust badge and two-line reassurance disclaimer.
PALETTE (use these exact hex values)
- #FAF6F0 — Parchment Ivory: Primary screen background canvas conveying warmth and paper-like tactility
- #FFFFFF — Card Surface White: Foreground card surface providing crisp contrast against the warm cream background
- #E9EFE7 — Sage Foam: Organic footer wave tone creating subtle grounded context for informational trust notes
- #5C1C29 — Deep Wine: Primary interactive button fill delivering high-contrast focal points inside character cards
- #FBE6E4 — Blush Aura: Soft organic halo behind 3D avatar portraits inside each card
- #D8C6A5 — Antique Filigree: Subtle wireframe line illustrations, card divider flourishes, and hairline embellishments
- #6C8469 — Muted Sage: Small trust icon fill in the lower verification badge
- #271B1F — Espresso Plum: Display headings, character names, and status bar elements
- #736365 — Warm Taupe: Descriptive body copy and auxiliary personalization text
- #FFFFFF — Button White: Action label text and navigation chevrons on wine buttons
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Libre Baskerville, EB Garamond), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 22px heading, 28px display. Tracking -0.01em at display, 0 at title. The typographic pairing exudes storybook warmth, nostalgia, and refined craftsmanship. Cormorant Garamond lends a fairytale, heirloom quality with generous proportions and graceful serifs, making each character feel like an illustrated protagonist. Complementary sans-serif text (Plus Jakarta Sans) anchors the UI with clarity, preventing the experience from becoming overly ornate or illegible on small mobile screens.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 999px. Spacing on a 8px unit, 14px gaps, 32px between sections, 390px container, comfortable density.
DEPTH
Depth is handled through whisper-soft ambient diffusion rather than sharp stepped elevations. Cards float using a very pale warm shadow (0px 10px 28px rgba(90, 50, 60, 0.04)) over the parchment ground. Contrast is primarily compositional and chromatic—pure white card surfaces against beige canvas—creating effortless separation without heavy visual noise.
IMAGERY
Visuals rely on polished, 3D animated character busts exhibiting smooth claymorphic textures, warm skin tones, and expressive, closed-eye friendly smiles. Backing each character is a fluid, asymmetrical blush blob (#FBE6E4) flanked by delicate four-point star sparkles. The canvas background is decorated with faint, outline-only childlike doodles (chalkboard, horse, scissors) drawn in whisper-light gold line work.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive centerpiece is the twin storybook character card with its organic blush portrait halo, centralized filigree diamond divider, and deep wine pill CTA. This treatment transforms standard multi-choice radio options into an emotional, keepsake-like selection ritual. Misusing it by replacing the filigree with a generic flat grey border or replacing the pill with a square button instantly destroys the fairytale charm.
MUST
- Use warm off-white (#FAF6F0) rather than sterile #FFFFFF for the master canvas background.
- Pair elegant literary serifs for names and headings with a clean geometric sans for UI controls.
- Enclose 3D character avatars with soft organic blob silhouettes in pastel blush tones (#FBE6E4).
- Keep card corners generous with at least a 20px to 24px border radius for softness.
AVOID
- Do not use harsh black (#000000) for text; always employ espresso plum (#271B1F) or warm taupe.
- Avoid square or sharp button geometries; all action buttons must remain true rounded pills (999px).
- Never apply aggressive, dark shadows; cards should rely on subtle blur (rgba(60, 40, 45, 0.05)).
- Do not crowd the twin cards; maintain a comfortable 14px to 16px lateral gap between columns.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
