Design a dark-mode website section: deep oceanic darkness illuminated by luminous teal gradients and precision isometric glass planes.
LAYOUT
The section employs an asymmetric bento grid on top, pairing a wide 60% hero CTA card on the left with two stacked 40% capability cards on the right. Below, a 64px gap transitions into a comprehensive multi-column footer layout. The footer anchors brand metadata and social pills on the far left, four navigational category columns in the center, and a newsletter subscription block on the right, terminating in a horizontal legal divider bar.
PALETTE (use these exact hex values)
- #050811 — Midnight Obsidian Base: Master canvas background providing deep contrast across all modules
- #091021 — Navy Card Surface: Background fill for elevated interactive containers and feature cards
- #1A263D — Hairline Border Slate: Defining card edges, input outlines, and subtle footer dividers
- linear-gradient(100deg, #18A0FB 0%, #2DE2B6 100%) — Electric Gradient: Primary conversion button fills and primary visual focal points
- #38BDF8 — Cyan Glow: Text emphasis, accent iconography, and secondary interactive focus states
- #22C55E — Cyber Green: Security badges, isometric glowing edges, and status markers
- #FFFFFF — Optic White: Primary headings, brand marks, and high-emphasis labels
- #94A3B8 — Muted Slate: Secondary descriptors, navigation links, and body copy
- #475569 — Dark Steel: Tertiary metadata, copyright lines, and inactive input placeholders
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 18px subheading, 22px heading, 38px display. Tracking -0.03em at display, 0 at body. The voice is confident, hyper-modern, and technically authoritative, conveyed through a sharp neo-grotesque sans-serif with geometric precision. Tight negative letter-spacing (-0.03em) on large titles delivers a compressed, engineered feel, while generous 1.6 line height on slate body copy guarantees clarity. Inter or Geist are ideal zero-cost drop-ins that perfectly capture this modern AI-developer aesthetic.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 12px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through ambient bioluminescence and layered opacity rather than traditional drop shadows. Translucent glass planes with colored rim lighting (#18A0FB and #2DE2B6) hover over pitch-black card canvas to suggest 3D space. Internal surface differentiation relies on hairline 1px borders (#1A263D) and subtle radial light leaks.
IMAGERY
Abstract isometric 3D illustrations featuring layered frosted glass plates with glowing cybernetic edges. Supportive atmospheric backdrops include faint dotted wave grids and radar sweep line graphics in cyan and emerald. Photography of realistic human environments is strictly avoided in favor of precise digital-native artifacts.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the pairing of an electric cyan hand-drawn underline scribble beneath an emphasized display word with a dual-tone isometric glowing glass stack. To use it properly, reserve this hand-drawn gesture for exactly one key emotive word per page view to puncture the hyper-clinical digital UI with calculated human warmth. It is commonly misused by applying handwritten marks to multiple words or rendering them in mismatched, non-brand colors.
MUST
- Keep borders razor-thin at 1px using dark slate (#1A263D) to avoid harsh geometric visual cages.
- Reserve the vivid cyan-mint gradient strictly for high-value interactive calls to action.
- Use generous 24px corner radii on all major hero and feature card containers.
- Maintain high typography contrast by setting headings to #FFFFFF and descriptions to #94A3B8.
AVOID
- Never introduce warm colors like orange, red, or yellow outside of severe error states.
- Do not apply solid bright borders around cards; only use low-opacity tinted borders.
- Avoid flat, fully opaque grey backgrounds; keep surfaces anchored in saturated navy tints.
- Do not use sharp 0px or 4px boxy corners on primary feature bento cards.
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 中尝试 
