Design a dark-mode website section: precision enterprise health system balancing midnight obsidian canvas with luminescent cyan-to-violet gradients and crisp telemetry glass.
LAYOUT
The layout leads with a split two-column hero section: value proposition and primary CTAs on the left, counterbalanced by a wide perspective-free software terminal preview on the right. Below, a full-width subtle hairline separator leads cleanly into a multi-column corporate footer. The footer anchors lead generation on the left with newsletter inputs, followed by four dense link columns and direct contact channels on the right.
PALETTE (use these exact hex values)
- #040812 — Obsidian Void: Primary page canvas and foundational background beneath all modules.
- #0a1120 — Telemetry Surface: Background for floating interface window and nested dashboard metrics widgets.
- #4f75fe — Cobalt Lumina: Primary call to action button backgrounds, active nav pill indicators, and links.
- linear-gradient(90deg, #38bdf8 0%, #a78bfa 100%) — Gradient Headline: Text gradient on the second line of the primary headline.
- #122b5c — Glow Atmosphere: Radial atmospheric backlight glow positioned beneath the application preview canvas.
- #ffffff — Pure White: Primary display text, main headings, metrics values, and button labels.
- #94a3b8 — Slate Steel: Body copy, supporting descriptions, footer link labels, and inactive meta tags.
- #475569 — Muted Slate: Copyright text, placeholder input fields, and disabled status indicators.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 54px display. Tracking -0.03em at display, -0.01em at body. The typography is technical, crisp, and authoritative, leveraging an engineered neo-grotesque sans-serif with geometric precision. Tight letter-spacing on display headlines conveys modern efficiency, while open counters at small sizes keep data metrics instantly legible. Inter or Plus Jakarta Sans serve as ideal matches for their balanced clinical neutrality and digital-first clarity.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created strictly through atmospheric backlighting and translucent edge highlights rather than traditional drop shadows. Radial gradients in deep blue (#122b5c) softly project beneath major app frames to visually lift them off the ground. Nested cards employ 1px borders with varying alphas of white (0.04 to 0.12) to simulate precise glass thickness.
IMAGERY
Imagery avoids generic stock photography of medical clinics, opting instead for crisp, highly detailed vector dashboard terminals and operational charts. Visual assets consist of cleanly drafted icons, dense timetable grids, and subtle astronomical radial glows. Any illustrative graphics must be geometric, technical, and tinted in cool cyan or indigo palettes.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-line headline structure where a stark white sentence is paired directly with a cyan-to-violet gradient second line ('Run your practice. Elevate every patient.'). This specific pairing bridges enterprise clinical reliability with modern AI intelligence. It is broken when applied to entire paragraphs or when rendered in low-contrast pastels.
MUST
- Use solid white for line one of hero headlines and the signature cyan-violet gradient strictly on line two.
- Maintain high contrast by keeping secondary text readable at #94a3b8 against the deep dark canvas.
- Enclose all telemetry and mockups inside structural cards with fine 1px semi-transparent borders.
- Use precise 10px corner radii on all interactive buttons and input fields.
AVOID
- Do not use multi-color gradients on standard body copy or small navigation links.
- Do not use sharp 0px corners on interactive cards or buttons; curves soften the technical density.
- Do not use pure black (#000000); always retain a slight oceanic blue-tinted midnight base (#040812).
- Do not crowd the dashboard mockup; maintain at least 48px clearance from hero text.
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 中尝试