Design a dark-mode website section: deep-space developer infrastructure calibrated with precision cyan glows and razor-sharp tiered card surfaces.
LAYOUT
The layout follows a centered vertical spine. It initiates with a category chip badge, drops down to a 2-line 48px hero lockup, shifts to a toggle controller, expands into a four-column grid (equal 1fr distribution with 20px gutter), and resolves into a horizontal 3-item trust bar.
PALETTE (use these exact hex values)
- #05070C — Obsidian Ground: Global application canvas and deep background wrapper
- #0B1017 — Deck Surface: Background fill for standard pricing cards and badge containers
- #182232 — Hairline Slate: Inert card perimeter borders and disabled button strokes
- #00F2FE — Electric Cyan: Featured card rim highlights, active toggles, badge stars, and icons
- #1A6CFF — Azure Glow: Lower half of highlight gradient borders and halo drop-shadows
- linear-gradient(90deg, #00D2D3 0%, #1A73E8 100%) — Highlight CTA Gradient: Fill for primary highlighted card action button
- #FFFFFF — Signal White: Hero display headers, plan names, and primary tier price digits
- #8E9BAE — Muted Slate: Descriptive tier summaries, interval suffixes, and inactive check items
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 48px display. Tracking -0.03em for display, -0.01em for UI labels. The typographic tone is technical, cold, and executive. Inter (or Geist) provides geometric neutrality that feels native to modern developer platforms and API-first tooling without extraneous ornamentation.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is strictly non-skeuomorphic and photographic-free. Elevation relies on subtle surface lightness delta between level 0 (#05070C) and level 1 (#0B1017), amplified solely on the featured card by an external 0 0 28px rgba(0, 242, 254, 0.15) cyan ambient halo.
IMAGERY
No photographic imagery or abstract 3D renders are permitted in this layout. Visual interest is generated purely by typography, precise vector iconography (stroke width 1.5px), pill geometry, and the localized cyan glow around the featured tier.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-layer neon isolation of the 'Scale' card: a continuous cyan-to-azure hairline gradient border combined with an ethereal matching cyan drop-glow that floats the card ahead of its neighbors without altering its physical dimensions.
MUST
- Reserve the cyan-to-azure gradient border solely for the single featured tier card.
- Maintain strict vertical baseline alignment across all four pricing values ($29, $99, $299, Custom).
- Keep card background tones within 5% luminance difference from the main canvas for subtle depth.
- Use 10px corner radii on all buttons to maintain consistent internal hierarchy inside 16px cards.
AVOID
- Never apply colored solid backgrounds to cards; surfaces must remain deep obsidian.
- Do not allow borders on secondary cards to exceed 1px or 20% opacity.
- Never add drop shadows or borders to the trust bar badges at the bottom.
- Avoid warm accent tones; stick strictly to cyan, sky blue, and neutral slate.
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 中尝试 
