Design a light-mode website section: crisp technical enterprise trust with deep violet neon glow set against an expansive clean canvas.
LAYOUT
Structured around a balanced two-column asymmetric split (roughly 45% left, 55% right). The left side anchors verbal comprehension: eyebrow pill, hero headline, lead paragraph, a 4-row vertical feature stack, and primary CTA with security micro-assurances. The right side is a horizontal processing schema: left-side inputs flow via bezier lines into a central black monolith, discharging into right-side verified artifacts, grounded by a full-width 4-stat proof bar.
PALETTE (use these exact hex values)
- #FAFAFC — Canvas Ground: Outer structural page background setting a clean clinical environment.
- #FFFFFF — Card Surface: Interior fill for diagram pill cards, stats container, and node wrappers.
- #111318 — Deep Onyx: Primary headline typography, hub tile fill, and primary contrast elements.
- #5E6472 — Slate Body: Feature descriptions, subtitle copy, and sub-labels within cards.
- #2563EB — Electric Indigo: Primary action button, emphasis gradient start, and primary badge fills.
- #9333EA — Neon Violet: Accent text gradient end, central hub aura glow, and subtle badges.
- #0EA5E9 — Cyan Blue Accent: Integrated data node icons and security ring status accents.
- #E5E7EB — Hairline Border: Outlines of floating nodes, metric cards, and badge borders.
TYPOGRAPHY
Typeface Inter (or SF Pro Display, Plus Jakarta Sans, Geist), weights 400/500/600/700. Sizes 10px caption, 11px body-sm, 13px body, 15px body-lg, 18px subheading, 44px display. Tracking -0.03em on display, -0.01em on body, +0.06em on pills. Precise, corporate-technical, and modern. Built with a neutral grotesque sans-serif like Inter or SF Pro Display, it balances rapid enterprise scanning with technical startup polish. Tight letter-spacing in the display size (-0.03em) lends authority, while high x-height in small sizes maintains clarity across dense diagram nodes.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created flatly and surgically: white surface elements sit barely above the #FAFAFC background with a hairline 1px border and an imperceptible 1px shadow (0 1px 2px rgba(0,0,0,0.04)). The sole break in this flatness is the central obsidian hub tile, which radiates an intentional atmospheric neon glow (rgba(99, 102, 241, 0.35)) to signal computational energy.
IMAGERY
This interface avoids photography in favor of crisp technical system schematics and branded vector glyphs. Icons are modern, sharp-cornered SVG line or glyph illustrations representing tech stacks (Notion, GitHub, Drive). No lifestyle, human imagery, or abstract 3D clay renders are permitted.
SIGNATURE DETAIL — the thing that makes this design itself
The central black obsidian monolith tile floating amid white data connectors with a vivid violet-indigo underglow. It commands the visual hierarchy by serving as the only true dark element on the right canvas, visually anchoring the entire input-output architecture.
MUST
- Use 1px dotted or dashed connector lines in #CBD5E1 to trace data pipelines to central hub.
- Restrict neon drop shadows strictly to the central processing tile and gradient pill badges.
- Keep icon backdrops pale and tinted to match their respective foreground glyph.
- Apply the two-tone gradient (#2563EB to #D946EF) solely on focal keywords in primary headlines.
AVOID
- Do not use dark card backgrounds outside of the central processing hub tile.
- Avoid heavy drop shadows or blur radii over 6px on light-surfaced node cards.
- Do not use saturated primary colors for body typography; keep it to slate #5E6472.
- Avoid solid connectors; keep pipeline lines dashed or micro-dotted to denote data flow.
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 中尝试