Design a dark-mode website section: clinical laboratory rigor anchored across an atmospheric violet twilight horizon line.
LAYOUT
The page opens with a centered stack on a deep twilight background: category pill, serif headline, and subtitle, anchored by a floating billing toggle. Directly beneath, the top third of three pricing cards penetrates the dark horizon while their bases merge cleanly into the unified white comparison table below. The matrix features four columns: a wide descriptive category column on the left and three evenly spaced plan columns to the right.
PALETTE (use these exact hex values)
- #0A0718 — Obsidian Twilight: Top hero section base tone creating deep atmospheric contrast
- #261B4D — Nebula Violet: Gradient midtone and radiant horizon glow behind featured pricing card
- #FFFFFF — Pure Clinical White: Base surface for tier cards and entire feature matrix table
- #5B3AE8 — Electric Indigo: Primary CTA fill, Pro badge header, and checkmark accents
- #EDE9FE — Lavender Discount Pill: Background fill for the 20% annual discount pill indicator
- #E5E7EB — Hairline Border Slate: Dividers between matrix rows, columns, and secondary button borders
- #111827 — Ink Slate: Dominant text color for table labels, values, and card prices
- #6B7280 — Cool Muted Grey: Subtitles, secondary tier descriptors, and feature descriptions
- #F3F4F6 — Horizon Light Text: Hero headline text and toggle active states on dark ground
TYPOGRAPHY
Typeface Cormorant Garamond (or Instrument Serif,Playfair Display,Echols), weights 400/500. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.015em. The typographic identity blends academic gravitas with Silicon Valley utility. The high-contrast serif display creates immediate prestige and scientific credibility, recalling classical research publications. In contrast, the neutral sans-serif body type ensures rapid scanning across complex feature checklists and numeric metrics without cognitive fatigue.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved through the dramatic horizon transition and ambient lighting rather than heavy drop shadows. The Pro card utilizes a delicate diffuse violet aura (0 12px 32px rgba(91, 58, 232, 0.18)) and a physical 1px purple perimeter, lifting it slightly above its sibling columns. The main table sits flush and planar on the white lower surface with subtle hairline borders providing structural definition.
IMAGERY
This interface avoids raster photos or illustrative art completely, relying on crisp geometric micro-icons to accompany feature descriptions. Icons are uniform 16px hairline line art rendered in muted cool slate (#6B7280). Abstract ambient gradients at the horizon evoke twilight without introducing distracting graphical elements.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the 'horizon straddle' where clean white pricing cards pierce upward into an atmospheric, starless violet twilight sky. The featured Pro card is uniquely crowned with an electric indigo top header strip and bathed in a soft purple glow. Misusing this pattern by extending the white background to the top or darkening the data table destroys its distinct laboratory-meets-twilight identity.
MUST
- Anchor the pricing cards across the boundary between the dark twilight hero and light table.
- Use serif display font exclusively for the main title to preserve laboratory authority.
- Reserve the saturated violet #5B3AE8 specifically for the Pro tier and confirmed checks.
- Keep comparison table data cell borders delicate using 1px solid #E5E7EB.
AVOID
- Do not use the serif typeface for pricing numbers, table headers, or buttons.
- Do not apply dark background styling to the internal cells of the feature matrix.
- Do not color the Starter or Enterprise tier cards with bold accent backgrounds.
- Do not remove the subtle ambient purple horizon gradient behind the featured card.
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 中尝试 
