Design a dark-mode website section: precision enterprise telemetry framed in deep oceanic obsidian and vibrant electric cyan glow.
LAYOUT
Two stacked macro bands: an upper split-screen CTA block (left text and actions, right floating dashboard preview) separated by substantial vertical spacing from a lower structured five-column footer with social links, sitemap links, and newsletter capture, capped by a bottom legal strip.
PALETTE (use these exact hex values)
- #050910 — Deep Obsidian Canvas: Primary background tone across the entire screen layout
- #0B131E — Panel Elevation Dark: Background for dashboard preview card and interior modular data tiles
- #162334 — Subtle Surface Border: Fine division lines, outline buttons, card borders, and footer dividers
- #1FE5E0 — Electric Cyan: Primary CTA fill, active accent toggles, and logo glyph facet
- #276EF1 — Neon Cobalt Blue: Brand icon gradient facet and subtle ambient dashboard glow
- #2EE59D — Data Metric Mint: Metric trends positive values, checkmark icons, and status badges
- #FFFFFF — Pure White Text: Main headings, stat counters, and highlighted link titles
- #8497AC — Muted Slate Gray: Descriptive paragraphs, inactive column links, labels, and placeholders
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 38px heading-lg. Tracking -0.02em at display, 0 at body. Inter provides a clinical, engineering-led demeanor that signals reliability, enterprise maturity, and machinic efficiency. Headings are blunt and sentence-cased for conversational directness, while uppercase micro-copy handles taxonomy and trust marks.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminous edge illumination rather than heavy opaque shadows. Panels live on deep slate backgrounds (#0B131E) bounded by 1px translucent rims (#162334), with high-value mockups casting a diffuse 24px-40px cyan-blue atmospheric aura.
IMAGERY
Zero photographic or abstract art is present. Imagery is purely operational: a high-fidelity dark-mode administrative UI panel showcasing charts, KPIs, and agent lists. Any illustrative vector art would destroy the strict B2B telemetry look.
SIGNATURE DETAIL — the thing that makes this design itself
The soft electric cyan rim glow wrapping around a detailed enterprise command-center mockup, mirroring the vibrant primary action button directly opposite.
MUST
- Use a luminous cyan gradient (#1FE5E0) strictly on actionable focal points and primary submission buttons.
- Enclose simulated product mockups in an ethereal, soft teal-tinted outer blur to lift them off dark canvases.
- Pair positive performance statistics (+18%) with the bright mint-green (#2EE59D) token.
- Keep footer column headers strictly uppercase, 11px, bold, and tracked widely.
AVOID
- Do not use harsh 100% white borders; stick to deep oceanic navy borders (#162334).
- Never make secondary action buttons filled; they must remain transparent with subtle outlines.
- Avoid loud photography or colorful illustration; rely strictly on pristine UI screenshots and telemetry.
- Do not allow footer body links to exceed 14px size; keep them compact at 13px.
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 中尝试