Design a dark-mode website section: deep obsidian fintech terminal glowing with precision radial indigo light and wireframe telemetry.
LAYOUT
The layout is strictly stacked and centered in the upper conversion tier, transitioning to an asymmetric multi-column grid in the footer. The upper tier opens with a centered status eyebrow, dramatic two-line display headline, explanatory paragraph, dual action buttons, and a horizontal feature separator bar. The footer anchors with a dominant technical wordmark and newsletter capture on the left, balanced by a four-column link matrix on the right, ending with a horizontal bottom metadata bar.
PALETTE (use these exact hex values)
- #06080e — Obsidian Deep: Deepest canvas background framing the bottom footer and outer edges
- #0c1326 — Midnight Glow: Subtle radial ambient background illumination behind CTA content
- #1a2133 — Border Hairline: Used for pills, inputs, dividers, and status indicator outlines
- #5872ea — Electric Indigo: Primary CTA button background, focal text accent, and operational accents
- #768df8 — Periwinkle Bright: Hover states, headline text gradient highlights, and telemetry active badges
- #3ddc84 — Signal Green: Live system status dot and operational telemetry indicators
- #ffffff — Pure White: High-emphasis display headlines, primary buttons, and key titles
- #8b95a5 — Slate Steel: Subheadings, feature value propositions, column header titles, and footer links
- #4e5768 — Muted Carbon: Copyright text, legal links, dividers, and micro-captions
TYPOGRAPHY
Typeface Inter (or Geist Sans,SF Pro Display,Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px subheading, 13px body-sm, 15px body, 18px body-lg, 28px heading, 40px heading-lg, 60px display. Tracking -0.03em at display, 0.05em at micro. The typographic tone is ultra-modern, clinical, and institutional. A neutral grotesque (Inter or Geist) delivers clarity and authority at scale, while monospaced tracking introduces algorithmic discipline. Free open-source alternatives like Inter and Geist Sans fit the aesthetic seamlessly.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely through atmospheric backlighting and luminance rather than layered card drop-shadows. A low-opacity radial gradient in indigo radiates behind the primary CTA, while inputs and pills sit flush with 1px hairline strokes (#1a2133). Elements feel etched directly into an advanced dark flight deck.
IMAGERY
Imagery is entirely non-photographic and devoid of 3D renders. Visual language relies on precise 16px line-art iconography (compass, lightning bolt, shield, sparkles) and high-density typography to establish fintech and engineering credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone headline paired with a diffuse midnight-indigo radial halo centered behind the CTA block. The contrast between stark white 'Let AI run your edge.' and luminous periwinkle 'End-to-end.' anchors the visual identity. Common misuse is over-brightening the halo into a distracting spotlight or using a generic gradient text effect across the entire headline.
MUST
- Use a diffuse indigo radial blur behind primary titles on pure obsidian background.
- Pair monospace uppercase labels with glowing status dots for all technical telemetry badges.
- Keep hairline borders strictly at 1px with dark blue-gray values (#1a2133).
- Highlight the final punchy sentence of display headlines in saturated electric periwinkle (#5872ea).
AVOID
- Never use pure white (#ffffff) borders; borders must stay deeply muted.
- Do not drop opaque drop-shadows under buttons or inputs; rely strictly on hairline strokes.
- Avoid multi-colored icon badges; all feature icons should remain thin-line slate (#8b95a5).
- Do not use high-radius pill buttons for primary CTAs; maintain a structured 8px radius.
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 中尝试