Design a light-mode website section: clinical stark white canvas orbiting a stippled celestial brain illuminated by surgical cobalt accents.
LAYOUT
The hero layout implements an asymmetric 50/50 two-column composition within a 1320px container. The left column stacks metadata eyebrow, headline, copy, dual CTA buttons, compliance badges, and a 4-column metric grid. The right column gives breathing space to the large orbital stipple visualization. A subtle logo row and centered divider rule terminate the section.
PALETTE (use these exact hex values)
- #FFFFFF — Pure Canvas White: Root background providing sterile high-contrast negative space across the entire hero layout.
- #F9FAFC — Subtle Card Tint: Background fill for KPI stat cards and floating glass pill badges.
- #2B5BFF — Cobalt Primary: Primary interactive buttons, key graphic nodes, eyebrow text, and accent sparkles.
- #0D1117 — Deep Onyx Text: Main display headers, logo mark, and primary stat numeric metrics.
- #5A6474 — Cool Slate Neutral: Supporting subhead paragraphs, nav items, and secondary button text.
- #E6E9EE — Border Hairline: Subtle boundary stroke around metric cards, secondary buttons, and section dividers.
- #10B981 — Success Mint: Delta indicators and trend arrows within the bottom KPI metric cards.
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, Arial), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 24px subheading, 56px display. Tracking -0.03em at display, 0.08em at uppercase eyebrow. The typographical tone is analytical, precise, and enterprise-grade. Using a robust neo-grotesque like Inter with tight display tracking conveys technical competence without eccentricity. For substitutions, Geist or Plus Jakarta Sans capture the identical engineered rigidity, provided weights remain tightly bounded to 400, 500, and 700.
GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1320px container, airy density.
DEPTH
Depth is delivered through atmospheric contrast rather than heavy shadows. Cards and floating pills use a crisp 1px hairline border (#E6E9EE) combined with a whisper-light ambient blur: 0 4px 16px rgba(0, 0, 0, 0.03). The stippled illustration relies on dot density variations to project optical three-dimensional volume.
IMAGERY
Visual imagery consists exclusively of high-density stipple/halftone dot matrices depicting an anatomical brain orbiting within celestial point-cloud rings. Shaded halftone spheres simulate satellite nodes, connected by fine vector callout hairpins. Full-bleed raster photography or solid vector shapes are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the cosmic stippled brain visualization—a pointillist halftone hybrid that bridges organic neuroscience with planetary physics. It transforms abstract artificial intelligence into a tactile mechanical asset. To replicate correctly, render all planetary nodes and orbital paths via micro-dot frequency patterns rather than continuous gradient fills.
MUST
- Keep the canvas stark, pure #FFFFFF without ambient background gradients or tinting.
- Restrict bright electric blue (#2B5BFF) exclusively to active triggers, eyebrow text, and graphic focus points.
- Use tight leading (1.05–1.1) and negative letter spacing on headlines above 48px.
- Render complex diagrams using monochromatic pointillism and halftone stipple dot fields.
AVOID
- Do not apply heavy linear drop shadows or glossy skeuomorphic bevels to buttons or cards.
- Avoid filling the hero background with dark mode palettes or colored mesh gradients.
- Do not use full-color realistic photographs; imagery must remain programmatic and stippled.
- Never use blue for large background blocks; keep cobalt strictly surgical and punctual.
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 中尝试