Design a light-mode website section: precision engineering saas suspended against celestial particle fields and stark floating dark-mode consoles.
LAYOUT
The header spans the full max-width with an open horizontal distribution. The hero grid is a split 50/50 arrangement where the left column houses the announcement badge, display title, descriptive paragraph, paired CTAs, and inline security proofs. The right column integrates an intricate cosmic illustration overlaid with a floating dark workspace console.
PALETTE (use these exact hex values)
- #fbfbfe — Canvas White: dominant page background providing extreme contrast and airy breathability
- #0e111a — Midnight Charcoal: primary heading text, brand mark, and top-level navigation items
- #555a6d — Muted Slate: subheadings, feature descriptions, and secondary metadata labels
- #5c4cf4 — Electric Indigo: primary call-to-action fill and high-intent focus states
- linear-gradient(90deg, #5843ea 0%, #c026d3 52%, #f43f5e 100%) — Spectral Bloom: headline emphasis gradient echoing planetary atmospheric rim lighting
- #161926 — Console Deep Navy: floating app preview window container surface
- #1e2336 — Console Inset Layer: nested list panels, agent task rows, and input backgrounds
- #e6e8f0 — Border Subtle: 1px hairline borders for pills, secondary buttons, and divider rules
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 32px heading, 54px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, technical, and exceptionally clean, using Plus Jakarta Sans for its geometric modernism and slightly squared terminal curves. It projects high-velocity startup confidence while feeling engineered and reliable. Inter or General Sans are seamless fallbacks.
GEOMETRY & SPACING
Corner radii — cards 18px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 104px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through extreme luminance contrast rather than traditional card stacking. The dark terminal card floats over the light background using a rich, semi-transparent black shadow with high blur (0 24px 48px -12px rgba(14, 17, 26, 0.45)), visually pulling it forward off the celestial backdrop.
IMAGERY
The imagery combines photo-real planetary geometry with fine vector orbits, stippled point-cloud particle fields, and soft atmospheric glows in neon magenta and solar amber. Clipart, literal 3D humans, or flat vector illustrations would completely break the aerospace engineering aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ethereal, stippled celestial sphere with fine orbital vector rings set directly behind a crisp, floating dark-mode IDE chat terminal. To execute properly, anchor the card slightly off-center over the glowing rim of the planet so the light accent appears to illuminate the dark software interface.
MUST
- Use tight negative letter-spacing (-0.03em) on large display headlines to keep geometric type structured.
- Restrict vibrant color to the CTA button, keyword gradient, and celestial artwork to preserve editorial calm.
- Enclose the right-side interactive preview in high-contrast dark mode to simulate developer tools.
- Maintain an airy asymmetrical two-column layout with 48% copy width and 52% visual card width.
AVOID
- Do not apply dark mode across the full canvas; the stark contrast depends on the pure white base.
- Do not use generic drop shadows on the dark terminal card; rely on a deep 30-40px blurred ambient shadow.
- Never apply gradients to more than 2-3 consecutive words in the primary headline.
- Do not round primary buttons to full 999px pills; keep them strictly at 10px to avoid looking playful.
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 中尝试