Design a dark-mode website section: deep obsidian surfaces warmed by ember glows and precision scientific glasswork.
LAYOUT
The header spans horizontally with brand mark left, inline text links center, and auth buttons right. The hero content splits into a 5-column left column (status pill, massive headline, subtitle, dual CTAs) and a 7-column right column housing a four-box bento grid. Beneath both sits an expansive logo trust bar, capped at the base by an inverted rounded card sliding in from the lower frame.
PALETTE (use these exact hex values)
- #050608 — Pitch Ground: Deepest canvas background behind the hero layout and fluted backdrop.
- #0d1017 — Panel Slate: Background fill for floating feature and telemetry cards.
- #1c2230 — Subtle Stroke: Hairline border for dark telemetry cards, pill badges, and secondary buttons.
- #f4f4f6 — Sheet Ground: Background for the contrasting light section peeking from the bottom viewport.
- #d97757 — Ember Flame: Subheading accent, chart glow nodes, and left-hand atmospheric ambient lighting.
- #9d74c2 — Molecular Violet: Used for organic 3D molecular renders and hero metric highlights.
- #22c55e — Status Green: Live status indicator dot beside completion badge.
- #ffffff — Pure White: Primary headings, active buttons, and high-emphasis display numbers.
- #8a94a6 — Muted Silver: Body copy, inactive nav links, and metadata descriptions.
TYPOGRAPHY
Typeface Inter Display (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 20px subheading, 32px heading, 64px display. Tracking -0.03em at display, +0.06em at micro caps. The typographic tone is authoritative, scientific, and enterprise-grade. It communicates bleeding-edge computation through tightly tracked, large-scale neo-grotesque weights balanced with clinical lowercase phrasing. Inter Display or Geist are ideal matches, providing mechanical precision without feeling sterile.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created without drop shadows, using crisp 1px borders (#1c2230) on dark slate (#0d1017) surfaces against the black canvas. Atmospheric spatial layering comes from soft, non-directional radial glows in warm amber and violet behind the glass cards. The subsequent white section establishes sharp foreground overlap via an immense 36px top border-radius.
IMAGERY
Imagery is hyper-specific to computational biology, displaying tactile, photorealistic 3D protein folds in violet and amber tones. UI elements include clean vector charts and dotted dot-density world maps rendered in muted mauve (#5d5469). Stock photography, corporate headshots, or casual vector illustrations are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive horizontal split between an ember-lit obsidian fluted hero section and an inverted stark-white sheet curling up from the bottom edge. Replicate this by layering a vertical fluted texture over pitch black with left amber backlighting, then clipping the footer with a massive 36px border-radius off-white card.
MUST
- Keep card background fills dark slate (#0d1017) with razor-sharp 1px subtle strokes (#1c2230).
- Anchor headlines using massive tight-tracked display sizing (-0.035em) with punctuation intact.
- Limit warm ambient ember glow to edge vignettes so typography remains readable against pitch black.
- Pair pure white primary CTA buttons against pitch canvas to maintain clear focal hierarchy.
AVOID
- Do not use colorful filled buttons; only pure white or transparent outlined buttons are permitted.
- Avoid heavy drop shadows; card elevation must rely exclusively on 1px borders and surface luminance.
- Do not saturate the background; ambient glow should remain an organic, low-opacity lateral bleed.
- Never use soft or playful rounded sans-serifs; stick to precise, technical neo-grotesques.
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 中尝试 
