Design a light-mode mobile app interface screen: an airy pastel playground translating sunlit photography into tactile color swatches and pillowy mobile surfaces.
LAYOUT
The vertical flow follows an engaging mobile rhythm: a compact 44px header bar, centered logo signature, full-width 240px wavy hero card, a split 2-column value proposition section (text left, interactive polaroid right), and a horizontal carousel of pastel quick-action tool tiles anchored at the bottom edge.
PALETTE (use these exact hex values)
- #FAFAFC — Porcelain Canvas: dominant screen background creating a soft, warm paper-like foundation
- #FFFFFF — Pure White: elevated polaroid cards, circle action buttons, and nested image frames
- #1E2638 — Midnight Ink: wordmark, primary section headings, and high-emphasis body headers
- #717E95 — Muted Slate: subtitles, explanatory copy, and tertiary action labels
- #EE6C65 — Coral Sunset: primary interactive CTA fill and second dot in the core brand mark
- #38A5E8 — Aegean Blue: first brand dot and extraction tinting on the primary feature card
- #F4A468 — Tuscan Apricot: third brand dot and warm midtone swatch
- #94C8B8 — Seafoam Sage: fourth brand dot and soft green swatch / card surface tint
- #F3EFFC — Lavender Glow: sparkle action button background and library card tint
TYPOGRAPHY
Typeface Quicksand (or Nunito, Sofia Soft, Outfit), weights 500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px subheading, 18px heading, 26px heading-lg, 32px display. Tracking -0.01em at display, 0.01em at caption. The typographic tone is cheerful, contemporary, and approachable. Rounded geometric shapes (exemplified by Quicksand or Sofia Soft) eliminate technical intimidation, making color curation feel like an inviting lifestyle pastime rather than complex design software.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 999px, buttons 999px. Spacing on a 4px unit, 16px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is handled through whisper-soft ambient shadows (rgba(30, 38, 56, 0.05) with 12px blur and 4px vertical offset) rather than hard edges. The primary layered element is the polaroid swatch deck, which uses physical overlap and slight 2-degree counter-rotation to simulate physical photo cards resting on a table.
IMAGERY
Photography features high-key, sun-soaked outdoor scenery like Santorini cliffside architecture, pale blue skies, and hot air balloons. Imagery must possess clear, warm color zones (sky, terracotta, whitewash, water) that intuitively justify the extracted pastel swatches underneath.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive horizontal 4-dot chromatic sequence placed directly above the rounded brand title, paired with the organic wave cut at the bottom edge of the hero photography banner. To execute properly, ensure the wave curve is gentle and asymmetrical, and never substitute the dots with geometric squares or monochrome circles.
MUST
- Use generous corner radii (24px to 32px) on all imagery and card surfaces.
- Include the signature 4-dot chromatic sequence whenever displaying brand identity.
- Keep background tones creamy and off-white (#FAFAFC) to preserve pastel luminosity.
- Use pill-shaped containers (999px radius) for all action buttons and interactive chips.
AVOID
- Do not use sharp 0px or 4px corners; it destroys the friendly, approachable aesthetic.
- Never use pure black (#000000) for text or shadows; rely on Midnight Ink (#1E2638).
- Avoid harsh high-contrast drop shadows; use diffuse multi-layered blurs under 12px.
- Do not display saturated neon hues; maintain soft, sun-drenched Mediterranean pastel tones.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
