Design a light-mode web interface screen: clinical hardware precision engineered with airy isometric warmth and electric cobalt focal points.
LAYOUT
The page follows a structured hero enclosure: a top persistent navigation header with left logo and right text links; a split hero section placing typography and dual CTAs on the left 45% and the 3D isometric diorama on the right 55%. Anchoring the hero is a full-width 4-column service dock floating just above the bottom margin. The page concludes with a centered horizontal social-proof logo marquee.
PALETTE (use these exact hex values)
- #FFFFFF — Cleanroom White: Primary surface canvas for cards, interactive pills, and inner display panels
- #F4F7FC — Atmospheric Ice: Outer canvas backing and subtle container fill providing soft contrast against white cards
- #2B59FF — Cobalt Ignition: Primary action triggers, active navigation indicator bar, and key brand vector highlights
- #0F172A — Deep Obsidian: Display headings, hero typography, and primary metric labels requiring absolute legibility
- #64748B — Industrial Slate: Secondary copy, descriptive subtitles, metadata values, and partner client logos
- #22C55E — Active Emerald: Live status pill indicator and 'Included' service tag verification
- #E2E8F0 — Subtle Outline: Dividers, pill button outlines, and outer container structural borders
- #EEF2FF — Soft Cobalt Tint: Circular icon backgrounds within service capability blocks
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 64px display. Tracking -0.03em for display, 0 for body. The typographic tone is authoritative, scientific, and modernly refined. Plus Jakarta Sans provides generous counter-forms and clean geometry, projecting the feel of cutting-edge hardware engineering without feeling cold or sterile. For production environments, Inter or DM Sans serve as direct drop-in open-source substitutes.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 72px between sections, 1360px container, airy density.
DEPTH
Depth is rendered through atmospheric perspective and ultra-soft, diffused ambient occlusion rather than layered hard drops. The bottom service bar casts a faint, widespread drop shadow (0 12px 40px rgba(15,23,42,0.04)) onto the white floor. The 3D isometric components utilize soft directional light from the top-left, projecting delicate grey-blue cast shadows directly onto the ground surface.
IMAGERY
The visual anchor is a high-fidelity 3D isometric diorama depicting microchip diagnostics, featuring hardware components, stylized tech personnel, and lab equipment in frosted white, cobalt, and slate. Flat iconography follows a clean 1.5px stroke weight rendered in solid cobalt blue inside soft circular pills. Real-world photography or noisy textures are completely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of a giant, tight-kerning navy headline with an expansive, clinical white-and-cobalt 3D isometric workbench diorama, grounded by an elevated multi-column service dock. Removing the isometric hardware artwork or flattening the floating dock into standard cards would collapse the high-tech laboratory identity.
MUST
- Keep background surfaces strictly clean white (#FFFFFF) or light icy tint (#F4F7FC) to preserve the clinical laboratory feel.
- Use pill radius (999px) for all primary and secondary buttons, badge chips, and outer top-level search/action bars.
- Maintain strict high-contrast navy (#0F172A) on headers against white backgrounds for immaculate technical legibility.
- Restrict bright saturated cobalt (#2B59FF) exclusively to active states, icons, and primary interactive buttons.
AVOID
- Do not introduce warm tones (yellow, orange, red) outside of tiny illustrated tool accents in the 3D art.
- Do not use sharp 0px or small 4px corners on interactive buttons; adhere strictly to pill shapes.
- Do not allow typography tracking on large display headings to drift positive; keep it tight at -0.035em.
- Never replace clean isometric technical vector art with generic flat stock lifestyle photography.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3456:2384. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
