Design a dark-mode website section: deep oceanic dark mode lit by layered frosted glass and precision teal and ember gradients.
LAYOUT
Asymmetric 12-column hero split roughly 55/45. Left column stacks the announcement pill, display headline, body paragraph, twin CTA buttons, and a bottom trio of feature icons. The right column is reserved for the large 3D glass emblem framed by orbital ellipses with radial label anchors.
PALETTE (use these exact hex values)
- #04090D — Deep Oceanic Black: Primary background canvas, deep and atmospheric void
- #27A58E — Teal Core Accent: Primary action button fill, headline emphasis, brand mark highlight
- #1B4F48 — Deep Teal Subdued: Sub-headline text contrast, secondary badge fills, muted border outlines
- #E85923 — Ember Flare: Orbital node accents and ambient atmospheric glow along the right boundary
- #FFFFFF — Primary Text White: Hero headline major text, primary logo mark typography
- #94A3B8 — Muted Secondary Text: Body copy descriptions, secondary button text, satellite orbit annotations
- #0B191E — Glass Surface Muted: Secondary button background, feature card icon backings
- #1E3339 — Border Subtle: Subtle stroke lines for ghost buttons, announcement badge, and orbital traces
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display,Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 32px heading, 58px display. Tracking -0.03em at display, 0 at body. Clean, technical, and institutional yet ultra-modern. The neo-grotesque sans (Inter Display or Plus Jakarta Sans match) communicates enterprise-grade algorithmic precision without appearing cold, aided by tight tracking (-0.03em) on headlines and generous line heights on supporting body text.
GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical light transport rather than drop shadows: physical multi-layer glass reflection, caustic rim-lighting, and ambient radial gradient halos glowing behind 3D elements. Interactive components use hairline 1px borders (#1E3339) over near-black backdrops to stand apart from the canvas.
IMAGERY
A custom 3D isometric stack of rounded glass plates containing an embedded neon teal logo glyph. The glass shows realistic internal dispersion, soft green-cyan scattering, and reflects an ember glow from the far-right hemisphere. Flat clip art or standard flat vector icons would immediately break the system.
SIGNATURE DETAIL — the thing that makes this design itself
The three-tier floating glass squircle sandwich refracting a glowing teal core against an opposing ember backdrop. Recreate with three rounded 3D acrylic slabs, subtle edge reflections (#A7F3D0), internal glowing geometry, and an ambient warm-cool gradient field.
MUST
- Keep background canvas in extreme deep teal-navy (#04090D) to let caustics glow.
- Split display title color strictly between white for nouns and subdued teal for key product descriptor.
- Use pill radius (999px) strictly for announcement tags and 8px squircle radii for buttons.
- Maintain fine hairline strokes (1px #1E3339) on ghost buttons and ambient orbital rings.
AVOID
- Do not use flat vector illustrations; this design relies entirely on realistic 3D glass refraction.
- Do not use solid opaque card backgrounds; surfaces should bleed into the ambient glow.
- Never use pure bright primary blue; maintain a maritime teal (#27A58E) color palette.
- Do not increase button border radius beyond 8px for rectangular actions.
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 中尝试 
