Design a dark-mode website section: deep midnight canvas electrified by luminous blue plasma ribbons and ultra-refined glass tier cards.
LAYOUT
The layout is strictly symmetrical and centered along the vertical axis. It opens with an uppercase badge, followed by a primary header, short paragraph description, and billing toggle. The core tier matrix consists of four equally-spaced cards in a single row, anchored at the bottom by a full-span discovery banner matching the total width.
PALETTE (use these exact hex values)
- #060810 — Obsidian Deep: Foundational dark background color across the entire view
- #0C101B — Surface Tier Panel: Background fill for unselected pricing tier cards and lower banner
- #1B2234 — Border Subtle: Subtle stroke outlining default pricing cards and secondary buttons
- #3B66F5 — Electric Cobalt: Featured plan border glow, primary CTA button fill, and icon check badges
- #1A2750 — Cobalt Pill Surface: Background for 'MOST POPULAR' pill and active billing toggle state
- #6BE28E — Discount Mint: Text and mini-badge fill for the 'Save 20%' promo indicator
- #FFFFFF — Pure White: Main header, tier names, currency figures, and primary button labels
- #94A3B8 — Steel Gray: Descriptions, subtext, and feature list bullet labels
- #566176 — Muted Slate: Cadence indicators (/mo), secondary sub-labels, and trial disclaimers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 22px heading, 38px heading-lg, 44px display. Tracking -0.03em on display, 0.05em on caps pills. The typographic tone is technical, clean, and understatedly authoritative. Tight negative tracking on large weights delivers a crisp modern SaaS posture, while generous vertical leading on feature lists maintains readability. Standard neo-grotesques like Inter or Plus Jakarta Sans perfectly sustain this high-precision voice.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1120px container, comfortable density.
DEPTH
Depth is created purely through luminous edge definition and contrast against deep darkness rather than traditional dropshadows. The featured card appears closer to the viewer due to its vivid 1.5px cobalt outline and slightly brighter internal fill. Background depth is anchored by an organic wave of cyan/blue light cast behind the tier cards.
IMAGERY
The design does not use photographic imagery or photorealistic product renders. Its sole graphical accent is an abstract, silky 3D volumetric wave composed of glowing cobalt and cyan light flowing behind the cards. Any harsh geometric vector graphics or stock photography would severely compromise this aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the undulating ethereal blue plasma ribbon in the backdrop married to the crisp, matching cobalt border (#3B66F5) of the featured tier card. This establishes a continuous thread of light across the page. It fails if the ribbon is made too bright or opaque, which destroys the contrast of the dark glass cards.
MUST
- Reserve solid electric cobalt (#3B66F5) exclusively for the primary tier CTA and its highlight border.
- Maintain high contrast by keeping primary titles pure white (#FFFFFF) and supporting text in steel gray (#94A3B8).
- Keep card inner padding uniform at exactly 28px on all four sides.
- Use pill radius (999px) strictly on utility tags, badges, and toggle chips.
AVOID
- Do not outline all pricing cards with bright colors; exactly one card must carry the cobalt border.
- Do not use square corners; adhere strictly to 16px for containers and 8px for buttons.
- Do not make button labels entirely uppercase; use natural Title Case or Sentence Case.
- Do not use high-saturation backgrounds for secondary cards; keep them below #101524.
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 中尝试 
