Design a light-mode web interface screen: terracotta warmth grounded in high-trust editorial fintech reassurance and pristine layered porcelain UI.
LAYOUT
The page follows an asymmetric hero grid with a left-aligned editorial text block spanning roughly 55% width and a right-aligned floating interactive card composition spanning 45%. Below the hero fold sits a full-width, centered social proof section with low-opacity partner marks. The page terminates in a 4-column balanced card grid displaying feature capabilities with consistent 20px gaps and equal vertical heights.
PALETTE (use these exact hex values)
- #FAF8F5 — Canvas Warmth: Global page background providing tactile cream warmth beneath white surface elevations.
- #FFFFFF — Card Surface: Floating card containers, modal backdrops, and active interactive plates.
- #B84A39 — Terracotta Brand: Primary logo mark, editorial hero headline accent, and primary call-to-action button fill.
- #1D232C — Ink Charcoal: Primary headings, numerical financial figures, and highest-contrast body elements.
- #667085 — Slate Neutral: Descriptive copy, metadata captions, inactive navigation links, and partner logos.
- #20252E — Card Slate: High-contrast payment card simulator surface within the interactive preview widget.
- #36855E — Validation Forest: Success badges, radial gauge completion stroke, approved statuses, and trust checkmarks.
- #EBF6F0 — Pale Sage Fill: Background pill fill for verified tags and positive financial state indicators.
- #EFECE6 — Subtle Cream Border: Delicate container dividers, outline buttons, and low-contrast perimeter rules.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Manrope), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 32px heading, 54px display. Tracking -0.02em on headings, 0 on body. The typography pairs the rigorous clarity of a geometric tech sans (Plus Jakarta Sans) with the literary warmth of an editorial serif (Instrument Serif). This juxtaposition bridges modern fintech capability with timeless fiduciary trust. For production substitutions, Inter combined with Newsreader or Playfair Display will maintain identical authority.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using layered white porcelain cards resting on a warm cream base, completely avoiding harsh borders. Elevations use multi-layered ambient drop shadows with warm umber undertones (rgba(45, 35, 25, 0.06)) spread over 40px to 60px blur radii. Overlapping elements—such as the risk gauge card overlapping the transaction card—rely on these soft ambient halos to define foreground z-index without stark outlines.
IMAGERY
Visual assets consist of clean synthetic UI components paired with abstract, soft terracotta and cream botanical foliage silhouettes. No stock photography of people or generic corporate buildings is permitted. All vector illustrations must share the muted, desaturated earthy palette of blush, terracotta, and soft sage.
SIGNATURE DETAIL — the thing that makes this design itself
The standout move is the single-line serif interruption inside the bold modern hero headline, specifically highlighted in burnt terracotta #B84A39 directly below charcoal grotesque sans text. This breaks the clinical coldness common to security software, projecting human consideration. It must only be used on the second line or concluding phrase of a key assertion, never on body copy or auxiliary titles.
MUST
- Keep canvas background consistently warm (#FAF8F5) to maintain the organic editorial atmosphere.
- Pair heavy geometric sans headlines with warm serif accents strictly on emotional brand claims.
- Use pill badges (radius 999px) for status and categories, but keep action buttons at 8px radius.
- Apply ultra-soft diffused drop shadows (blur 30px-50px) with warm brown tints rather than pure black.
AVOID
- Do not use pure stark white (#FFFFFF) for the primary background canvas.
- Do not use sharp 0px corners; all surfaces must carry between 8px and 20px radius.
- Do not render entire paragraphs in the editorial serif typeface; keep it strictly for accent phrases.
- Do not introduce cold corporate blue (#0066FF) as a primary action color.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3456:2384. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
