Design a light-mode website section: misty botanical landscape dissolved into ethereal whitespace with sculptural editorial type and luminous diagrammatic nodes.
LAYOUT
The hero layout follows an asymmetric two-column split anchored within a 1360px viewport. The left 50% is reserved for pure whitespace containing the vertical narrative stack: eyebrow, display title, short paragraph, button pair, and live metric badge. The right 50% houses the landscape scenery seamlessly merging into the center, topped by the centered orbital hub and satellite nodes.
PALETTE (use these exact hex values)
- #FFFFFF — Pure Canvas: Pristine white base that fades across the left half of the layout
- #4F5CE2 — Periwinkle Brand: Primary interactive fill, central diagram hub, and selected hero emphasis text
- #18191B — Deep Onyx Text: Display headlines, brand wordmark, and primary interface labels
- #5E606D — Muted Slate Text: Subtitles, secondary navigation items, and body descriptions
- #34C759 — Live Emerald: Single green bullet indicating real-time system activity in metric badge
- #E2E3E8 — Subtle Outline: Hairline boundary for secondary pill buttons and subtle metric chips
TYPOGRAPHY
Typeface Instrument Serif (or Editorial New, Playfair Display, GT Super Display), weights 400. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 68px display. Tracking -0.02em. The typography speaks with quiet authority, pairing the literary elegance of an editorial serif with the pristine utility of modern digital sans-serifs. The high-contrast serif evokes scholarly depth and permanence, while the unadorned sans keep system labels utilitarian. If Instrument Serif is unavailable, substitute with Editorial New or GT Super Display.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, airy density.
DEPTH
Depth is created using gentle atmospheric layers rather than sharp physical drop shadows. Floating schematic pills utilize a delicate, wide-radius ambient occlusion shadow (0px 12px 32px rgba(80, 85, 130, 0.08)) that lifts them slightly above the misty landscape. The central brand hub leverages strong color saturation against soft surroundings to advance visually without requiring high elevation.
IMAGERY
Photography features soft-focus, rolling lavender or floral hills veiled in morning mist, capturing an impression of natural scale and tranquility. Imagery is heavily biased toward pastel lavenders, soft periwinkles, and pale stone grays. Hard geometric 3D renders, high-saturation stock photography, or harsh urban scenes would fundamentally break the poetic calm.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal atmospheric fade where photographic lavender hilltops dissolve into stark canvas white, bridged solely by an ethereal constellation diagram and a periwinkle-accented serif phrase. Misusing it by replacing the mist with a hard image crop or a generic dark gradient instantly destroys the calm, cognitive clarity of the brand.
MUST
- Dissolve photography smoothly into the white background using a wide horizontal linear gradient alpha mask.
- Limit the editorial serif strictly to the display headline; use clean sans-serif everywhere else.
- Highlight precisely one semantic line of the headline with brand periwinkle (#4F5CE2).
- Keep diagram connective vectors thin (1px to 1.5px) in translucent white or pale violet tint.
AVOID
- Do not apply heavy dark drop shadows to pills or buttons; stick to soft ambient illumination.
- Do not use saturated high-contrast photography; landscape imagery must feel misty, tranquil, and desaturated.
- Never enclose the main content block inside a bordered card or panel.
- Do not color all three headline sentences in periwinkle; the contrast against black is essential.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试