Design a dark-mode website section: deep obsidian dark space illuminated by bioluminescent lime and cyan fiber lines linking clinical glass automation cards.
LAYOUT
The section employs an asymmetrical hero split within a 1280px container: text content, CTA cluster, and trust badges anchor the left 45%, while a dynamic interactive workflow diagram commands the right 55%. Beneath the hero sits a full-width 4-column metric band highlighting enterprise proof points. The flow culminates in a smooth inverted dark tray curved at the bottom introducing the next narrative tier.
PALETTE (use these exact hex values)
- #060809 — Obsidian Deep: Foundational canvas background behind all glows and layout panels.
- #0C1417 — Translucent Panel: Base fill for frosted glass cards with 80% opacity and subtle white border strokes.
- #B4F558 — Electric Lime: Primary hero CTA background, display title accent span, and positive execution dots.
- #00D2B4 — Cyan Plasma: Bioluminescent backdrop stream, conduit connector traces, and secondary stat accents.
- #FFFFFF — Pure White: Primary headline text, top brand logo, and key stat metric digits.
- #8E9CA8 — Slate Dim: Body copy, navigation links, metadata descriptions, and inactive icons.
- #223136 — Glass Border: Subtle 1px perimeter outlines defining cards and pill badges against atmospheric glows.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, Archivo), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 36px heading, 60px display. Tracking -0.025em at display, -0.01em at body, 0.04em at caps. The typographic tone is authoritative, modern, and clinical. Using a clean grotesque sans-serif like Plus Jakarta Sans or Inter balances developer ergonomics with enterprise healthcare credibility. Tight tracking on large display words emphasizes precision and velocity, while structured tabular-ready numbers ensure operational metrics look rigorous and unquestionable.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through luminous optical backlighting rather than drop shadows. Translucent dark panels hover above sweeping radiant cyan and emerald plasma streams, separated by delicate 1px light-catching border highlights. Foreground elements appear as illuminated glass planes resting above a dark fiber-optic engine.
IMAGERY
Avoid photography entirely in favor of schematic, synthetic system art. The visual centerpiece is a glowing cyber-physical schematic featuring curved energy conduits, frosted workflow modules, and clean vector status glyphs. Any addition of human portraits or photographic hardware would instantly break the high-tech, headless automation metaphor.
SIGNATURE DETAIL — the thing that makes this design itself
The multi-strand glowing aurora conduit connecting the master workflow glass card to the task queue. This conveys high-speed, headless data processing through organic neon light lines. If replaced by static grey lines or standard arrows, the UI would collapse into a conventional, lifeless dashboard.
MUST
- Reserve #B4F558 Electric Lime exclusively for primary CTAs, active status dots, and intentional focal headlines.
- Encase cards in subtle 1px borders using rgba(255, 255, 255, 0.12) to cleanly separate glass from dark glows.
- Pair heavy bold stats (36px) with understated, two-line muted descriptions (12px) for instant scannability.
- Maintain high contrast by keeping canvas backgrounds near #060809 void black.
AVOID
- Never apply the Electric Lime fill to multiple competing buttons in the same viewport.
- Do not use opaque grey backgrounds on cards; panels must remain translucent to let aurora light filter through.
- Avoid warm colors like reds, oranges, or yellows that contradict the cool cybernetic medical palette.
- Do not drop harsh black drop-shadows; generate depth exclusively through backlight gradients and border highlights.
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 中尝试