Design a dark-mode website section: mission-critical engineering telemetry framed by deep space navy cards and luminous editorial serif typography.
LAYOUT
The page follows a dual-column asymmetrical comparison architecture. The left column (roughly 30% width) lists problem statements sequentially as stacked rows. The right area (70% width) is encased in a single telemetry frame holding an editorial headline, a 3-column by 2-row feature grid, and an aligned bottom metric KPI rail.
PALETTE (use these exact hex values)
- #030712 — Void Deep Navy: Global application background framing the interface modules.
- #071124 — Telemetry Slate Card: Large right-hand solution container and primary framing plane.
- #0d1b33 — Module Surface: Interactive feature module backgrounds across both problem and solution zones.
- #1a3258 — Avionics Border: 1px hairline borders delineating cards, containers, and icon circles.
- #38bdf8 — Cyan Telemetry: High-visibility metric statistics, brand mark, and category kicker titles.
- #0ea5e9 — Connector Blue: Focal bridge node circular button between problem and solution blocks.
- #f1f5f9 — Luminous White: Headlines, card titles, and high-priority textual copy.
- #7e95b0 — Aero Muted Slate: Sub-captions, metadata, card descriptions, and context paragraphs.
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif, GT Super, Playfair Display), weights 400. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 28px heading, 42px display. Tracking -0.015em at display. The typography balances humanistic intellectual authority with aerospace instrumentation. Newsreader or an equivalent editorial serif provides gravitas to difficult engineering challenges, while Inter keeps telemetry items legible at 11-13px. For production, substitute with Canela or Instrument Serif for headers and Geist for data.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered flat-architectural rather than volumetric. Layers are communicated solely through 1px border luminance (#1a3258) and stepped background dark-slate tones (#030712 to #071124 to #0d1b33), accompanied by subtle cyan back-glows.
IMAGERY
Photography is restricted to silent, dark-toned real-world context: a photographic Earth curve visible through the void at the bottom right corner. Avoid illustrated clip-art, cartoonish 3D shapes, or bright stock photography.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric 'Friction-to-Telemetry' cockpit layout: an uncontained left-hand stack of problem rows linked via a glowing circular arrow bridge into an enclosed, multi-card command console complete with bottom KPI metrics.
MUST
- Pair high-contrast transitional serif headlines strictly with technical sans-serif metadata and copy.
- Use 1px border outlines (#1a3258) to define cards rather than diffuse drop shadows.
- Reserve vibrant cyan (#38bdf8) for quantitative data metrics, icons, and micro-kicker labels.
- Maintain strict asymmetrical balance between the raw problem column and the enclosed solution cockpit.
AVOID
- Do not use warm tones, oranges, or saturated purples; adhere strictly to deep oceanic blues and cyan.
- Never make problem cards more visually luminous than the solution module cards.
- Avoid thick rounded button borders over 1px unless specifically styling the circular transition bridge.
- Do not render body text in serif; serif is reserved exclusively for display and level-1 headings.
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 中尝试 
