Design a light-mode website section: bipolar contrast where a radiant cryptographic dark card floats anchored over an airy, institutional white footer.
LAYOUT
The composition flows vertically: a central floating rounded card housing a centered headline stack, two action buttons, and a bottom horizontal proof bar. Below the card lies a standard multi-column utility layout with brand details on the far left, four link categories in the middle, and a newsletter capture on the far right, terminating in a single-line compliance footer.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Outer page background and base footer canvas behind all lower utility elements.
- #021c17 — Obsidian Teal: Base dark background color within the rounded CTA container.
- radial-gradient(ellipse at top, #08433a 0%, #021c17 75%) — Deep Forest Gradient: Volumetric ambient lighting applied internally across the primary CTA container.
- #10b981 — Mint Accent: High-visibility focal points including primary button fill, inline text emphasis, and live indicator dots.
- #047857 — Deep Pine Press: Hover and active states for primary emerald controls and arrow button submit.
- #0f172a — Ink Charcoal: Primary headings, brand wordmark, and prominent labels on the white surface.
- #64748b — Slate Muted: Footer navigation links, body descriptions, and auxiliary copyright metadata.
- #1e4d44 — Translucent Border: Outlines and dividing rules within the dark container.
- #e2e8f0 — Border Subtle: Dividers, newsletter input strokes, and circular icon button outlines on white surface.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 42px display. Tracking -0.02em at display, 0.05em on micro labels. Technical, confident, and institutional. The geometric sans-serif communicates enterprise financial security through heavy headline weights and tight tracking, balanced by ultra-legible 13px monospace-adjacent microcopy for technical credentials.
GEOMETRY & SPACING
Corner radii — cards 24px, links 9999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
No dropped box-shadows are used. Hierarchy and depth are established entirely through stark surface contrast—a luminous dark container with internal ambient radial illumination resting directly against a stark, flat white plane.
IMAGERY
Abstract mathematical wireframe meshes representing interconnected cryptographic blocks are rendered faintly in emerald lines on the left and right edges of the card. Photographic elements, complex illustrations, or colorful marketing icons are strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The massive floating dark pine-teal card with 24px border-radius anchored immediately above a clinical, highly structured white six-column footer.
MUST
- Keep the hero card floated with margin on all sides rather than bleeding full-width to the viewport edge.
- Use uppercase tracking (0.08em) strictly on column titles and category kickers.
- Render the keyword 'every' in bold emerald green (#10b981) to anchor headline hierarchy.
- Keep footer column headers at 12px uppercase medium text with exactly #0f172a weight.
AVOID
- Do not extend the dark green card background down into the footer navigation zone.
- Never substitute rounded pill buttons (9999px) for the main CTA controls; stick to 8px radii.
- Avoid high-contrast saturated fills in the footer; keep all navigation links muted at #64748b.
- Do not omit the wireframe isometric geometric illustrations flanking the dark card content.
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 中尝试