Design a dark-mode website section: precision-engineered developer pricing matrix cloaked in deep void blue with electric azure accents.
LAYOUT
The layout follows a top-to-bottom technical hierarchy within a 1200px container. The header combines a left-aligned headline with a right-aligned three-segment metric telemetry strip. Below lies the core comparison matrix, blending four vertical tier cards directly with left-anchored horizontal feature definitions. A three-column trust assurance bar anchors the base.
PALETTE (use these exact hex values)
- #06090e — Void Canvas: deepest backdrop canvas behind all pricing panels and hero elements
- #0a0f18 — Surface Container: card and table background separating content tiers from base void
- #151f2e — Subtle Border: 1px tabular dividers, unselected card contours, and footer grid boundaries
- #2f81f7 — Electric Azure: featured tier outline, prominent CTA button background, and headline highlight keyword
- #38bdf8 — Cyan Tint: pricing category pill text, uptime stat icon, and subtle badges
- #ffffff — Text Primary: hero title, plan designations, tier prices, and critical metrics
- #8493a8 — Text Muted: subheadings, feature row descriptors, metric captions, and inactive dash markers
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 18px subheading, 24px heading, 42px display. Tracking -0.025em at display, -0.01em at body. The typographic voice is ultra-clean, technical, and utilitarian, driven by Inter's dense numeric tabular figures and neutral lowercase terminals. It speaks to engineers and cloud architects who value dense specifications over emotional marketing copy. Geist or SF Pro Display are ideal 1:1 drop-in substitutes maintaining this exact engineering ethos.
GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is flattened and expressed almost entirely through border luminescence rather than drop shadows. Surface separation occurs via 1px border lines (#151f2e) against dark navy panels (#0a0f18). The recommended 'Team' card creates the only spatial lift through an electric blue (#2f81f7) perimeter stroke and faint inner blue ambient shading.
IMAGERY
This interface avoids raster photos, avatars, and complex illustrations entirely. Visual communication relies solely on minimal 14-18px geometric line icons (shield, chip, wireframe cube, clock) rendered in clean mono-weight line strokes. Anything illustrative, painterly, or skeuomorphic would violate the developer-grade utility.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated matrix architecture where the featured 'Team' column cuts through the unified comparison table with a crisp 1.5px electric azure border and a centered 'MOST POPULAR' pill badge floating over the top border line. It transforms a standard pricing table into a focused technical specification sheet.
MUST
- Keep the primary CTA color (#2f81f7) strictly reserved for the single featured tier column.
- Use 1px borders in #151f2e to demarcate grid cells without adding visual bulk.
- Render non-available features with a low-opacity horizontal em-dash in #334155.
- Emphasize the focal word in the main headline with electric azure (#2f81f7).
AVOID
- Never add colorful drop shadows or diffuse neon glows around cards; rely on clean 1px strokes.
- Do not style secondary tier buttons with solid background fills; keep them hollow ghost buttons.
- Avoid using saturated backgrounds for table rows; the base surface must remain uniformly dark.
- Do not mix border radius tokens; buttons stay strictly at 8px and cards at 12px.
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 中尝试 
