Design a dark-mode website section: sunlit ribbed glass meets deep terminal midnight for high-assurance developer tooling.
LAYOUT
The page concludes with a two-tier architectural layout. Tier one is an expansive 1280px floating banner card pairing marketing copy with a developer terminal. Tier two is an expansive dark 6-column footer grid (brand column, four category link columns, and a right-aligned infrastructure trust column) terminating in an ultra-clean legal metadata strip.
PALETTE (use these exact hex values)
- #080A0F — Midnight Slate Canvas: Deep ground canvas across the entire footer and outer page frame
- linear-gradient(90deg, #FDECE3 0%, #F5D3C4 28%, #D7B8C8 55%, #6B94BE 82%, #386C9F 100%) — Fluted Gradient Banner: Vibrant light-burst backdrop for the primary pre-footer conversion card
- #0E131F — Terminal Void: Dark code simulator surface nested inside the bright CTA card
- #0B0D13 — Ink Primary: High-contrast headings and primary text within the light CTA card
- #1E2738 — Terminal Border: Delicate stroke separating terminal preview and footer cards
- #F3F4F6 — Text Primary Light: Brand logo, category headers, and active links in the footer
- #8A92A6 — Text Muted Light: Secondary links, copyright notice, and explanatory descriptions
- #E05A47 — Alert Coral: Eyebrow kicker text in CTA and Platform category icon
- #22C55E — Signal Green: Operational status indicator dot and success checkmarks in CLI
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 44px display. Tracking -0.03em at display, 0 at body. The voice is confident, technical, and architectural. Inter provides razor-sharp editorial legibility at display sizes when tracked tightly, balanced against the utilitarian precision of JetBrains Mono in the CLI preview.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through luminance nesting rather than fuzzy drop shadows. The deep terminal simulator sits recessed into the vibrant CTA banner via crisp 1px borders (#1E2738) and subtle dark grounding shadows, while footer panels rely solely on subtle 1px slate boundaries against the canvas void.
IMAGERY
No photographic imagery is present. Visual rhythm relies on procedural 3D-styled vertical fluted glass texture, geometric linear vector icons, and an authentic monospace code block simulator.
SIGNATURE DETAIL — the thing that makes this design itself
The ribbed, fluted-glass gradient CTA card carrying an embedded dark IDE preview directly above a pitch-black technical directory footer. Misusing this means rendering the gradient without the fluted 3D ridges or omitting the high-contrast terminal console inset.
MUST
- Use ribbed vertical fluting to give physical texture to the gradient banner.
- Place a dark code terminal inside the light banner to bridge both color worlds.
- Pair each footer category heading with an explicit 16px outline icon.
- Maintain strict 12px vertical spacing between links in navigation columns.
AVOID
- Never substitute the fluted texture with a flat, non-textured linear gradient.
- Avoid making the terminal card inside the banner light-themed; contrast is required.
- Do not use high-saturation backgrounds for footer navigation columns.
- Never omit the leading terminal prompt icon on the primary CTA button.
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 中尝试 
