Design a light-mode website section: sterile cleanroom clinical white meets energetic electric blue systems architecture for high-stakes scientific coordination.
LAYOUT
The section employs an asymmetric two-column split within a 1240px maximum grid. The left column (roughly 45% width) holds a vertical stack: audience badge, display title, descriptive copy, dual CTA buttons, and proof metric. The right column (roughly 55%) houses an organic orbital node layout centered around a core command card connected by curved dashed trajectories. A floating announcement banner centers along the bottom axis.
PALETTE (use these exact hex values)
- #FAFBFC — Lab Pure Canvas: Global background surface creating a clinical, spacious light room aesthetic
- #FFFFFF — Floating Card Surface: Background for satellite nodes, stat cards, and navigation header bar
- #0F172A — Carbon Ink: High-contrast headings, primary logo, and lead paragraph text
- #5A6578 — Clinical Slate: Secondary copy, supporting descriptions, and navigation menu links
- #0E62E4 — Electric Royal: Primary CTAs, accent headline span, node connection dots, and active rings
- #0B4EB8 — Command Core Deep: Background for the central Program Command Center hub node
- #059669 — Bio Mint: Discovery node icon, metric trend indicators, and on-track status pills
- #D97706 — Commercial Amber: Commercial Strategy node header, icon tints, and analytical chart strokes
- #E2E8F0 — Micro Border: Dividers, secondary button borders, and faint node outline rings
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, General Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 17px body-lg, 18px subheading, 24px heading, 52px display. Tracking -0.03em display, -0.01em body. The typographic tone is authoritative, hyper-lucid, and modern, echoing the rigorous confidence required in life sciences software. It avoids both playful quirky display cuts and dated corporate serif styles in favor of a precision-engineered neo-grotesque sans. Inter or Plus Jakarta Sans serve as exact structural matches with tight tracking on headings and clear neutral spacing for body copy.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered with extreme softness and restraint. Satellite cards cast an ambient, highly diffused light grey shadow (box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05)) over the cool white base. The central command node creates depth through internal color luminance and subtle concentric radar rings rather than aggressive exterior drop shadows.
IMAGERY
Imagery pairs clean scientific visualization with crisp UI diagrams. Authentic 3D molecular protein surface models appear alongside tidy vector charts and stacked document metaphors. Faux lifestyle imagery, abstract fluid blobs, or non-technical decorative graphics are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the orbital 'Platform Command Center' constellation: a dark cobalt focal square radiating delicate curved dashed traces to domain-specific satellite cards containing tangible scientific artifacts. To replicate it accurately, preserve the central hub's concentric radar rings, subtle junction nodules, and distinct thematic accents for each periphery card. Misuse occurs when nodes are packed too tightly, line paths cross chaotically, or node cards lack individual visual identifiers.
MUST
- Keep the primary headline two-toned: dark ink for the premise, royal blue for the promise.
- Use delicate dashed lines (#CBD5E1) with small circular junction hubs to link cards together.
- Ensure domain node cards each feature a dedicated thematic accent color (mint, amber, indigo, cobalt).
- Maintain high white space margins (96px+) around major visual elements to sustain clinical breathing room.
AVOID
- Do not use dark backgrounds for the canvas; this aesthetic relies on clinical, sterile lightness.
- Avoid heavy drop shadows; use diffused, low-opacity shadows (blur 24px, opacity under 6%).
- Do not make buttons pill-shaped; reserve 999px radii exclusively for badges, tags, and announcement bars.
- Avoid generic stock imagery; representations must look scientifically authentic and technically accurate.
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 中尝试