Design a light-mode website section: sunlit editorial conviction meeting the ink-black rigor of an enterprise infrastructure control deck.
LAYOUT
The vertical composition is bifurcated into two distinct hemispheres: an expansive, airy hero on top followed by an organized, high-density five-column footer below. The hero aligns all text and dual CTAs to the left, while the right quadrant is occupied by colossal ghosted brand lettering. The footer separates identity, status, and newsletter on the left block, while dedicating four dotted columns to structured taxonomy on the right, capped by a minimal legal utility bar at the baseline.
PALETTE (use these exact hex values)
- #FAFAF9 — Canvas Hero: Warm paper background for the upper hero and conversion area
- #EFECE6 — Watermark Ghost: Giant background watermark typography behind hero content
- #11161B — Footer Midnight: Base canvas for entire multi-column footer and newsletter surface
- #181E24 — Footer Surface Elevated: Background for newsletter input, status badge, and social icon buttons
- #F85146 — Coral Core: Primary action button, newsletter submit button, and logo icon dots
- #FDEAE8 — Coral Tint: Background fill for the hero category pill badge
- #22C55E — Operational Green: Status indicator dot in the live uptime widget
- #12171A — Text Primary Hero: Hero headline, primary inline links, and high-emphasis body text
- #575D65 — Text Muted Hero: Hero body paragraph description and secondary sublines
- #E2E8F0 — Footer Column Header: Uppercase tracking titles for footer link columns
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700/800. Sizes 12px caption, 13px body-sm, 14px body, 18px body-lg, 24px subheading, 64px display. Tracking -0.03em on display, 0.05em on caps labels. Plus Jakarta Sans conveys a direct, utilitarian, and high-velocity engineering posture. Its bold cuts feature wide optical counters and crisp vertices, lending modern enterprise credibility to the core value proposition. Fallbacks like Inter or General Sans provide seamless continuity without sacrificing the architectural clarity of the letterforms.
GEOMETRY & SPACING
Corner radii — cards 12px, links 2px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered entirely through sharp contrast shifts rather than drop shadows. The boundary between the paper-white `#FAFAF9` hero and `#11161B` midnight footer is razor-sharp with no blending or gradient overlay. Form inputs and status indicators inside the footer sit slightly proud of the canvas via faint 1px borders at `#232B34` over a subtly lighter `#181E24` background.
IMAGERY
No photographic imagery or simulated 3D assets are utilized. Visual interest is driven solely by monumental typographic scale, precise geometry, and the subtle dot-matrix brand mark. Any illustrative asset introduced must follow technical schematic rendering or clean monochrome wireframes.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden, unmediated cliff drop from a serene, paper-white hero canvas directly into an ink-black operational footer divided by delicate dotted vertical rules. Misusing this pattern by adding divider shadows, gradient transitions, or rounding the footer boundary destroys the crisp architectural tension between marketing canvas and technical engine.
MUST
- Reserve `#F85146` strictly for the primary action button, submit arrows, and brand logo dots.
- Use 1px dotted vertical dividers `#26303C` strictly between multi-item footer navigation columns.
- Set hero display headlines in tight negative tracking (-0.03em) with line-height at 1.1.
- Keep newsletter inputs dark and recessed with 8px rounded corners inside the footer.
AVOID
- Never introduce colorful gradients; all surfaces and fills must remain flat and deliberate.
- Do not round primary buttons into full pills; maintain the strict 10px rounded rectangle radius.
- Avoid using light gray borders on the hero; keep the top canvas borderless and open.
- Never replace the dotted footer column dividers with continuous solid lines.
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 中尝试 
