Design a light-mode web interface screen: warm parchment security tech combining muted terracotta accents, slate blues, and soft editorial geometric typography.
LAYOUT
Classic 50/50 two-column hero split anchored within a 1240px container. Left column contains badge, massive headline, descriptive paragraph, dual CTA buttons, and social proof stack. Right column hosts the focal illustration; the lower deck holds a unified 4-up benefit grid.
PALETTE (use these exact hex values)
- #FCFBF7 — Parchment White: Global page canvas background providing an organic, warm editorial feel.
- #F7F5F0 — Bone Light: Background for badges, avatar placeholders, and feature container hover states.
- #BD5B43 — Terracotta Rust: Primary brand accent used on primary CTA buttons, logo glyph, and headline emphasis.
- #1A202C — Deep Slate: High-contrast headings, body titles, brand wordmark, and dark UI speech bubbles.
- #64748B — Muted Charcoal: Supporting copy, navigation links, and feature card descriptive text.
- #5D82D1 — Soft Periwinkle: Secondary accent used in speech bubble illustrations and feature icon highlights.
- #6B8E73 — Sage Green: Security icons, shield badges, and padlock illustrations.
- #E8E4DC — Parchment Border: Hairline card outlines, badge strokes, and feature separator lines.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,DM Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 16px subheading, 24px heading, 52px display. Tracking -0.03em on display, 0em on body. Plus Jakarta Sans delivers a modern, clean, geometric presence with tight display tracking that signals security competence without clinical coldness. It behaves warmly like an editorial tech publication.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled entirely flat and architectural without diffuse drop shadows. Hierarchy relies on 1px tinted borders (#E8E4DC), subtle surface fill differences, and layered illustration planes.
IMAGERY
Modern editorial 2D vector character illustration rendered in muted navy, terracotta, and denim blue tones with organic pastel leaf silhouettes behind. Technical security metaphors (floating lock, speech bubble dots, envelope) float harmoniously around the central figure.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone headline treatment ('Encrypt' rendered in #BD5B43 while surrounding text stays #1A202C) set against an organic parchment background with a 4-column bordered bottom feature shelf.
MUST
- Keep canvas firmly warm bone (#FCFBF7) instead of default stark white.
- Use terracotta (#BD5B43) selectively for exactly one focal word in the main headline.
- Pair flat vector character illustrations with smooth pastel security icons (shields, speech bubbles, locks).
- Maintain generous line heights on body paragraphs to support an editorial, secure tone.
AVOID
- Do not apply heavy dark drop shadows; keep elevation nearly flat with hairlines.
- Never replace the warm terracotta primary color with generic bright blue or purple.
- Do not use sharp 0px corners; buttons must sit at 8px and cards at 16px.
- Avoid harsh high-contrast pure black (#000000); use deep charcoal slate (#1A202C).
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 中尝试 
