Design a light-mode website section: precision developer ergonomics grounded in warm paper tones, deep pine typography, and stippled terminal data visualization.
LAYOUT
Structured around a 1280px max-width container with a persistent clean navbar anchored at the top. The hero splits cleanly into two columns: a left-aligned typography and action stack taking 45% of width, and a right-aligned composite terminal with floating callouts taking 55%. Vertical spacing follows relaxed 32px to 48px increments.
PALETTE (use these exact hex values)
- #FAFAF7 — Warm Canvas: Foundational page background giving an organic, paper-like warmth to technical content.
- #0B1B1F — Terminal Slate: Dark teal-tinted charcoal container for code payloads, API requests, and primary interactive card.
- #FFFFFF — Surface White: Background for floating feature badge cards and secondary button controls.
- #045242 — Pine Accent: Primary brand accent used on display typography highlights, eyebrows, and active indicators.
- #0F172A — Deep Carbon: Primary heading typography, dark pill button background, and logo wordmark.
- #596573 — Slate Muted: Body copy, subheadings, and secondary navigation link text.
- #2ED89D — Terminal Mint: Status success badge, code syntax values, and HTTP method indicator.
- #E05A36 — Safety Orange: Warning/compliance feature badge icon background to break monochrome rhythm.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.03em at display, 0.05em at uppercase micro. The typographic tone is authoritative, clean, and developer-literate. Plus Jakarta Sans provides a contemporary geometric presence with tight tracking that avoids corporate neutrality, while JetBrains Mono ensures code blocks feel crisp, executable, and accurate.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through high-contrast layering rather than heavy ambient blur. The dark terminal sits solidly against the warm base surface, while small white feature cards cast crisp, low-opacity shadows (0 10px 25px -5px rgba(0, 0, 0, 0.08)) to float visibly in front of it.
IMAGERY
Avoid photographic assets entirely. Imagery is constructed through high-density UI artifacts: monospaced code blocks, semantic state chips, vector connection curves, and subtle dot-matrix coordinate grids evoking automated cartography and logistics routing.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone split headline in carbon and deep pine green, tethered dynamically to a dark API payload via curved vector bezier lines that anchor in floating white feature cards.
MUST
- Use split-color headlines where the action clause is deep pine #045242 and the baseline is carbon #0F172A.
- Maintain fine algorithmic stipple dot backgrounds sparingly behind technical visual elements.
- Use curved 1px teal/gray bezier connector paths to tie floating UI components directly to relevant code rows.
- Keep terminal chrome minimal: omit standard OS window buttons in favor of a clean endpoint URL bar.
AVOID
- Do not use loud neon gradients; confine vibrancy strictly to syntax highlighting tokens like #2ED89D.
- Do not apply heavy drop shadows or 3D skeuomorphic gradients to navigation or CTAs.
- Never center-align the hero text or trust badges; layout must remain left-anchored.
- Avoid generic stock imagery or 3D glass morphism that obscures functional data models.
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. Try in DraPub 
