Design a dark-mode website section: deep obsidian developer canvas activated by luminous stippled particle gradients and high-contrast callout tiles.
LAYOUT
The top section is an asymmetric CTA grid with a 60/40 width split: the dominant dark card spans the full left column, while two cards (one inverted mint, one dark with magenta stipple) stack vertically on the right. Below, a 64px gap introduces the 5-column footer with brand identity and email capture on the left and four clean navigational sitemap columns on the right. The page terminates in a single-row copyright and legal link baseline.
PALETTE (use these exact hex values)
- #06080e — Canvas Obsidian: deep background canvas for the entire page and base footer layout
- #0d101a — Card Surface Dark: fill for dark CTA cards, input controls, and icon badge containers
- #ddf5ec — Card Surface Inverted: high-contrast light mint surface for key feature callout tile
- #1a2233 — Card Border: subtle 1px boundary stroke outlining dark cards and input fields
- #3b82f6 — Primary Blue: hero button background, headline emphasis text, and platform category headers
- #e1499b — Halftone Magenta: dot matrix stipple field and icon accent in production card
- #7bc6b5 — Halftone Mint: dot matrix grid field fading across the inverted card background
- #ffffff — Text Primary White: primary headlines, active links, and brand title in dark mode
- #0d1618 — Text Inverted Dark: headings and body copy inside the inverted mint card surface
- #8b97ab — Text Muted Blue-Grey: body copy, supporting descriptions, input placeholders, and inactive footer links
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 20px heading, 36px display. Tracking -0.02em at display, +0.08em at micro uppercase. The typography communicates engineering rigor, speed, and modern infrastructure through an unadorned neo-grotesque sans-serif. Tight tracking at display sizes commands executive authority, while generously spaced micro-uppercase labels emulate command-line interface parameters. Inter or Geist serve as exact drop-in matches.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated purely through planar layering and 1px border strokes (#1a2233) against the #06080e canvas. Drop shadows are completely absent. High-contrast tonal inversion (the mint card) creates perceived foreground pop without physical z-axis simulation.
IMAGERY
Visual interest is generated via algorithmic halftone dot arrays and stipple matrix fields rather than raster photography. The dots expand and fade linearly into the card borders in cyan and magenta. Organic, hand-drawn, or photographic elements are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric juxtaposition of an inverted pastel mint card nestled alongside dark obsidian cards featuring fading halftone stipple fields. Recreate it by placing one pale mint (#ddf5ec) card with dark text adjacent to a dark (#0d101a) card containing a corner-anchored dot matrix pattern.
MUST
- Use exactly 16px border-radius across all card modules to maintain visual consistency.
- Pair dark card containers with 1px subtle strokes (#1a2233) for elevation rather than drop shadows.
- Keep dot-matrix particle fields strictly aligned to card corner quadrants to avoid obscuring text.
- Limit the high-contrast light mint card surface (#ddf5ec) to exactly one element in a grid.
AVOID
- Do not introduce blur-heavy or soft drop shadows; depth must remain flat, sharp, and bordered.
- Do not set footer body text to pure white; keep secondary typography locked to muted blue-grey (#8b97ab).
- Never invert the entire screen; light surfaces exist solely as contained card accents.
- Do not mix rounded pill buttons with square cards; keep button radii strictly proportional at 8px.
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 中尝试 
