Design a light-mode website section: surgical developer minimalism framed by celestial stippling, warm parchment canvases, and deliberate crimson signal punctuation.
LAYOUT
The page transitions vertically from an asymmetrical hero/action zone to an expansive, structured developer footer. The upper half balances left-aligned typography and action groups against right-aligned celestial stipple art. Below a full-width hairline border, the massive brand wordmark sits opposite the subscription widget, leading directly into a balanced five-column directory grid concluded by a clean horizontal copyright and policy bar.
PALETTE (use these exact hex values)
- #FAF9F6 — Parchment Base: Primary full-canvas page background offering warm editorial comfort
- #FFFFFF — Pure Inset White: Background for form inputs, social badges, and system status widgets
- #111111 — Carbon Jet: Headlines, high-emphasis text, primary solid button surfaces, and bold icons
- #6B7280 — Graphite Muted: Secondary descriptors, navigation links, copyright details, and placeholder text
- #E7E5E0 — Hairline Rule: Section divider lines, input field strokes, and card borders
- #E03131 — Signal Crimson: Focal brand dot, category indicator bullets, and hero keyword accentuation
- #22C55E — Telemetry Emerald: Operational status pulse dots, verification checkmarks, and uptime indicators
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px heading, 112px display. Tracking -0.03em for display headings, +0.08em for uppercase labels. The type choice (Geist Sans match) speaks with the icy, disciplined efficiency of high-performance developer infrastructure. Tight tracking on huge display sizes delivers modern punchiness, while relaxed leading on body copy ensures technical clarity. It acts as an editorial bridge between classic Swiss modernist typography and modern silicon terminal tooling.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is completely non-tactile, eschewing box-shadows in favour of absolute planar discipline. Flat layering relies entirely on 1px stroke delineation (#E7E5E0) and micro-contrast between the warm canvas ground (#FAF9F6) and white surface insets (#FFFFFF). Overlapping stippled background graphics provide an illusion of cosmic depth without elevating DOM elements.
IMAGERY
Visual assets are strictly monochrome, precision-stippled line-and-dot engravings depicting planets, orbital paths, rings, and architectural spires. Halftone dot density creates grayscale gradient shading while maintaining razor-sharp vector definition. Conceptual imagery must evoke deep space navigation and precision infrastructure, entirely avoiding photo-realism or colorful 3D renders.
SIGNATURE DETAIL — the thing that makes this design itself
The singular typographic punctuation mark: an oversized brand display title grounded by a vibrant Signal Crimson period ('21st.dev'), mirrored rhythmically by crimson eyebrow status pings and celestial halftone orbital sketches.
MUST
- Retain the warm off-white canvas (#FAF9F6); pure #FFFFFF must only appear inside isolated inputs or badges.
- Restrict Signal Crimson (#E03131) strictly to punctuation dots, status bullets, and intentional focal typography.
- Pair technical iconography directly with navigation links to establish visual rhythm in multi-column lists.
- Maintain high contrast by rendering all primary headings and action surfaces in near-black (#111111).
AVOID
- Never apply colored background fills to major sections; the entire layout must rely on a continuous canvas tone.
- Do not use drop shadows; define structural boundaries strictly with 1px hairline borders (#E7E5E0).
- Avoid heavy, rounded friendly fonts; the aesthetic requires razor-sharp grotesque or neo-grotesque typefaces.
- Do not over-saturate with red; using crimson for entire buttons or banners ruins the surgical punctuation effect.
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 中尝试 
