Design a dark-mode website section: pure obsidian canvas sliced by a razor-thin sapphire planetary horizon with glowing developer telemetry.
LAYOUT
The layout follows a disciplined single-column vertical stack with perfect central symmetry leading into a multi-column base dock. At the top sits the mono status badge, directly followed by the tight two-line display headline and centered paragraph. Next sits the button pair with proof indicators, anchored at the bottom by an edge-to-edge curved horizon curve cradling a 4-column glass container.
PALETTE (use these exact hex values)
- #000000 — Void Canvas: Absolute background canvas delivering maximum contrast for glowing elements
- #38BDF8 — Horizon Arc Cyan: Bright neon cyan core highlighting the crest of the planetary horizon curve
- #1D4ED8 — Deep Cobalt Glow: Diffuse atmospheric bloom radiating downward and outward behind the horizon
- linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) — Primary Gradient Button: High-emphasis primary CTA button background with blue-to-purple shift
- linear-gradient(90deg, #C084FC 0%, #60A5FA 100%) — Headline Gradient Text: Gradient clipping fill on 'Production Confidence' display text
- #FFFFFF — Pure White: Highest emphasis typography including 'Ship AI with' and primary action labels
- #94A3B8 — Muted Slate: Supportive body copy, micro-trust checkmarks, and secondary badge text
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 17px body-lg, 20px heading, 64px display. Tracking -0.03em on display, -0.01em on body. The typography speaks with authoritative, technical clarity tailored for enterprise infrastructure engineers. Inter delivers ultra-clean legibility at extreme display sizes, while JetBrains Mono injects developer DNA through subtle command-line cues. For production builds without Inter, Geist or SF Pro Display offer an identical geometric-grotesque tone.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 16px gaps, 96px between sections, 1120px container, airy density.
DEPTH
Elevation is achieved entirely without drop shadows, using atmospheric light layers instead. The deepest baseline is total pitch black, raised by a glowing atmospheric cyan-blue aura that backlights the foreground components. Translucent surfaces use backdrop blur (16px) and delicate 1px light strokes on upper edges to imply glass catching overhead light.
IMAGERY
No photographic or illustrative raster imagery is present; the interface relies exclusively on astronomical vector lighting aesthetics. The dominant graphic element is the mathematically smooth planetary curve mimicking Earth's limb viewed from orbit. Icons are ultra-crisp single-color thin vector glyphs enclosed in 36px translucent circular wells.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the glowing planetary horizon arc positioned directly behind the bottom feature dock. This razor-sharp cyan curved crest bleeds into a diffuse cobalt atmospheric aura, giving the impression that the user interface is suspended in low-Earth orbit. Misusing it involves making the curve straight, flattening the glow into a solid stroke, or using warm chromatic tones.
MUST
- Keep the absolute canvas pure #000000 to prevent muddy atmospheric bloom rendering.
- Restrict bright color accents strictly to the planetary horizon curve and CTA gradient.
- Maintain high contrast by keeping the top headline line crisp solid #FFFFFF.
- Use subtle 1px translucent borders (rgba(255,255,255,0.12)) for glass dock boundaries.
AVOID
- Do not use solid opaque gray backgrounds; use blurred alpha transparency over black.
- Never apply warm accent colors like orange, red, or yellow to this palette.
- Avoid flat straight horizontal dividers; the cosmic curve provides essential identity.
- Do not set display typography lighter than 600 weight; it loses grounding against dark space.
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 中尝试