Design a light-mode website section: sculpted alabaster cta arched under a terracotta accent, descending abruptly into a dense obsidian context matrix.
LAYOUT
The vertical sequence begins with a generous 88px padded light section housing a centered typographic pyramid: announcement badge, headline, descriptor, action buttons, and compliance checklist. This is framed by a soft ambient dome contour spanning the full container width. Immediately below, the viewport snaps into a full-bleed 88px dark footer containing a distinct two-tier layout: a massive wordmark, matrix icon, and 4 navigation columns on top, followed by a bottom utility rail housing the newsletter form, social glyphs, and copyright row.
PALETTE (use these exact hex values)
- #FAF9F5 — Bone Canvas: dominant light background of the upper hero cta section
- #121519 — Obsidian Slate: grounding dark background for the entire footer section
- #BF4333 — Terracotta Crimson: key accent word highlight and primary demo cta button background
- #2E4364 — Slate Blue Accent: fill for the footer newsletter subscribe button
- #EAF3ED — Mint Sage Tint: subtle background fill of the upper announcement badge
- #235338 — Deep Forest Green: text and icon color inside the pill status badge
- #141517 — Charcoal Black: dominant headline and body text color in the light zone
- #8E95A1 — Footer Muted Grey: column links, copyright, and secondary metadata in the dark footer
- #E4E1D8 — Hairline Border: light structural arc divider and checklist separator ticks
- #1B1F26 — Dark Input Fill: background fill for the footer email capture field
TYPOGRAPHY
Typeface Plus Jakarta Sans (or General Sans, Inter Display, Satoshi), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 48px heading-lg, 64px display. Tracking -0.03em at display, 0.05em at uppercase subheads. The typographic tone is authoritative, corporate, and computational. Plus Jakarta Sans delivers sharp, modern geometric clarity with slightly boxy proportions that reinforce reliability and engineering precision. Tight display tracking (-0.03em) makes the headline feel cohesive and urgent, while high-tracking uppercase headers in the footer ensure legibility at micro scales. If substituting, choose modern grotesque fonts like General Sans or Satoshi over soft, humanist alternatives.
GEOMETRY & SPACING
Corner radii — cards 0px, links 4px, inputs 6px, buttons 8px. Spacing on a 8px unit, 24px gaps, 88px between sections, 1240px container, comfortable density.
DEPTH
Depth is communicated purely through stark surface color blocking and crisp hairline strokes rather than traditional shadows. The light canvas feels flush and open, while the dark footer acts as an unyielding architectural foundation. Input fields within the footer use subtle recessed surface fills (#1B1F26) to indicate interactivity without lifting above the plane.
IMAGERY
No photographic imagery is present; the interface relies on precision geometric typography and technical abstractions. The lone graphic device is a multi-colored dot cluster signifying structured context nodes, combined with a barely perceptible hairline dome wireframe. Any organic photography or skeuomorphic illustrations would violate the sterile, technical editorial tone.
SIGNATURE DETAIL — the thing that makes this design itself
The stark bi-tonal division where a soft, bone-white canvas punctuated by an earthy terracotta focal phrase plunges directly into an ink-black footer anchored by an 8-bit multi-colored dot matrix.
MUST
- Reserve the terracotta red (#BF4333) exclusively for the key value phrase and primary action button.
- Maintain the stark horizontal edge between the light CTA canvas and the dark footer without drop shadows.
- Render the subtle arched dome hairline (#E4E1D8) with an ultra-thin 1px stroke weight behind the hero copy.
- Keep footer column headers strictly uppercase with wide letter-spacing (+0.08em) and 11px font size.
AVOID
- Do not add gradients or drop shadows to the primary terracotta button; keep it flat and solid.
- Do not introduce intermediate card surfaces or elevated containers in the light CTA zone.
- Do not use terracotta red in the dark footer area except for the single node in the dot matrix.
- Do not center-align the footer columns or newsletter signup form; maintain strict left alignment.
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 中尝试 
