Design a dark-mode website section: deep obsidian darkroom floating an immaculate medical-grade comparison matrix beneath soft cobalt ambient light.
LAYOUT
The page flows vertically in two distinct zones: a top dark header containing the hero text on the left and three value props on the right, followed by a wide 1240px floating comparison table. The table is arranged in four columns: 1.4fr for features and 1fr for each of the three pricing tiers. The matrix concludes with a dedicated consultation bar pinned to the bottom of the card.
PALETTE (use these exact hex values)
- #050713 — Obsidian Canvas: Deep cosmic background hosting the header, ambient lights, and micro badges
- #FFFFFF — Crisp Paper: Main table background surface delivering stark clinical readability
- #F8FAFC — Subtle Column Tint: Faint vertical background fill used to elevate the highlighted tier column
- #2563EB — Electric Royal: Primary action button fill, highlight checkmarks, and eyebrow accent bar
- linear-gradient(90deg, #1E3A8A 0%, #9D174D 100%) — Bookmark Spectrum: Top badge header gradient emphasizing the 'Most Popular' column tab
- #0F172A — Midnight Ink: Card headings, tier pricing values, and primary row titles
- #64748B — Muted Slate: Row descriptive subtext, billing frequencies, and inactive tier disclaimers
- #E2E8F0 — Hairline Rule: Internal table grid borders and tier card outline dividers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 22px subheading, 38px heading, 44px display. Tracking -0.025em on display, 0.05em on small caps. The typographic tone is authoritative, corporate, and modern, reminiscent of high-reliability medical or enterprise software. Inter or SF Pro provides clinical precision with tight negative tracking on display figures and balanced legibility on dense feature grids. The neutral sans prevents distraction while conveying efficiency.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created by juxtaposing a deep, low-luminance dark backdrop against a razor-sharp white foreground sheet. The main card casts a very faint, soft ambient shadow (0 20px 40px -15px rgba(0, 0, 0, 0.4)) onto the dark canvas. Internal table layers remain flat, relying exclusively on hairline rules rather than shadows for separation.
IMAGERY
Iconography is strictly functional, monoline, and enclosed within 28px circular or rounded-square containers. Ambient atmospheric glow radiates behind the top right canvas in deep cobalt and violet shades. Figurative photography and marketing illustrations are entirely avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The overhanging gradient bookmark tab ('MOST POPULAR') that breaches the top boundary of the white comparison card, tying together the ambient dark universe with the bright clinical grid below.
MUST
- Keep internal matrix borders strictly at 1px using light grey #EEF2F6.
- Pair feature titles with a concise grey description directly beneath them.
- Ensure the hero header stays on dark canvas while the table stays pure white.
- Use tabular numeral alignment for monthly dollar amounts.
AVOID
- Never invert the table surface to dark; it must feel like crisp white paper.
- Do not drop heavy multi-layered drop shadows under the main comparison container.
- Never apply the header gradient to outline borders or text fills.
- Do not allow checkmark icons to use any color other than primary blue #2563EB.
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. Try in DraPub 
