Design a dark-mode website section: luminous deep-indigo gradients anchoring precision ai tooling with electric chartreuse and periwinkle energy.
LAYOUT
The layout features a classic two-column asymmetrical hero atop a multi-column modular footer. The hero left column hosts value proposition, CTA pair, and reassuring trust tokens, while the right side anchors an expansive live dashboard preview. A crisp 1px rule transitions into the 6-column footer grid, consisting of brand identity, four navigation tiers, and an actionable newsletter capture block.
PALETTE (use these exact hex values)
- #04060e — Obsidian Base: Deepest background layer across footer and base canvas
- linear-gradient(135deg, #1e285d 0%, #3046bc 40%, #080c1e 100%) — Atmosphere Gradient: Luminous gradient bloom illuminating the hero background behind the dashboard
- #0b1021 — Console Surface: Background tone for dashboard UI frame and modal surfaces
- #d4f866 — Electric Chartreuse: High-visibility primary action button fill and key positive data points
- #6375f7 — Periwinkle Glow: Newsletter submission button and active application state indicators
- #ffffff — White Primary: H1 display headers, primary card titles, and high-emphasis labels
- #8b9bb4 — Muted Slate: Body copy, footer navigation links, and descriptive sub-labels
- #1a233d — Subtle Border: 1px structural divider lines, footer separation rule, and card bounds
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.03em at display, 0.08em at micro-caps. The typographic tone is engineering-led, calm, and hyper-modern, heavily influenced by Swiss geometric grotesques like Inter or Plus Jakarta Sans. Large display headings feature tightened tracking (-0.03em) to convey institutional authority, while navigation headers adopt tracked uppercase micro-type for data density. Free Google Fonts like Inter or Geist provide an exact drop-in match without licensing friction.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminous color temperature and subtle surface boundary highlights rather than physical shadows. The atmospheric blue gradient lifts the hero space forward, while the app mock and footer sit on progressively darker obsidian planes. Card boundaries rely on 1px translucent strokes (#1f2c52 or rgba(255, 255, 255, 0.08)) to cleanly separate overlapping surfaces.
IMAGERY
The imagery language centers entirely around crisp, vector-rendered product UI mocks and abstract atmospheric light blooms. No photographic human lifestyle imagery or realistic textures are permitted. Visual elements must strictly represent precision digital interfaces, analytics sparklines, and structured metadata tables.
SIGNATURE DETAIL — the thing that makes this design itself
The defining visual hallmark is the single electric chartreuse CTA button (#d4f866) glowing like a flare against a nocturnal, atmospheric blue gradient backdrop. Misusing this element by converting other buttons to lime or scattering the color indiscriminately destroys its focal conversion gravity and ruins the calm, premium developer aesthetic.
MUST
- Use electric chartreuse #d4f866 strictly on the single most critical call-to-action button.
- Enclose secondary actions in translucent borders without solid color fills to preserve hero hierarchy.
- Render uppercase category labels in 11px with 0.08em tracking to balance visual weight.
- Isolate the footer from the hero using a continuous, single-pixel #1a233d divider rule.
AVOID
- Never introduce saturated warm colors like red, orange, or gold outside of destructive states.
- Do not drop heavy black drop-shadows on cards; use 1px border highlights against dark backgrounds instead.
- Never center-align the footer columns or newsletter module; keep all columns strictly top-left aligned.
- Do not use high-opacity solid backgrounds for pills and badges; stick to frosted 8% opacity fills.
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 中尝试 
