Design a light-mode website section: clinical engineering intelligence structured through calm pastel bento surfaces and precision telemetric data.
LAYOUT
The page uses an asymmetrical bento grid anchored by a prominent central column. The left column presents the high-level value proposition alongside a vertical list of three core capabilities. The center column anchors the layout with an expanded spotlight case study featuring stat metrics and a wide thermal simulation viewport. The right column and lower row display supporting operational, compliance, and industrial modules.
PALETTE (use these exact hex values)
- #F4F6FA — Canvas Ice: Outer structural page background setting a clean clinical context.
- #FFFFFF — Surface Pure White: Card backgrounds, modal containers, and metric stat blocks.
- #E5E9F0 — Border Subtle: Single-pixel boundaries on all bento cards and inner content dividers.
- #0F172A — Text Primary: Main headlines, active stat numbers, and high-priority labels.
- #64748B — Text Muted: Secondary descriptions, metadata stamps, and graph axis text.
- #6366F1 — Violet Intelligence: Primary category overlines, spotlight highlights, and core simulation icon tint.
- #0284C7 — Engineering Cyan: Design and engineering tags, facility wireframe headers, and flow badges.
- #EF4444 — Alert Coral: Critical threshold warnings, telemetry risk points, and operational telemetry.
- #10B981 — Eco Emerald: Sustainability overlines, carbon reduction badges, and efficiency metrics.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 32px display. Tracking -0.02em at headings, +0.08em at overlines. The typography is disciplined, analytical, and authoritative. Inter or a similar precision grotesque provides neutral clarity, preventing marketing flamboyance from obscuring critical engineering metrics. Tight negative tracking on large titles creates density, while uppercase tracking on overlines establishes immediate visual anchors.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 18px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through structural layer contrasts rather than pronounced drop shadows. Cards rely on a crisp 1px solid border (#E5E9F0) over a cool gray ground (#F4F6FA), augmented by a barely perceptible ambient shadow (0 1px 3px rgba(15, 23, 42, 0.04)). This keeps the focus razor-sharp on the technical simulation data.
IMAGERY
Imagery consists strictly of high-fidelity engineering simulations: CFD airflow streamlines, thermal heatmaps across server racks, and isometric architectural wireframes. Visuals must be technical, accurate, and render-like. Stock photography, human portraits, or generic conceptual illustrations would break the analytical authority.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature move is the pairing of clinical white bento cards with vibrant, rainbow-spectrum physics simulation viewports and color-coded engineering overlines. The juxtaposition of quiet architectural typography against high-chroma CFD heatmaps immediately communicates scientific credibility without visual clutter.
MUST
- Use 16px border-radius consistently on all top-level bento cards.
- Pair every category overline with its exact assigned hue across icons and tags.
- Display raw computational renders within clean, high-contrast white card borders.
- Set secondary text strictly in #64748B to maintain high visual contrast hierarchy.
AVOID
- Do not introduce dark-mode card surfaces into this light clinical palette.
- Do not use saturated fills for cards; keep backgrounds pristine #FFFFFF.
- Do not exceed 18px gap spacing between bento grid elements.
- Do not style overlines in lowercase or sentence case.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
