Design a light-mode website section: tactile technical precision blending warm archival parchment with dark terminal nodes and high-density stippled graphics.
LAYOUT
The fold is split into an asymmetrical two-column composition with high horizontal tension. The left column houses the Product Hunt badge, massive 3-line headline, explanatory body paragraph, dual CTA buttons, and micro-trust metrics. The right column spans a complex visual cluster featuring floating code inspectors and pipeline diagrams overlapping the massive dithered orbital graphic.
PALETTE (use these exact hex values)
- #F9F6F0 — Canvas Parchment: Primary background tone across the viewport, giving an organic, paper-like foundation.
- #121316 — Terminal Obsidian: Dark container background for floating diagram modules, code inspectors, and primary CTA buttons.
- #111315 — Charcoal Black: Primary text headlines, navigation labels, and high-emphasis interface typography.
- #E54837 — Vermilion Accent: Brand focal color highlighting key headline phrases, primary logo geometry, and linear particle sweeps.
- #34C759 — Terminal Green: Success confirmation indicators, HTTP 200 statuses, match percentages, and trust badges.
- #E6DFD5 — Subtle Cream Border: Outlines on light badges, secondary buttons, and footer trust containers.
- #26292E — Obsidian Panel Border: Internal structural dividers and container borders on floating dark technical panels.
- #636870 — Muted Slate: Secondary description copy, breadcrumbs, code keys, and meta tags.
TYPOGRAPHY
Typeface Inter (or General Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 18px body-lg, 20px subheading, 64px display. Tracking -0.03em at display, -0.01em at body. The typographic pairing delivers an uncompromising, developer-first authority: precise, engineered, and stripped of marketing fluff. Inter provides an ultra-dense, legible armature for high-impact declarative statements, while JetBrains Mono gives tangible computational legitimacy to API payloads. System fonts like SF Pro or Arial can serve as fallbacks without disrupting hierarchy.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through dramatic tonal value separation rather than soft diffusion shadows. Dark obsidian cards (#121316) sit directly atop the warm parchment (#F9F6F0) canvas with microscopic 1px stroke borders (#26292E) and occasional crisp, low-spread ambient occlusion. Technical dotted connector lines give the impression of architectural layers hovering on a drafting board.
IMAGERY
The visual centerpiece is a high-density bitmap dithered sphere reminiscent of 1-bit stipple shading and retro computing raytracers. Sweeping parabolic line arrays and linear red velocity strokes slice beneath the sphere to suggest speed and telemetry. Photorealistic human photography or rounded flat vector illustrations are completely absent and strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an archival warm cream background against an enormous 1-bit dithered planetary sphere spliced with deep obsidian terminal modules. To replicate it, keep the canvas warm and paper-textured, render visual assets with algorithmic halftone stippling, and ground them with floating terminal cards. It fails if replaced with standard smooth gradients or a sterile pure white background.
MUST
- Retain the paper-like #F9F6F0 canvas background to preserve the distinct editorial warm-brutalist identity.
- Use solid #121316 backgrounds for technical telemetry and code cards to create deliberate contrast punches.
- Restrict vermilion (#E54837) to the pivotal final line of the display headline and key system nodes.
- Pair neo-grotesque sans display type strictly with fixed-width monospace code snippets in floating cards.
AVOID
- Do not switch the canvas to pure cold white (#FFFFFF); it destroys the vintage archival tone.
- Do not blur or antialias the dithered sphere into a standard gradient mesh or vector glow.
- Avoid applying heavy drop shadows; depth must rely on pure color contrast and crisp borders.
- Do not style technical API payloads in proportional sans fonts.
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 中尝试 
