Design a dark-mode website section: precision enterprise legal tech meeting quiet forest-green editorial prestige with api-first developer confidence.
LAYOUT
The composition is split into two primary zones: a floating high-contrast light CTA module on top, resting over a full-width dark forest foundation. The CTA block uses an asymmetric 55/45 split (headline and copy on the left, interactive API illustration on the right). Below it, the footer spans horizontally with a 5-column navigation grid flanked by an oversized left-aligned logo unit and a right-aligned newsletter capture box.
PALETTE (use these exact hex values)
- #061F24 — Deep Midnight Pine: Primary background for the complete footer system and sub-footer dividing rule.
- #FCFDFB — Canvas Milk: Background surface for the floating elevated CTA card and pill badges.
- #0D2529 — Code Terminal Slate: Surface for the interactive API payload window illustration.
- #056A42 — Forest Spruce: Primary CTA fill, active button states, and brand logotype serif flourish.
- #2EE59D — Vibrant Mint: Badge indicator dot, status dots (200 OK), and input button accents.
- #111827 — Off-Black Ink: Dominant high-contrast typography for headline display text.
- #5B6B68 — Muted Slate: Subtitles, body copy inside the light banner, and secondary metadata.
- #8EA6A2 — Muted Mint Gray: Footer navigation links, copyright text, and form helper notices.
- #FFFFFF — Boreal White: Footer branding, primary button text, and heading text against dark surfaces.
TYPOGRAPHY
Typeface Inter Display (or SF Pro Display, Geist, General Sans), weights 400/500/600/700. Sizes 11px caption, 11px subheading, 13px body-sm, 14px body, 16px body-lg, 24px heading, 48px display. Tracking -0.03em display, 0.05em caps. The typography balances technical developer rigor with centuries-old legal prestige. Inter Display provides clean, unpretentious legibility for infrastructure copy, while the unexpected insertion of an elegant editorial italic serif evokes traditional parchment, law reviews, and executive gravitas. When self-hosting, pair Inter with Instrument Serif or Newsreader.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created using layering rather than prominent drop shadows. The light CTA card uses a delicate, ultra-soft diffused ambient shadow (0px 20px 40px rgba(0, 15, 20, 0.06)) along with a 1px crisp border (#E5EAE8). The code preview module employs subtle layering over stepped workflow cards to signal hierarchy.
IMAGERY
The visual componentry avoids photography, relying purely on schematic product architecture: a clean dark JSON code editor tethered via delicate dotted connector lines (#8EA6A2) to security status nodes and completed workflow pills. Off-brand elements include 3D renders, human lifestyle photography, or playful cartoon illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-personality headline and brand lockup: pairing an authoritative, modern geometric sans-serif with a sudden, fluid classic serif italic ('today.' / 'Vectorlegal'). It bridges cutting-edge automated code with established legal authority in a single visual stroke.
MUST
- Always contrast the dark spruce footer (#061F24) against the clean pearl CTA card (#FCFDFB).
- Use Newsreader italic serif solely for the brand's 'legal' suffix and the final word of the main headline.
- Style uppercase column headers in the footer with wide letter-spacing (0.12em) and muted sage color (#3FB982).
- Ensure the hero CTA pill maintains an exact 9999px radius with an embedded pulsing or solid green dot.
AVOID
- Never replace the italic serif flourish with a standard sans-serif; it breaks the legal-versus-code identity.
- Do not use sharp 0px corners on the floating CTA banner; keep the 20px radius intact.
- Never set footer link text in pure white (#FFFFFF); reserve pure white for brand headers and use #8EA6A2 for links.
- Do not introduce multi-colored gradient fills; gradients must remain dark subtle tone-on-tone vignettes.
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. Try in DraPub 
