Design a light-mode website section: sterile clinical clarity structured in warm modular bento frames with surgical coral accents.
LAYOUT
The section adopts an asymmetric bento layout within a max-width 1280px frame. The left column (roughly 55% width) holds the section headline, the dominant End-to-End Drug Discovery card, and the horizontal Industries ribbon. The right column (45% width) stacks a 2x2 grid of smaller audience cards above a wide horizontal testimonial banner.
PALETTE (use these exact hex values)
- #F8F9FA — Canvas Ground: Outer page background providing soft warm-gray contrast behind bright card surfaces
- #FFFFFF — Surface White: Standard container background for bento capability cards and secondary modules
- #FAF8F5 — Surface Warm Spotlight: Tinted background for the hero drug discovery card, creating warmth and priority
- #111827 — Text Primary: High-contrast headings, card titles, and key quantitative metrics
- #6B7280 — Text Secondary: Descriptive body copy, subheadings, and metadata captions
- #D13B34 — Brand Coral: Primary action button, quote glyph, target markers, and active links
- #FDE8E7 — Coral Soft Tint: Background fill for category badges and accent icons
- #EAECF0 — Border Hairline: Card perimeter outlines, horizontal stat dividers, and input borders
- #0284C7 — Science Blue: R&D flask icon glyph and line-chart trend stroke
- #10B981 — Validation Green: Status indicator checkmarks and workflow completion state
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 20px heading, 28px heading-lg, 44px display. Tracking -0.02em at display, 0 at body. Plus Jakarta Sans provides an authoritative, highly modern technological feel with clean geometric terminals that feel both scientific and approachable. Tight display tracking (-0.03em) on headlines conveys institutional precision. Inter or DM Sans serve as flawless drop-in open-source alternatives without altering structure.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is communicated almost entirely through flat tonal stepping and crisp 1px borders (#EAECF0) rather than diffuse shadows. Surface level 0 (#F8F9FA) sits behind pure white (#FFFFFF) and tinted cream (#FAF8F5) containers. Subtle micro-shadows (0 1px 2px rgba(0,0,0,0.03)) are permitted solely to anchor cards against the floor.
IMAGERY
Imagery uses crisp, photorealistic 3D scientific structures—specifically molecular surfaces rendered with soft white occlusion and bright coral active nodes. Graphic accents feature delicate vector line graphs, radial point dispersion patterns, and minimal technical iconography. Avoid stock photography of human researchers or generic corporate illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The warm spotlight card with an embedded 3D molecular render paired directly with coral node markers and an inline 4-stat metric strip. It immediately elevates a standard tech bento into a specialized life-sciences intelligence interface. Misusing it involves replacing the organic 3D molecule with generic SaaS screenshots or removing the stat strip.
MUST
- Use 16px border-radius consistently on all exterior bento module containers.
- Restrict pure coral red (#D13B34) to call-to-action buttons, key milestones, and quotation marks.
- Apply #FAF8F5 warm tint only to the primary spotlight feature card.
- Separate quantitative metrics using subtle 1px vertical borders in #EAECF0.
AVOID
- Do not introduce heavy drop shadows; cards rely strictly on 1px borders for separation.
- Do not saturate entire card backgrounds with dark or primary colors.
- Do not use sharp 0px or 4px box corners for feature cards.
- Do not mix multiple typeface families; stick exclusively to a single neo-grotesque sans.
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 中尝试 
