Design a light-mode web interface screen: quiet wealth management wrapped in warm paper tones, deep forest teal, and organic botanical serenity.
LAYOUT
The viewport is split into a fixed 240px dark sidebar on the left and a scrollable warm canvas on the right. Content progresses vertically from a minimal search top bar into an airy botanical hero card, immediately followed by a 4-unit horizontal summary strip. The mid-body organizes analytics into a balanced two-column grid (60/40 cash flow vs spending donut), leading into transactions and goals, finalized by a full-width dark promotional callout.
PALETTE (use these exact hex values)
- #0F1E25 — Obsidian Spruce: Primary dark surface for the persistent left navigation bar and elevated bottom feature callout.
- #F5F5F3 — Alabaster Ground: Muted warm canvas background setting the soft editorial foundation for main content cards.
- #FFFFFF — Pure Milk: Elevated card backgrounds, dropdown surfaces, and metric container fills.
- #103B38 — Deep Forest Teal: Primary interactive buttons, key donut chart arcs, and prominent callout banners.
- #36B39C — Eucalyptus Mint: Data trend lines, positive delta indicators, progress rings, and focal interactive accents.
- #1A2429 — Charcoal Slate: High-contrast headings, main metric figures, and transaction titles.
- #79878D — Muted Sage Silver: Secondary labels, timestamps, metadata, axis scales, and inactive icons.
- #E9F5F2 — Pale Celadon: Subtle circular icon backings, active tag pills, and light trend badges.
TYPOGRAPHY
Typeface IvyPresto Headline (or Playfair Display, Canela, Cormorant Garamond), weights 400/500. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 36px display. Tracking -0.015em at display. The typographic tone balances editorial luxury with Swiss banking precision. The display serif delivers warmth, intimacy, and human scale to financial management, while the clean geometric grotesque keeps numerical amounts and accounting tables razor sharp and instantly scannable. IvyPresto can be swapped for Playfair Display or Canela without losing character, provided weights remain light to medium.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 8px. Spacing on a 8px unit, 20px gaps, 32px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered flat-to-ambient rather than layered with pronounced drop shadows. Cards achieve separation purely via color contrast—crisp white (#FFFFFF) sitting upon warm alabaster (#F5F5F3)—occasionally supported by a faint 1px tone-on-tone border (#E8EBE9) or ultra-soft 24px blur ambient shadow with less than 4% opacity.
IMAGERY
Photography features soft-focus, desaturated botanical still-lifes with organic eucalyptus, dried seed pods, or branches under natural morning light. The image dissolves directly into the background canvas using radial or horizontal feathering. Stark corporate office photos, stock 3D objects, or hyper-saturated lifestyle photography are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The botanical hero bleed: a muted branch photography cutout fading seamlessly into the warm alabaster canvas behind an editorial serif greeting. This converts an intimidating financial dashboard into an inviting morning ritual. To implement correctly, feather the image mask horizontally into the background color (#F5F5F3); misuse occurs when images are placed inside hard rectangular containers or use busy colorful compositions.
MUST
- Preserve the high contrast between the #0F1E25 dark navigation and the warm #F5F5F3 dashboard canvas.
- Use serif typography strictly for welcoming display headings, never for financial numbers or data tables.
- Keep chart palettes disciplined to deep forest teal (#103B38), mint (#36B39C), and neutral grey (#D3D9DB).
- Blend botanical or organic imagery with soft feathered gradients rather than hard geometric image borders.
AVOID
- Do not introduce harsh neon accent colors or bright saturated reds for ordinary financial fluctuations.
- Never make the main dashboard background pure stark white (#FFFFFF); always use the warm alabaster ground (#F5F5F3).
- Avoid heavy drop shadows; card boundaries must rely on surface contrast and delicate 1px border hints.
- Do not set UI labels, navigation buttons, or data tables in serif typefaces.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2336:3520. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
