Design a light-mode website section: precision aerospace telemetry meets crisp editorial enterprise software on an immaculate polar canvas.
LAYOUT
The hero uses an asymmetric 12-column grid: columns 1 through 5 house the corporate masthead, three-line editorial statement, platform premise, dual CTA buttons, and the three-column metric ticker. Columns 6 through 12 host the dynamic telemetry stage containing the lunar body, navigational coordinate ribbons, and floating project cards, anchored below by the wide 'Program Health' console.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Polar White: Root page canvas and floating telemetry cards.
- #F8FAFC — Deck Tint White: Background fill for floating tabs, metric cards, and badge insets.
- #121620 — Cosmic Obsidian: Main headlines, active stat numbers, and dominant branding logotype.
- #5A6679 — Atmospheric Slate: Body copy, supporting captions, and secondary action button labels.
- #304FFE — Ion Blue: Primary action button, active pill indicator, and primary gauge fill.
- #60A5FA — Telemetry Cyan: Secondary progress markers and particulate orbital ring nodes.
- #10B981 — Nominal Mint: Successful forecast rate, budget status bar, and active solar array indicators.
- #EF4444 — Critical Coral: Risk telemetry progress bar and habitat node warning indicators.
- #E2E8F0 — Orbit Border: Outlines for secondary buttons, floating card edges, and radar coordinate rings.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 26px heading, 56px display. Tracking -0.03em at headline, +0.08em at uppercase labels. The typography is rigorously technical yet modern, relying on Inter's tight geometric forms to convey engineered precision and mission reliability. The punchy -0.035em tracking on the 56px display headlines gives off an authoritative, architectural stance. Clean uppercase sub-labels provide clear visual contrast against standard sentence-case metric titles.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered through delicate, multi-stop drop shadows (0 12px 32px -4px rgba(18, 22, 32, 0.08)) that elevate solid white operational cards above an organic, generative particulate cloud. Border lines of 1px #E2E8F0 prevent floating tiles from blurring into the background wash. Flat 2D vector UI elements sit intentionally over realistic photographic lunar textures.
IMAGERY
The imagery combines a photorealistic grayscale Moon orthographic projection with generative stippled cyan-blue watercolor fluid simulations. Overlay graphics consist of precise technical orbital lines, dotted crosshairs, and glowing telemetry waypoints. Avoid cartoonish space art or sci-fi neon blooms; all visuals must feel like actual orbital mechanics software.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an immaculate white, razor-sharp enterprise telemetry UI with an organic, particulate cyan-and-ultramarine cosmic ink splash. To implement correctly, place the photographic moon at the visual nexus while allowing dotted vector trajectories to breach the edges into floating white metric cards. It fails if the background splash looks like random tie-dye rather than controlled particulate fluid simulation.
MUST
- Use period-terminated triple headline statements to establish architectural finality and gravitas.
- Isolate complex data dashboards onto crisp white cards layered over the abstract blue background wash.
- Set data labels and section eyebrows in tracked uppercase (0.08em) at 11px or 12px.
- Anchor circular orbital dotted nodes with precise 1px borders and colored status rings.
AVOID
- Do not switch the canvas to dark mode; this identity relies on pure white scientific clarity.
- Never use generic black shadows; employ low-opacity tinted slate shadows (#121620 at 6%).
- Avoid solid bright colored card backgrounds; keep surfaces clean white with chromatic detail in the meters.
- Do not mix rounded pill buttons with sharp rectangular cards; preserve consistent 8-12px radii.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试