Design a light-mode website section: authoritative enterprise legal precision descending from luminous proof into deep midnight bedrock.
LAYOUT
The vertical progression follows a textbook high-conversion hierarchy: centered value proposition at top, immediate conversion and secondary sales triggers, horizontal four-part quantitative proof strip, and finally an architectural monolith footer. The footer arranges identity and socials on the far left, a four-column navigation hub in the center, and a newsletter subscription block anchored on the right.
PALETTE (use these exact hex values)
- #071322 — Abyss Navy: Background fill for the primary docked footer container and newsletter module.
- #1463eb — Electric Royal: Primary action button fill, input submit button, and brand logo mark core.
- #f5f8ff — Periwinkle Mist: Background ambient tint for the upper CTA conversion canvas.
- #0d1727 — Ink Navy: High-contrast headline copy and stat figures in the light CTA zone.
- #5e6d82 — Slate Steel: Subtitles, secondary body copy, and metrics descriptors in light canvas.
- #94a3b8 — Footer Muted: Navigation link labels, subheadings, and legal disclaimer copy inside the footer.
- #0d1f35 — Dark Trench: Background fill for newsletter input container and social media button circles.
- #ffffff — Pure White: Footer column titles, primary button text, and icon container fills.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 38px display. Tracking -0.02em at headlines, 0 at body. The typographic tone is crisp, analytical, and uncompromisingly professional, using an engineered grotesque sans-serif like Plus Jakarta Sans or Inter. Tight letter spacing (-0.02em) on the display headline conveys precision and modern technical mastery, while open neutral tracking on 12-14px micro-copy ensures legal disclaimers remain legible.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated strictly through surface polarity and tonal shifts rather than heavy drop shadows. The top canvas feels open and levitating via soft radial white-to-light-blue gradients, while the footer achieves immovable physical grounding through an impenetrable dark navy (#071322) cut-out with curved shoulders.
IMAGERY
This interface avoids raster photos or figurative legal cliches like gavels and scales. Instead, it employs minimalist line iconography enclosed in soft pastel squircle badges (mint, sky, rose, ice) and a geometric isometric origami logo mark. Any decorative imagery added must remain abstract, vector, or subtle dot-matrix patterns.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the 'Bedrock Dock'—a deep midnight navy container with dramatically softened top shoulders (28px radius) meeting a luminous pale CTA field without an intervening rule or shadow. This visual anchor establishes instant regulatory finality and enterprise permanence directly below lightweight, fast-moving AI promises.
MUST
- Apply the rounded border radius (28px) exclusively to the top corners of the dark footer container.
- Maintain high contrast between the luminous top CTA canvas (#f5f8ff) and the deep footer bedrock (#071322).
- Pair bold numeric statistics (20px) directly beside soft-tinted square icon badges with 10px radii.
- Use electric royal blue (#1463eb) solely for interactive catalysts and the corporate brand glyph.
AVOID
- Do not round the bottom corners of the dark footer block.
- Never use generic high-saturation icons in the metric row; use soft pastel background tiles.
- Do not set footer link text in pure white; reserve white only for section headings.
- Avoid dividing the top CTA section with harsh horizontal border lines; rely purely on whitespace.
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 中尝试