Design a dark-mode website section: deep nocturnal navy with precision-machined cobalt telemetry beacons for high-stakes enterprise compliance.
LAYOUT
The viewport is vertically stacked into three clean bands: hero headline with centered toggle, four-column tier comparison grid, and a bottom reassurance bar. The 1240px grid splits equally into four 280px-wide cards separated by 24px gutters. Directly below the deck, a matching 1240px wide pill-bordered enclosure arrays four trust badges horizontally in a symmetrical 1x4 layout.
PALETTE (use these exact hex values)
- #06090e — Abyssal Canvas: Global application backdrop providing deep contrast for glowing accents.
- #0a0f18 — Card Surface: Default card background fill for standard tier enclosures and trust bar.
- #0c1322 — Featured Card Surface: Slightly elevated dark navy base for the highlighted Professional tier.
- #131c2b — Border Subtle: Structural containment border for default cards, pills, and dividers.
- #38bdf8 — Electric Cyan: High-visibility focal points including headline spans, check icons, and active pills.
- linear-gradient(90deg, #1d8cf8 0%, #38bdf8 100%) — Professional CTA Gradient: Primary conversion button gradient exclusively reserved for the most popular tier.
- #34d399 — Discount Mint: Positive incentive copy indicating annual billing percentage savings.
- #ffffff — Text Pure White: Primary tier titles, large price figures, and primary headlines.
- #8f9cae — Text Slate: Explanatory subtext, tier microcopy, and bulleted feature item labels.
- #55657e — Text Muted: Frequency qualifiers like '/mo' and billing periodicity labels.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 36px heading, 48px display. Tracking -0.025em at display, 0 at body, 0.05em at caps. The typographical tone is cold, authoritative, and enterprise-grade, mirroring institutional financial audit standards. Inter (or its grotesque sans peers) gives numerical data tabular stability while keeping large display headings punchy and compact. Using tight negative tracking (-0.03em) on large figures lends the prices a confident, architectural presence.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created via luminance hierarchy and delicate border glow rather than muddy drop shadows. Standard cards blend flatly into the #0a0f18 layer with a hairline edge (#131c2b), while the promoted tier floats forward using a bright 1.5px cyan perimeter (#1e6beb) accompanied by a low-opacity cyan radial bloom.
IMAGERY
This interface avoids illustrative or photorealistic artwork entirely, leaning solely on technical iconography and typographical hierarchy. Icons are hairline stroke vectors (1.5px stroke width, 20-24px scale) enclosed in soft geometric bounds (shield, padlock, checklist, clock). Any photographic splash would disrupt the clinical, audit-ready software aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The singular focal move is the radiant blue-bordered 'Professional' container featuring a matching cyan gradient button, which shatters the otherwise monotone deep-slate grid and instantly designates the default commercial path. Misusing it involves applying that vibrant border to multiple cards or tinting the card's entire internal canvas in bright blue, destroying the darkroom aesthetic.
MUST
- Reserve the saturated cyan gradient CTA exclusively for the single highest-value conversion tier.
- Maintain high optical contrast between the tier price ($3,500) and its interval label (/mo) using #55657e.
- Ensure every checkmark icon uniformly uses the vibrant electric cyan (#38bdf8) across all cards.
- Keep the trust indicators encapsulated within their dedicated four-column muted tray (#080c14).
AVOID
- Do not give secondary tiers solid bright button fills; keep them dark outline or ghost states.
- Never apply colored borders to more than one card simultaneously; prominence must remain singular.
- Do not use sharp 0px or pill 999px radii on tier cards; cards must strictly observe the 16px standard.
- Avoid colored checkmarks that vary by plan tier; all bullets must use identical #38bdf8 indicators.
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. Try in DraPub 
