Design a dark-mode website section: luminescent orbital particles floating in deep cosmic slate, anchoring clinical intelligence with organic generative warmth.
LAYOUT
The hero uses an asymmetric 50/50 two-column composition inside a 1280px container. The left column stacks metadata eyebrow, two-tone display headline, editorial paragraph, CTA button cluster, and three-part compliance triad. The right column accommodates an expansive, visually weighty 3D particle vortex anchored around the brand monogram.
PALETTE (use these exact hex values)
- #060A0F — Obsidian Deep: Deepest canvas background providing high-contrast void for particle illumination
- #0F1722 — Midnight Slate: Subtle fill for outlined interactive components and icon badge backgrounds
- #48B685 — Bioluminescent Mint: Primary brand accent used on primary buttons, logo mark, highlighted display text, and key nodes
- #DE723D — Atmospheric Amber: Secondary orbital node indicator for measurement metrics and analytical states
- #4D8FE4 — Signal Azure: Secondary orbital node indicator for education and patient support endpoints
- #FFFFFF — Pure Chalk: Primary headline text, active button labels, and high-contrast navigational links
- #8E9CA8 — Subtle Sterling: Body copy, supporting metadata, inactive navigation items, and trust badges
- #1D2C3A — Deep Starlight Border: Borders for secondary buttons, trust pillar dividers, and orbital node rings
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 32px heading, 54px display. Tracking -0.025em for display, 0.08em for uppercase captions. Plus Jakarta Sans delivers an immaculate balance of clinical authority and high-tech elegance. The tight -0.025em tracking at large scale keeps the punchy 54px headline cohesive and human, avoiding the sterile coldness of engineering monospaces while retaining regulatory rigor.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminous optical layering rather than physical drop shadows. A dense 3D particle cloud and glowing orbital rings create an expansive deep field behind sharp, crisp vector typography that sits unaffected on the top visual plane.
IMAGERY
Visual assets consist exclusively of generative point-cloud stippling and mathematical orbital vectors resembling astronomical ellipses or electron paths. Avoid photographic healthcare tropes like stethoscopes or smiling doctors; visual identity relies entirely on computational biomimicry.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-axis orbital vector rings embedded with labeled lifecycle chips (Measure, Reach, Educate, Support, Activate) revolving around a central particle-sculpted brand emblem. It visually translates clinical healthcare complexity into unified, harmonious algorithmic rotation; misuse occurs when rings are over-brightened or flattened into non-perspective 2D circles.
MUST
- Use pure white (#FFFFFF) only for primary titles and active foreground items against the dark void.
- Highlight precisely 2-3 emotionally resonant words in headlines using the brand jade green (#48B685).
- Keep orbital paths delicate: stroke weight should remain at 1px with subtle radial gradient falloffs.
- Pair colored accent nodes with low-opacity glow rings to preserve biological luminescence.
AVOID
- Do not apply drop shadows or bevels to buttons; maintain planar, modern flatness over glowing backgrounds.
- Never use pure black (#000000); always tint dark backgrounds with deep navy or cyan undertones (#060A0F).
- Avoid filling the orbital node badges with opaque colors; keep them translucent and ring-focused.
- Do not allow particle density to obscure the legibility of navigation or headline text.
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 中尝试