Design a dark-mode website section: quiet clinical authority framed in deep obsidian, softened by warm literary serifs and bioluminescent cyan glows.
LAYOUT
Asymmetric two-column split hero layout capped by a clean 72px top navigation bar. Left column occupies roughly 55% width, stacking a high-contrast serif headline, 2-line explanation, twin CTA buttons, and inline security badges. Right column anchors an interactive preview card nestled inside an orbiting node diagram with soft diffuse back-lighting.
PALETTE (use these exact hex values)
- #06090e — Obsidian Ground: Primary screen background canvas across hero and navigation
- #0b121c — Panel Elevation: Background fill for the floating AI interface card and bottom container
- #1a2536 — Subtle Border: 1px hairline strokes around floating cards, orbit rings, and ghost buttons
- #38bdf8 — Bioluminescent Cyan: Left anchor of primary gradient and back-glow atmospheric haze
- #34d399 — Therapy Mint: Right anchor of headline gradient, primary CTA button fill, and sketch underline
- #f8fafc — Primary Text: Main headline text, primary card headings, and active interactive labels
- #94a3b8 — Muted Slate: Hero description copy, navigation links, and compliance trust labels
- #0e1a26 — Dark Icon Surface: Background disc fill for orbit nodes surrounding the hero mockup
TYPOGRAPHY
Typeface Instrument Serif (or Cormorant Garamond, Newsreader, Playfair Display), weights 400. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 36px heading, 72px display. Tracking -0.02em. The typographic pairing balances deep intellectual warmth with contemporary SaaS efficiency. The display serif communicates therapeutic empathy, wisdom, and bedside manner, while the clean sans-serif UI type delivers technical precision and readability. If Instrument Serif is unavailable, Cormorant Garamond is the optimal free Google Font substitute.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely through optical lighting rather than traditional dark drop shadows. Deep obsidian (#06090E) sits at the lowest layer, overlaid with crisp hairlines (#1A2536) that define panel borders. A single diffuse, low-opacity radial cyan glow behind the UI preview produces perceived focal height.
IMAGERY
Avoids literal photographic representations of therapists or therapy offices. Employs abstracted, dark-mode software wireframes accompanied by geometric node networks and orbital rings to convey continuous, invisible intelligence. Visual accents are restricted to line-art iconography and an organic hand-drawn stroke.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-personality hero headline that transitions from pure white editorial serif into a luminous cyan-mint gradient accented by an imperfect, hand-drawn sketch underline. This single move injects human warmth directly into a clinical tech interface; misusing it by swapping the organic underline for a vector line instantly drains the empathetic soul of the brand.
MUST
- Reserve the cyan-to-mint gradient exclusively for the primary CTA and core value proposition text.
- Pair the literary serif strictly with neutral, low-contrast sans-serif body copy to avoid competing visual styles.
- Use 1px borders in #1A2536 on cards and ghost buttons to establish geometry without heavy drop shadows.
- Keep ambient glow radii wide and subtle (blur 80px-120px) to simulate diffuse bioluminescence.
AVOID
- Do not render body copy or secondary buttons in the serif typeface.
- Avoid solid pure white background surfaces; all cards must remain dark elevated tones.
- Do not use harsh or multi-colored dropshadows; rely on borders and radial back-glows for depth.
- Never replace the organic sketch underline with a geometric straight rule.
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 中尝试 
