Design a light-mode web interface screen: clinical laboratory precision framed by buoyant cobalt accents, crisp modular data tiles, and airy scientific instrumentation.
LAYOUT
The workspace uses a rigid two-column application frame: a fixed 240px navigation rail on the left and a responsive fluid canvas on the right. Content scrolls under a lightweight utility header, descending from a broad welcome hero banner into a 4-column KPI telemetry row. Below the telemetry, two equal-width 50/50 split modular rows organize data tables, line graphs, donut charts, and inventory lists.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global application page background behind cards and sidebar navigation
- #FFFFFF — Surface Card: Background for data cards, hero panels, charts, and input fields
- #F1F5F9 — Surface Subdued: Inactive search bars, subtle pill chips, and secondary button backgrounds
- #2563EB — Cobalt Primary: Active navigation states, primary buttons, hero emphasis, and sparkline highlights
- #EFF6FF — Cobalt Tint: Selected sidebar menu background and metric icon container wash
- #0F172A — Text Primary: Main dashboard headings, card headers, high-impact numbers, and table cell titles
- #64748B — Text Muted: Secondary labels, timestamps, metadata IDs, and navigation link text
- #10B981 — Success Emerald: Positive week-over-week trends, completed experiment badges, and active state indicators
- #EF4444 — Danger Rose: Critical inventory alerts and low stock pill badges
- #F59E0B — Warning Amber: Expiring reagents and cautionary inventory warning tags
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 28px heading-lg, 36px display. Tracking -0.02em at display, -0.01em at body, 0 at micro. The typographic character is objective, modern, and clinical, delivered via a geometric sans-serif (Plus Jakarta Sans or Inter). Tight letter tracking (-0.02em) on numbers and headlines yields an authoritative scientific feel, while open counters on 12px and 13px labels ensure zero ambiguity in protocol and dosage readings. A system fallback stack of standard grotesques seamlessly maintains legibility.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is handled with clinical restraint to mimic pristine laboratory equipment screens. Cards sit on an un-tinted 1px border (#E2E8F0) paired with an ultra-soft diffuse shadow: 0 1px 2px rgba(15, 23, 42, 0.03). Hover states gently lift components via a slightly wider shadow (0 4px 12px rgba(15, 23, 42, 0.06)), avoiding dramatic z-index layering.
IMAGERY
Vector line-and-fill technical illustrations in isometric or flat perspective depict biotech lab gear: beakers, Erlenmeyer flasks, pipettes, DNA double-helixes, and robotic automation arms. The illustration uses brand blue, lavender, and solar gold tints on crisp geometric forms. Photographic realism or generic stock photos would break the clean instrumental tone.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone scientific display header ('Advance science. Accelerate discovery.') positioned alongside an architectural laboratory vector illustration, anchored below by 4-column metric cards bearing soft bottom-bleed sparklines. To use it properly, retain the crisp cobalt text inflection and let the smooth wave bleed to the exact bottom border of the KPI card.
MUST
- Use 16px border radii consistently across all data cards and hero surfaces.
- Pair a 1px solid #E2E8F0 border with a faint drop shadow (0 1px 3px rgba(0,0,0,0.04)) on cards.
- Highlight primary numbers with 28px font-weight 700 in #0F172A for immediate scanning.
- Confine saturated colors (emerald, rose, amber) strictly to functional status indicators and sparklines.
AVOID
- Do not use dark backgrounds or high-contrast heavy shadows on dashboard cards.
- Do not fill large card backgrounds with heavy primary blue; restrict it to CTAs and accents.
- Avoid sharp 0px corners; all interactive cards and surfaces must maintain 8px to 16px curvature.
- Do not mix serif or decorative typefaces into this technical laboratory workspace.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2784:2960. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
