Design a dark-mode website section: deep midnight canvas illuminated by precise engineering cyan and crisp modular pricing tiers.
LAYOUT
The layout is strictly centered and symmetrical. It starts with an uppercase cyan eyebrow tag, followed by a bold H1 display heading and two lines of muted explanatory subtext. The centerpiece is a four-column grid of pricing cards with consistent 20px gaps. Beneath the cards sits an enclosed four-column feature/trust strip, finished by a centered text anchor link.
PALETTE (use these exact hex values)
- #04080e — Obsidian Deep: Global background canvas fill
- #0a111a — Slate Card Base: Background fill for unfeatured pricing tiers and trust bar
- #1e293b — Subtle Border: Card outlines and divider strokes across unfeatured states
- #22d3ee — Active Cyan Glow: Featured plan border glow, primary CTA background, and badge text
- #3b82f6 — Electric Cobalt: Pro tier price highlight, secondary solid CTA button, and link arrow
- #ffffff — Pure White: Primary headings, tier titles, and card headers
- #94a3b8 — Muted Slate Text: Subheadings, billing frequencies, and card descriptions
- #64748b — Faint Body Text: Secondary reassurance body copy and list item details
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, 16px body-lg, 20px subheading, 24px heading, 38px heading-lg, 44px display. Tracking -0.02em on headings, 0.05em on badges. The typography is utilitarian, technical, and precise, mirroring architectural drafting and CAD software environments. Inter or Geist Sans provides crisp geometry at small sizes with high legibility. Tracking is kept tight on large prices to feel compact and premium.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved entirely without drop shadows. Hairline borders (#1e293b) distinguish surfaces against the deep canvas (#04080e), while the single featured card utilizes a perimeter border and faint cyan emission glow to draw the eye forward.
IMAGERY
No photographic imagery is present. Visual assets are strictly vector iconography rendered with 1.5px monoline stroke weights in cyan and slate, representing security shields, layered BIM files, user groups, and chat bubbles.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive signature is the neon cyan perimeter stroke framing the 'Team' tier card, paired with an aligned colored price block ($69) and high-contrast solid button, which anchors user attention amidst quiet obsidian neighbours.
MUST
- Reserve the vivid cyan border and glow exclusively for the single featured plan card.
- Maintain uniform height and padding (28px) across all four pricing cards in the desktop view.
- Pair the electric blue price token ($29) with a matching solid blue CTA for the Pro tier.
- Ensure checklist checkmark icons align with the first line of descriptive copy.
AVOID
- Do not give secondary or enterprise cards solid background fills that compete with featured tiers.
- Do not use multi-color gradients inside standard buttons; stick to flat cyan, blue, or transparent.
- Avoid colored backgrounds on standard checklists; use clean typography on dark slate.
- Do not exceed 12px border radius on cards; roundness should stay engineered, not bubbly.
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 中尝试 
