Design a light-mode website section: editorial serif authority anchored against warm porcelain surfaces, frosted glass plinths, and stippled azure particle vapor.
LAYOUT
The hero adopts an asymmetrical split layout inside a 1240px container. The left column (spanning approximately 5 out of 12 columns) holds the category pill, two-line serif display headline, paragraph body, dual CTA cluster, and horizontal trust list. The right 7 columns are dedicated to the centered 3D UI podium flanked by floating asynchronous workflow cards. Below this two-column hero sits a full-width, 4-cell frosted horizontal metric dock.
PALETTE (use these exact hex values)
- #FAFAF8 — Porcelain Canvas: dominant warm background wash grounding the entire viewport
- #FFFFFF — Pure Card Surface: solid white base for floating workflow nodes, stat panels, and secondary buttons
- #CA3E2B — Terracotta Crimson: primary cta buttons, logo mark geometry, and the headline termination dot
- #B13220 — Crimson Deep Hover: interactive hover and active states for primary cta elements
- #1A1A1A — Charcoal Black: editorial headings, brand wordmark, and primary interface labels
- #646460 — Parchment Slate: hero descriptive paragraphs, micro-copy, and breadcrumb navigation links
- #4D73D1 — Halftone Cobalt: procedural pointillist particle mist and hero timeline progress accents
- #16A34A — Compliance Emerald: soc-2 compliance stat callout and workflow pipeline completed checkmark icons
- #E6E6DF — Earthy Hairline: subtle boundaries for pill badges, input borders, and metric card dividers
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif, GT Super, Canela), weights 400/500. Sizes 12px caption, 13px body-sm, 15px body, 17px body-lg, 22px subheading, 32px heading, 64px display. Tracking -0.025em. The voice is intellectual, mature, and authoritative, reading more like an architectural journal or literary quarterly than a frantic venture-backed tool. The display serif carries sharp serifs and narrow proportions that signal deep craft, balanced by an ultra-clean, neutral grotesque for functional UI and copy. Instrument Serif or Newsreader provide authentic open-source replacements for the editorial headline.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 6px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled through physical and optical transparency rather than dark cast shadows. A stepped 3D frosted-glass dais sits below the hero product UI, casting soft, pale-blue ambient reflections onto the porcelain ground. Individual workflow cards float via delicate 0 6px 20px rgba(40, 60, 110, 0.07) shadows that lift them just above the viewport plane.
IMAGERY
The imagery is composed of an isometric 3D stage featuring translucent frosted resin, glass spheres, and a precise product UI viewport showing science and media content. Behind the 3D apparatus billows a procedural, two-tone cyan and ultramarine stippled halftone particle cloud reminiscent of fine spray ink. Photography is strictly enclosed within screen mockups; full-bleed or real-world lifestyle photos are forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an authoritative editorial serif headline ending with a standalone terracotta period against a tactile, 3D frosted-glass interface platform enveloped in retro-digital stippled pointillist clouds. This collision of heritage print craft and futuristic agentic rendering creates an immediate sense of trustworthy technical magic. Misuse occurs when designers swap the stipple pattern for a generic Figma layer-blur or drop the warm paper tone for cold white.
MUST
- Retain the warm porcelain canvas tone (#FAFAF8); never replace it with pure #FFFFFF.
- Terminate the main serif hero headline with a high-contrast terracotta crimson period dot.
- Use 6px radius on action buttons while keeping larger layout panels at 16px to 18px.
- Limit pure high-chroma red strictly to conversion CTAs and brand accent marks.
AVOID
- Never substitute the editorial serif headline with a modern technical monospace or geometric sans.
- Do not apply heavy black dropshadows; depth must rely on glass refraction and pale ambient occlusion.
- Avoid pill-shaped CTAs; button radii must remain clipped at 6px.
- Do not allow the halftone particle field to obscure text legibility on the left column.
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 中尝试 
