Design a light-mode website section: clinical semiconductor precision meets molecular clarity under diffuse daylight studio illumination.
LAYOUT
The header sits at the top with a clear split: left branding with domain badge, centered utility links, and right-aligned auth/demo actions. The main viewport divides roughly 55/45: an authoritative left typographic stack above two CTAs, balanced by an expansive 3D crystal lattice on the right. Directly below, four equal-width pipeline cards span horizontally with connecting directional arrows, followed by a grounded 4-pillar trust bar.
PALETTE (use these exact hex values)
- #FCFBF9 — Canvas Warm White: Root page background providing soft, sterile laboratory atmosphere without harsh blue-white glare.
- #FFFFFF — Pure Panel White: Background for workflow step cards, bottom proof dock, and secondary buttons.
- #0F4336 — Deep Emerald: Hero accent word, primary CTA background, and active data visualization accents.
- #111820 — Charcoal Black: Primary display headlines, step indicator discs, logo glyphs, and primary button labels.
- #5A656F — Muted Slate Gray: Sub-headlines, card descriptions, step summaries, and navigation link items.
- #E8E6E1 — Subtle Hairline Border: Thin perimeter outlines for cards, badge chips, input containers, and button frames.
- #D97736 — Catalyst Amber: Warning spark icons, novel candidate node highlights, and speed indicator icons.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 56px display. Tracking -0.03em for display titles, 0.05em for micro caps. The type is calm, highly technical, and unapologetically scientific. By deploying Plus Jakarta Sans with disciplined weights (regular body, semibold labels, bold display), the interface reads like an academic journal upgraded for high-velocity software engineering. Inter or Geist Sans can substitute seamlessly provided tracking is kept tight at display scales.
GEOMETRY & SPACING
Corner radii — cards 14px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 72px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered through tonal shifts and hairline strokes rather than optical dropshadows. Surface cards rely on a 1px #E8E6E1 border against the #FCFBF9 canvas, creating a crisp tactile boundary like precision-cut acrylic. The 3D lattice in the right background floats freely with depth-of-field blur, imparting spatial atmosphere without muddying UI panels.
IMAGERY
The visual hero is a hyper-realistic 3D molecular lattice constructed of frosted glass, polished quartz prisms, and metallic nodes. Translucent polygons catch soft diffuse light with subtle refractions, balancing mathematical order with natural crystal physics. Cluttered stock photography, flat vector illustrations, or cartoon icons would completely break the identity.
SIGNATURE DETAIL — the thing that makes this design itself
The four-card horizontal step pipeline connected via delicate dashed wire arrows, each containing an authentic miniature engineering schema (target reticle, node scatter, line plot, completion ring). Misusing this by inserting generic decorative icons instead of functional data graphics destroys the product's credibility as a real scientific tool.
MUST
- Anchor the headline with a terminal color change to deep emerald (#0F4336) on the final word.
- Use 1px structural hairline borders (#E8E6E1) rather than heavy drop shadows to define boundaries.
- Pair technical micro-diagrams (reticles, scatterplots, line charts) with step cards for concrete evidence.
- Set display headings in tight negative tracking (-0.035em) with exact 1.08x line-height.
AVOID
- Do not apply heavy multi-layered Gaussian blur shadows beneath panels or cards.
- Do not use saturated neon green; stick to the deep scientific emerald (#0F4336).
- Do not crowd the right-hand visual field; allow the 3D crystal lattice generous negative space.
- Do not mix rounded corner radii haphazardly; lock buttons to 8px and cards to 14px.
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 中尝试 
