Design a dark-mode website section: translucent architectural telemetry floating over cinematic twilight terrain with neon cyan intelligence cues.
LAYOUT
The hero uses an asymmetric two-column composition spanning 1360px. The left column hosts brand signaling: pill eyebrow, 56px display headline, subcopy, CTA pair, and a horizontal 4-metric summary bar. The right column showcases an angled CAD interface surrounded by floating orbit cards depicting confidence meters, code compliance lists, and cost distribution donuts.
PALETTE (use these exact hex values)
- #070e17 — Obsidian Twilight: Deep photographic backdrop baseline and page boundary tinting
- #0e1b29 — Glass Surface Base: Base fill for floating translucent data panels with 75-85% alpha
- #3ee4d4 — Electric Cyan: Primary brand accent, prominent CTA pill button, gauge rings, and highlighted AI text
- #1d4e5b — Cyan Border Glow: Subtle edge reflection on glass cards and structural dividers
- #ffffff — Pure White: Headlines, high-value metrics, and key CAD label values
- #8ea3b8 — Muted Slate: Descriptive copy, subheadings, unit measurements, and table labels
- #34d399 — Telemetry Emerald: Success ticks, trend lines, and verified compliance markers
- #f59e0b — Donut Amber: Secondary breakdown segment in financial chart rings
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 24px heading, 32px heading-lg, 56px display. Tracking -0.03em at display, 0.01em at tabular captions. The type choice is technical, hyper-precise, and modern neo-grotesque, projecting speed and structural safety. It treats financial values and AI status codes with equal clarity using monospace-aligned tabular numerals and condensed tracking on massive headline scales.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through realistic aero-glass layering rather than murky shadows. Floating widgets use backdrop-filter blur combined with directional 1px borders (highlighting the top and left edges with cyan-tinted light) over a deep atmospheric twilight landscape.
IMAGERY
The visual base is a high-contrast nocturnal landscape with illuminated cybernetic highway traces carving through mountain topography. Floor plans and CAD schematics inside the interface must look like genuine vector engineering blueprints rendered in thin emerald and cyan lines.
SIGNATURE DETAIL — the thing that makes this design itself
The subtle angled 3D floating glass blueprint frame paired with glowing cyan vector trails that connect processing pipeline cards to live telemetry rings.
MUST
- Use backdrop-filter: blur(16px) on all floating panels to keep landscape elements soft.
- Accent key technical metrics and primary buttons exclusively with electric cyan #3ee4d4.
- Keep card border strokes strictly at 1px with semi-transparent cyan or white values.
- Pair large display headings with concise, high-contrast white text and tight tracking.
AVOID
- Do not use opaque grey or white backgrounds for interface cards.
- Never use heavy drop shadows; depth must come from frosted blur and cyan edge lighting.
- Do not introduce warm red, orange, or purple hues into the primary UI components.
- Never omit the 1px luminous edge border on floating glass elements.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试