Design a light-mode website section: scholarly elegance meets computational precision through warm paper tones, stippled archival clouds, and sharp terracotta accents.
LAYOUT
The hero uses an asymmetric two-column split across a 1240px container. The left column spans roughly 55% width, stacking brand display headline, descriptive body copy, dual CTA row, and status ticker with 24px to 32px gaps. The right column holds the generative stipple field with the interactive dark query card centered and slightly offset downwards to break horizontal alignment.
PALETTE (use these exact hex values)
- #FAF8F5 — Archival Paper: Primary background canvas creating a warm literary and historical feel across all viewports.
- #1E2124 — Terminal Charcoal: Background for floating query mockups, primary headers, and high-emphasis contextual cards.
- #9C382E — Terracotta Rust: Focal accent used for key headline word emphasis, primary CTA buttons, and interactive submit triggers.
- #181A1B — Primary Ink: Dominant text color for primary headings, logo wordmark, and prominent interface labels.
- #5A5E64 — Archival Slate: Secondary description copy, metadata lines, and subdued navigational links.
- #D8D3CC — Parchment Border: Delicate borders on secondary buttons, pill chips, and framing grid intersections.
- #2B8246 — Active Emerald: Status indicator dot denoting live real-time ingestion across index networks.
TYPOGRAPHY
Typeface Newsreader (or GT Super,Playfair Display,Source Serif 4), weights 400/500/600. Sizes 12px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 36px heading, 72px display. Tracking -0.03em display, -0.01em heading. The voice is that of a prestige cultural archive augmented by advanced computation. Newsreader brings dignity, academic authority, and timelessness, while Inter delivers clinical clarity for system interaction and metadata. Teams without commercial access should pair Source Serif 4 with General Sans.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled strictly through flat plane separation and a single focal floating card. The background remains completely flat, while the dark interactive search card casts a diffused, low-opacity shadow (0 20px 40px rgba(0,0,0,0.15)) to float distinctly over the generative halftone wave.
IMAGERY
The visual anchor is a high-resolution monochromatic point cloud halftone that mimics astronomical charts or volumetric 3D scan data. It dissolves softly into the ivory canvas via dispersed stippling, accented at the extreme fringes with fine cyan and coral dot matrices. Photographic imagery is avoided in favor of scientific registration marks and coordinate crosshairs.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an authoritative editorial serif headline containing one highlighted terracotta word against a floating dark-mode generative search card embedded in halftone archival stipple.
MUST
- Retain the high contrast between warm ivory canvas (#FAF8F5) and deep charcoal interface elements.
- Isolate terracotta (#9C382E) strictly to high-leverage words and conversion buttons.
- Pair classical serif display typography with neutral geometric sans metadata.
- Use dithered point-cloud textures and registration crosses to communicate algorithmic precision.
AVOID
- Do not swap the warm paper background for sterile pure white (#FFFFFF).
- Do not apply drop shadows to light-surface elements; keep elevation flat except for floating demo cards.
- Do not color entire sentences in terracotta; restrict it to one critical anchor word.
- Do not use saturated blues or greens except for discrete status dots and subtle stipple gradient fringes.
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 中尝试 
