Design a dark-mode website section: deep midnight canvas illuminated by architectural sunset glows and floating frosted glass interfaces.
LAYOUT
The header spans horizontally with brand on the left, central text-link navigation, and auth actions on the far right. The main hero uses an asymmetrical two-column arrangement: the left column holds a badge, massive headline, descriptive paragraph, dual CTAs, and trust proof. The right column showcases an angled, hovering glass interface superimposed on an illuminated architectural scene, followed by a full-width 4-column metric strip anchored below.
PALETTE (use these exact hex values)
- #0b0e1a — Midnight Base: Deep structural backdrop across the primary canvas and header background
- #f4623a — Sunset Bloom: Dramatic atmospheric backlighting on the right edge highlighting the architectural visualization
- #3d1329 — Crimson Violet: Midtone atmospheric transitional glow blending dark space into warm light
- #ffffff — Solid White: Primary hero display headings, strong labels, and solid button surfaces
- #a3a8be — Muted Slate: Secondary descriptive body copy, nav links, and metadata descriptions
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Satoshi, General Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 36px heading, 64px display. Tracking -0.03em at display, -0.01em at body. The geometric sans-serif (Plus Jakarta Sans match) communicates modernist architectural precision, clarity, and computational rigor. Its tall x-height and tight display tracking evoke high-end industrial design and contemporary editorial layouts. For implementation, Inter or Satoshi serve as exact functional substitutes.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 12px, buttons 999px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through atmospheric lighting and 3D spatial separation rather than traditional box-shadows. The main product UI floats forward in perspective over an architectural model, backlit by an intense directional orange glow. Frosted glass panels use interior backdrop-filter blur (16px to 24px) combined with faint 1px white border edges to separate layers.
IMAGERY
Features realistic 3D architectural CGI paired with physical miniature model aesthetics, washed in warm low-angle golden hour lighting. The visual contrasts precision software glass planes with tangible modernist buildings and tiny model trees. Conceptual illustrations, cartoon vectors, or generic SaaS stock photography are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the floating, perspective-tilted frosted glass application window hovering directly above a sunset-lit physical architectural model. It creates a seamless metaphorical fusion between software intelligence and built physical space. It must always combine delicate transparency with a warm directional light source from behind.
MUST
- Use solid white for primary CTA buttons to stand out against rich dark gradients.
- Apply subtle 1px specular white borders (rgba(255, 255, 255, 0.16)) to glass panels.
- Pair deep cool indigo backgrounds with warm sunset amber glow on imagery.
- Ensure display headlines stay strictly left-aligned and tightly tracked at -0.035em.
AVOID
- Do not use saturated primary colors for buttons; stick strictly to solid white.
- Do not introduce sharp 90-degree corners on interactive UI elements or cards.
- Avoid flat black backgrounds; always incorporate subtle cosmic indigo and plum tones.
- Do not omit edge highlights on translucent glass panels.
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 中尝试 
