Design a dark-mode website section: clinical data engineering wrapped in editorial serifs and deep obsidian luminescence.
LAYOUT
The section employs an asymmetrical two-column desktop split spanning a 1240px container. The left column (roughly 45% width) holds the category badge, serif display headline, supporting thesis paragraph, dual action buttons, and a bottom row of three feature bullet columns. The right column houses the oversized floating product card, anchored at the bottom by a full-width monochromatic enterprise logo ticker.
PALETTE (use these exact hex values)
- #090D0E — Obsidian Ground: Deepest canvas background behind all hero text and floating cards
- #101618 — Panel Slate: Background for dashboard card containers, nested panels, and interactive elements
- #1E272A — Subtle Border: Divider lines, inner section borders, and secondary button perimeters
- #34D399 — Luminous Mint: Primary CTA fill, headline emphasis, live status pips, and glowing aura
- radial-gradient(circle, rgba(52,211,153,0.18) 0%, rgba(9,13,14,0) 70%) — Mint Halo Glow: Diffuse radial halo surrounding the right-hand dashboard container
- #F3F4F6 — Chalk White: Main headline text, active tab labels, and primary numeric readouts
- #7A888B — Muted Slate Text: Body descriptions, JSON keys, category counts, and metadata tags
- #F87171 — Coral Syntax: String syntax highlighting within the interactive JSON preview pane
TYPOGRAPHY
Typeface Instrument Serif (or Newsreader, Editorial New, Playfair Display), weights 400. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 52px display. Tracking -0.02em. The typographic identity bridges classical editorial authority with modern developer tooling precision. By contrasting an expressive, high-contrast transitional serif display headline against clinical monospaced and sans-serif data displays, the system signals both high-level executive credibility and raw engineering capability. If Instrument Serif is unavailable, substitute with Newsreader or Editorial New.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Elevation is achieved through luminous containment rather than traditional drop shadows. A dark recessed card (#101618) is cast against a broad, soft teal-mint radial glow behind its upper-right shoulder, making it hover organically above the deep #090D0E base canvas. Internal sub-panels utilize hairline borders (#1E272A) to delineate nested layers.
IMAGERY
Avoid photographic assets or human imagery entirely. The visual focus is solely an authentic, high-fidelity dark-mode product interface displaying real workflow stages, telemetry counts, and clean JSON payloads. Any iconographic elements must be thin-stroke (1.5px) minimalist line work in mint or slate.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an authoritative transitional serif headline ending in radiant jade green ('usable training data.') paired immediately beside an ambient-glowing dark terminal container. It synthesizes executive editorial polish with tactile developer utility. Misusing it means applying bright green indiscriminately across all text or swapping the serif for a standard tech-bro geometric sans.
MUST
- Pair elegant transitional serif display headlines with precise, clean sans-serif UI typography.
- Highlight only the transformative terminal phrase of the headline in #34D399.
- Use deep obsidian dark tones (#090D0E to #101618) to preserve maximum contrast against mint accents.
- Confine heavy visual glow to an ambient radial blur behind the primary showcase mockup card.
AVOID
- Do not use high-saturation blue, purple, or warm gradients anywhere in the interface.
- Do not set body text or metadata in serif typefaces; reserve serifs strictly for large display.
- Do not give the main dashboard mockup hard drop shadows; rely entirely on diffuse cyan-green radiance.
- Do not use sharp 0px corners; all cards must feature a generous 20px to 24px radius.
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 中尝试 
