Design a dark-mode website section: deep institutional obsidian surfaces framed by high-frequency electric cyan glowing precision borders.
LAYOUT
The page follows a centralized, symmetrical vertical stack beginning with a centered header module (eyebrow, display h1, explanatory subhead, and cadence switcher). Below this sits a rigid 4-column desktop pricing grid displaying the four tiers horizontally aligned. The sequence terminates with a four-column horizontal trust and compliance indicator bar anchored directly below the cards.
PALETTE (use these exact hex values)
- #02040a — Canvas Void: Primary background canvas creating an infinite, high-contrast trading floor environment
- #070c17 — Card Surface: Base fill for pricing cards with subtle translucent tinting
- #141e2e — Card Border Inactive: Quiet structural boundary separating non-highlighted tiers
- #0084ff — Cyan Glow Accent: High-visibility accent used for the recommended card stroke, badge, and primary CTA
- linear-gradient(180deg, #0084ff 0%, #0055d4 100%) — Accent Gradient CTA: Gradient fill applied to the primary 'Start trading' button
- #f8fafc — Text Primary: Main headings, tier titles, numeric price displays, and CTA labels
- #94a3b8 — Text Secondary: Card descriptions, subheadings, feature list bullets, and metadata
- #475569 — Text Muted: Price duration suffixes like /mo and secondary toggle label
- #064e3b — Badge Discount Green: Background pill fill for the 'Save 20%' annual incentive
- #34d399 — Badge Green Text: Text and icon accent on annual savings incentive badge
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 20px subheading, 24px heading, 32px heading-lg, 40px display. Tracking -0.02em at display, 0 at body. The typographic tone is ultra-precise, quantitative, and institutional. A neutral grotesque like Inter or Geist Sans removes any emotional friction, leaning into the objective authority expected by algorithmic hedge funds and quantitative traders. Monospace-like numerical discipline is maintained across all financial figures.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely via luminance contrast and subtle translucent dark-glass borders rather than heavy blur drop shadows. The featured 'Trader' card uses a faint radial cyan outer glow (opacity ~0.15) to appear hovering slightly in front of the dark background plane. All other cards remain flatly recessed with razor-thin 1px dark slate borders.
IMAGERY
No photographic imagery or abstract 3D illustrations are present. Visual hierarchy is maintained exclusively through clean geometric SVG icons (checkmarks, lock, shield, bolt, headset) rendered in 1px stroke weight using cool grey or cyan tints.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the razor-thin electric blue border surrounding the 'Trader' tier, combined with a deep dark-glass card body that commands focus without disturbing the disciplined dark grid. Misusing this means applying colorful halos to multiple cards, which instantly destroys the clarity of choice.
MUST
- Reserve luminous cyan (#0084ff) exclusively for the single recommended plan and its CTA.
- Maintain high tabular contrast by rendering all monetary figures in 32px white Inter with muted /mo suffix.
- Ensure each feature item in lists uses identical checkmark glyphs with 12px horizontal offset.
- Keep standard card outlines dark and thin (1px #141e2e) to avoid visual noise across 4 columns.
AVOID
- Do not add glowing colored borders to more than one card simultaneously.
- Do not use saturated backgrounds; surfaces must remain near-black (#02040a to #070c17).
- Do not introduce multi-colored badges; maintain monochromatic cyan except for the green savings tag.
- Do not allow tier cards to vary in height; equalize card bottoms by matching CTA anchor points.
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 中尝试 
