Design a dark-mode website section: deep obsidian canvas filtering chaotic token clouds into coherent, illuminated data streams.
LAYOUT
The vertical rhythm begins with a compact category tag, dropping 16px to a two-tier centered display headline and an explanatory paragraph capped at 540px width. Below an 80px gap sits a strict three-column symmetrical staging area: left column (3 stacked feature cards), center column (metaphorical compression illustration), and right column (3 stacked feature cards). The sequence concludes with a centered action cluster: dual CTA buttons stacked over an inline checkmark trust label.
PALETTE (use these exact hex values)
- #030712 — Obsidian Canvas: Root page background providing limitless dark space for glow effects
- #09101d — Container Glass: Background fill for the 6 symmetrical feature cards
- #162235 — Subtle Stroke: Hairline border defining card perimeters without high contrast
- #38bdf8 — Luminescent Cyan: Vector iconography strokes, glowing data beams, and gradient end-stops
- #3b82f6 — Signal Blue: Gradient start-stop for headline highlight and primary CTA fill
- linear-gradient(90deg, #3b82f6 0%, #22d3ee 100%) — Beam Gradient: Active state applied to primary CTA button and header highlight text
- #ffffff — Text Primary: Primary headline phrases, card titles, and high-visibility labels
- #94a3b8 — Text Secondary: Hero paragraph explanation and card body descriptions
- #64748b — Text Tertiary: Footer guarantee copy and secondary micro-annotations
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,system-ui), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 52px display. Tracking -0.03em at display, 0 at body. Clean, technical, and authoritative. A modern neo-grotesque sans-serif (Inter or equivalent) provides crisp geometry with tight tracking on display headings and open, legible counters at small sizes. The tone conveys algorithmic precision and high-throughput computational efficiency.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 72px between sections, 1200px container, comfortable density.
DEPTH
Depth is created through luminosity and layered translucency rather than traditional drop shadows. Surfaces closer to the user feature subtle glowing cyan edge highlights and glass-like opacity layers. The background remains a deep matte void, allowing the illuminated central graphic to cast an ambient spherical glow behind the surrounding cards.
IMAGERY
Abstract 3D technical visualization featuring semi-transparent glass wafers, isometric floating planes, and neon-lit particle simulations. Visuals strictly depict physical optical principles—refraction, diffraction, particle compression, and laser beam collimation—avoiding human photography or literal device mockups.
SIGNATURE DETAIL — the thing that makes this design itself
The flanking 'refraction chamber' schema: two parallel columns of compact feature cards framing a glowing 3D visual metaphor that transforms unstructured particle scatter into parallel linear data beams. Using this requires absolute vertical symmetry across both card stacks; breaking card heights or icon alignments destroys the visual equilibrium.
MUST
- Keep card backgrounds dark navy (#09101d) rather than flat grey or pure black.
- Use subtle 1px borders (#162235) to delineate interactive boundaries in dark mode.
- Balance the 3-column layout strictly: 3 cards left, central visualization, 3 cards right.
- Limit vivid cyan/blue gradients exclusively to primary calls to action and focal accents.
AVOID
- Never introduce warm colors like orange, red, or yellow into the visual scheme.
- Do not use high-opacity white borders; keep borders under 15% opacity to avoid harsh grids.
- Avoid heavy drop shadows; depth must rely on back-lit glow and glass refraction.
- Do not break the symmetrical flanking card layout with asymmetrical card heights.
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 中尝试 
