Design a dark-mode website section: deep space trading cockpit glowing with soft neon sunset gradients against brushed carbon surfaces.
LAYOUT
The layout is split into two asymmetric columns: the left 35% contains marketing copy, primary CTAs, and a triple-bullet feature stack, while the right 65% showcases an expansive, fully fleshed-out trading terminal mockup. The app mockup itself follows a three-column interior layout: left sidebar for watchlist and live feeds, center wide area for active chart and swap controls, and right column for order book depth and metadata.
PALETTE (use these exact hex values)
- #090a0f — Space Base: Deepest canvas background behind floating application shells and editorial text
- #12131a — Cockpit Surface: Main dashboard surface background with soft inner illumination
- #171821 — Sub-Panel Surface: Internal panels, chart backgrounds, and transaction inputs
- #232530 — Panel Hairline: Divider lines between panels and input box contours
- linear-gradient(135deg, #e5684d 0%, #a44fe6 100%) — Gradient Sunset Primary: Signature CTA buttons, headline highlights, and active state indicators
- #9c57f7 — Neon Violet: Chart sparkline stroke, status dots, and active tab indicator underlines
- #34d399 — Ticker Mint: Positive price changes and uptrend percentage tags
- #f87171 — Ticker Rose: Negative price changes and sell-side ask ladder rows
- #ffffff — Text Primary: Hero headers, current asset prices, and primary labels
- #8e919e — Text Secondary: Paragraph descriptions, timestamps, volume labels, and inactive tabs
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 48px display. Tracking -0.03em for headlines, 0 for numbers. The typographic tone is ultra-precise, objective, and technological, utilizing a modern neo-grotesque sans-serif with geometric accents. Tight negative letter-spacing (-0.03em) on large titles delivers a polished silicon-valley aesthetic, while zero-tracking tabular numerals ensure immaculate vertical alignment in high-density data tables.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1440px container, tight density.
DEPTH
Depth is created strictly through tone layering and border luminosity rather than diffuse drop shadows. The deep #090a0f canvas recedes beneath an elevated #12131a app window, which itself houses recessed #171821 interactive modules. Subtle 1px borders with 10-15% white opacity simulate bevelled light catching the edges of glass panels.
IMAGERY
Visual imagery is confined to square-rounded avatar graphics (36px radius 8px) depicting 3D iridescent abstract orbs, gradients, and digital sculptures. Atmospheric background elements consist of ultra-wide, heavily blurred diagonal streaks of orange and violet light leaks that simulate speed and fluid liquidity.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the radiant sunset-to-violet gradient CTA button positioned alongside a comprehensive dark-mode trading cockpit with hair-thin #232530 module borders. It unifies consumer fintech editorial polish with institutional exchange data density.
MUST
- Reserve the fiery orange-to-purple gradient strictly for primary conversion moments and featured highlights.
- Use tabular lining figures (font-variant-numeric: tabular-nums) across all order book and balance metrics.
- Encase dense dashboard modules in subtle 1px borders (#232530) over slightly elevated backgrounds (#171821).
- Keep badge indicators pill-shaped (radius 9999px) with faint translucent backgrounds.
AVOID
- Do not use high-saturation solid fills for card backgrounds; maintain dark carbon hues.
- Do not clutter hero text with multiple gradient colors; limit the gradient to a single key word or phrase.
- Avoid thick, high-opacity borders; separators must remain hairline (1px) and dark slate (#232530).
- Do not use drop shadows on text or internal modules; rely entirely on 1px borders and tone steps for depth.
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 中尝试 
