Design a light-mode website section: clinical data observability meets editorial clarity through warm paper whites, crisp borders, and electric cobalt metrics.
LAYOUT
The layout follows an asymmetrical 12-column grid divided into two distinct vertical tiers. The upper tier pairs a wider hero conversion module on the left (approx. 7 columns) with stacked operational intelligence and metric cards on the right (approx. 5 columns). Below a full-width dividing seam, the lower tier transitions into an expansive multi-column navigation footer with brand anchors on the left, four categorized link columns in the center, and a boxed newsletter capture module on the right.
PALETTE (use these exact hex values)
- #FAFAFA — Canvas Background: Outer application canvas providing warm off-white contrast behind card surfaces
- #FFFFFF — Surface White: Primary card, modal, and modular section background
- #ECEEF1 — Card Border: Subtle, hair-thin structure lines bounding containers and dividing sections
- #111318 — Primary Ink: Display headings, primary buttons, and strong visual anchors
- #64748B — Muted Slate: Supporting descriptions, metadata labels, and footer link text
- #DC2626 — Brand Crimson: Logo icon accents, primary wordmark highlights, and Eyebrow alerts
- #10B981 — Operational Emerald: System status indicators, operational pills, and feature reassurance icons
- #2563EB — Data Cobalt: KPI stat values, telemetry sparklines, and live tracker titles
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 28px heading, 38px display. Tracking -0.03em at display, 0.01em at body, 0.06em at uppercase labels. The typographic tone is authoritative, analytical, and uncluttered, driven by a highly legible modern sans-serif like Inter or Geist. Headings speak plainly with tight negative letterspacing (-0.03em), communicating rapid technological capability without corporate bloat. Tabular numerical rendering ensures operational metrics and latency readouts align with scientific accuracy.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered purely through optical layering and perimeter delineation rather than volumetric drop shadows. White card surfaces float over a #FAFAFA backdrop defined by crisp 1px neutral borders (#ECEEF1). Internal separation within cards relies on hairline dividers and muted input fills rather than multi-layered elevation planes.
IMAGERY
This interface entirely rejects photographic assets and decorative marketing illustrations in favor of functional telemetry and structural iconography. Visual richness is derived from precision line charts, SVG status indicators, and clean monoline symbols (connectors, query cogs, locks). Any future imagery must consist of exact interface snapshots, vector hardware schematics, or unadorned data visualizations.
SIGNATURE DETAIL — the thing that makes this design itself
The split-panel arrangement juxtaposing an actionable conversion pitch with a live infrastructure telemetry card (complete with node status pips and an active P95 sparkline). This move instantly validates enterprise reliability before the user signs up. Misusing it means turning the telemetry into static, non-functional decorative art rather than realistic operational feedback.
MUST
- Keep card surfaces pure white (#FFFFFF) against a faint warm canvas (#FAFAFA) with razor 1px borders.
- Use uppercase tracking (0.05em to 0.08em) strictly on small 11px category kickers and eyebrow labels.
- Reserve vibrant cobalt blue (#2563EB) exclusively for data metrics, charts, and section identifiers.
- Maintain consistent 16px outer radius across all major dashboard panels and CTAs.
AVOID
- Do not introduce heavy drop shadows; rely on 1px borders (#ECEEF1) for structural containment.
- Never use generic illustrations or decorative 3D assets in place of live data telemetry.
- Avoid colored backgrounds for main cards; keep the substrate neutral and clean.
- Do not set body text or long descriptions in uppercase or tracked styles.
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 中尝试 
