Design a light-mode website section: sterile clinical clarity layered over a deep algorithmic horizon with precision sapphire accents.
LAYOUT
The screen uses an asymmetrical two-zone configuration inside a 1280px max-width container. The left third houses the narrative anchor: eyebrow, 44px display statement, subtext, and stacked value propositions with social validation. The right two-thirds holds the billing cycle toggle aligned top-right, under which sits a three-column equal-width pricing grid (Starter, Growth, Scale), completed by a full-width custom consultation row and the bottom horizon bar.
PALETTE (use these exact hex values)
- #f8fafd — Clinical Canvas: ambient background wash behind all main pricing content and structural blocks
- #ffffff — Pure White: pricing card and badge backgrounds providing crisp structural contrast
- #0b1528 — Deep Midnight: primary headlines, tier names, and numerical price values
- #0d63f8 — Electric Sapphire: hero brand emphasis, primary button background, selected toggle, and active checkmarks
- #64748b — Muted Slate: descriptive subtitles, pricing interval markers, and secondary feature copy
- #10b981 — Clinical Mint: scale tier icon container, enterprise checkmarks, and discount callout tag
- #e2e8f0 — Subtle Border: default tier card outlines, ghost button borders, and horizontal separators
- #bfdbfe — Featured Border Blue: stroke highlight surrounding the featured Growth pricing tier
- #020617 — Horizon Navy: dark anchor footer panel at the bottom margin of the screen
- #38bdf8 — Laser Cyan: illuminated optical flare glowing at the interface horizon seam
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Segoe UI), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 20px heading, 36px heading-lg, 44px display. Tracking -0.02em at display, 0 at body, 0.08em for uppercase badges. The typography is cold, precise, and authoritative, matching the safety-critical stakes of healthcare AI governance. A modern neutral neo-grotesk (matched to Inter) provides tabular clarity in numerals ($1,499, $4,999) and clinical detachment in body descriptions. Standard system sans-serifs (SF Pro, Segoe UI) serve as drop-in substitutions without voice degradation.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is restrained and architectural rather than physical. Cards sit flat on the #f8fafd ground with 1px hairline borders (#e2e8f0), while the featured Growth tier gains prominence via a faint blue perimeter glow (0 12px 32px -4px rgba(13, 99, 248, 0.08)) and a #bfdbfe border tint. The true spatial depth occurs at the bottom viewport horizon, where absolute dark void meets radiant cyan light.
IMAGERY
Imagery is entirely non-photographic and glyph-driven. Minimalist wireframe geometric glyphs (hexagons, bar charts, cubes, shields) rendered with 1.5px strokes inside soft 36px rounded containers represent medical and computational infrastructure. Photography or literal clinical hospital imagery would degrade the calibrated software utility feel.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-clean, clinical-white SaaS pricing table anchored directly against an intense deep-space cosmic slit with a focused cyan laser flare at the bottom margin. Misusing this signature means applying the dark horizon effect arbitrarily across card borders or omitting the bottom dark band, reducing the design to generic B2B white-label layout.
MUST
- Use electric sapphire (#0d63f8) exclusively for intentional focal points like primary buttons and headline emphasis.
- Maintain uniform 16px card corner radii and 32px internal padding across all pricing columns.
- Use subtle colored iconography (sapphire, slate, mint) to demarcate tier capabilities.
- Keep standard tier CTAs as ghost buttons with thin sapphire borders to preserve Growth card dominance.
AVOID
- Do not use saturated backgrounds or dark themes for the pricing comparison card area.
- Avoid heavy drop shadows; depth is established strictly through 1px border tones and subtle ambient blur.
- Do not color entire headings; isolate maximum two words in brand sapphire.
- Never style the standard tier CTA buttons with solid fills.
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