Design a dark-mode website section: abyssal night giving way to archival paper, punctuated by terracotta ink and literary typography.
LAYOUT
The page transitions vertically from atmospheric drama to utilitarian precision. It begins with a centered, high-impact CTA block featuring pill badge, serif display headline, supporting paragraph, and dual button cluster. Directly below sits a three-part horizontal trust strip separated by hairline borders. The layout then cuts abruptly into a 6-column editorial footer on cream parchment: one brand identity column, four navigation list columns, and one dedicated newsletter capture column, capped by a single-line horizontal copyright bar.
PALETTE (use these exact hex values)
- #090b10 — Abyssal Void: Primary background for the CTA section, framing glowing volumetric lines
- #f7f4ee — Archival Parchment: Solid base background for the multi-column footer and legal bar
- #c94b43 — Terracotta Flame: Primary CTA fill, headline italic emphasis, and newsletter submit button
- #2e7b99 — Luminescent Cyan: Diffuse background vector arcs and trust indicator icons in dark section
- #ffffff — Pure White: Primary display headline text on dark backgrounds and button label
- #9fa6b2 — Subdued Starlight: Secondary descriptive paragraph text on dark CTA canvas
- #121212 — Ebony Ink: Wordmark, section headers, and primary links in the light footer
- #636059 — Parchment Shadow: Footer sublinks, input placeholder text, and legal copyright copy
- #e3ded5 — Parchment Border: Subtle 1px divider lines, newsletter input outline, and social icon rings
TYPOGRAPHY
Typeface Editorial New (or Newsreader, Canela, Playfair Display), weights 400/500. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 18px heading, 64px display. Tracking -0.02em. The voice is authoritative, intellectual, and clinical yet deeply human. PPEditorialNew (or Canela) lends an archival, high-stakes medical/insurance journal gravitas, especially through its expressive italic forms. Inter provides an engineered, SOC-2 compliant technical counterpart that grounds the literary drama in software utility.
GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created entirely through optical luminescent atmospheric glow rather than standard CSS box-shadows. The upper dark canvas features low-opacity, vector-thin cyan and teal light streaks that simulate illuminated fiber optics in deep space. In the footer, elevation drops away completely in favor of a flat, print-inspired ledger appearance governed by subtle hairline 1px dividers.
IMAGERY
Abstract, luminous vector arcs rendered in cyan and cerulean sweep horizontally across the dark upper canvas, evoking high-speed data flow and neural precision. Icons are strictly geometric, monoline wireframes enclosed in circular badges. Avoid photorealistic imagery, busy 3D renders, or playful rounded lifestyle illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The dramatic, hard-edged binary shift from an abyssal, glowing AI dark canvas into a flat, warm archival paper footer tied together by terracotta accents. Without this intentional light-after-dark rupture, the layout loses its unique tension between bleeding-edge machine intelligence and dependable institutional permanence.
MUST
- Reserve the terracotta red (#c94b43) strictly for the italicized punchline and primary action buttons.
- Split the dark CTA and light footer cleanly with zero gradient blending between the two sections.
- Maintain the editorial serif specifically for large narrative scale (36px+) and the brand logo mark.
- Use uppercase 11px sans-serif with wide 0.12em tracking exclusively for category labels and column headers.
AVOID
- Never use the terracotta accent as a background tint for large content containers or card panels.
- Do not set footer navigation links in serif type; keep all dense directory content in Inter.
- Avoid drop shadows on buttons or cards; all depth is drawn from value contrast and line weight.
- Do not use pure black (#000000) or pure white (#ffffff) within the light parchment footer.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
