Design a light-mode website section: deep institutional pine meets pristine civic precision with glowing legislative mint accents.
LAYOUT
The section adopts a two-tier vertical hierarchy. Tier one is a high-impact, centered floating banner contained within max-width constraints (1280px) with generous interior vertical breathing room (56px). Tier two drops into a multi-column corporate footer organized into: identity & newsletter (3 cols), navigation links (4 cols), and direct contact options (2 cols), finalized by a 1px border-delimited legal baseline.
PALETTE (use these exact hex values)
- #07211e — Pine Banner Deep: Deepest dark teal tone forming the primary backdrop of the floating CTA container.
- #0c332e — Pine Banner High: Gradient shift in the CTA banner offering atmospheric lighting behind the Capitol graphic.
- #ffffff — Pure Canvas: Clean baseline background for the footer section and input fields.
- #2ebd85 — Institutional Mint: High-visibility focal accent used for keyword highlights and security badge typography.
- #237a5f — Primary Emerald: Primary action fill on the CTA button and newsletter submit button.
- #0f172a — Slate Heading: High-contrast text for footer category titles and lead contact heading.
- #9ab3ad — Muted Sage: Secondary descriptive text and security label copy within the dark hero card.
- #5f6c7b — Muted Slate: Footer navigational links, sub-footer legal links, and secondary body copy.
- #e5e7eb — Border Subtle: Thin outlines for newsletter inputs, social icon buttons, and sub-footer dividing rule.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 20px heading, 44px display. Tracking -0.025em for display titles, 0 for body, 0.05em for uppercase pills. The typography relies on Inter or an equivalent engineered grotesque that projects calm, enterprise-grade reliability. The tone is deliberate, clear, and unembellished, allowing high-contrast sizing (44px display vs 13px metadata) to communicate authority. It operates with tight tracking (-0.03em) on headlines to look compact and commanding.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 72px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled through surface layer juxtaposition rather than blurred drop shadows. The rich #07211e dark banner acts as a physical layered object atop the neutral white page, creating intrinsic visual depth through intense value contrast. Inside the banner, low-opacity line graphics and subtle radial gradients provide atmospheric field depth.
IMAGERY
Visual assets are strictly institutional and architectural. The right side of the CTA features a finely etched, monochromatic crop of the US Capitol dome rendered in low-contrast teal duotone. On the opposite side, faint vector radar arcs represent modern data tracking. Stock photography or colorful illustrative vector art is strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the dark pine curved banner featuring an ambient architectural watermark (US Capitol dome) paired with an isolated single-word mint green headline highlight ('win'). This move bridges classical institutional power with modern software precision. To implement correctly, keep the architectural texture below 15% opacity and limit the neon mint tint strictly to one high-value word.
MUST
- Reserve the mint accent (#2ebd85) exclusively for pivotal value words, success states, and trust badges.
- Maintain the 24px corner radius on the floating banner to keep it visually separate from the footer.
- Use clean monochrome line icons for security badges and footer contact details to retain institutional gravitas.
- Keep the Capitol building engraving deeply desaturated and beneath 15% opacity to avoid colliding with text.
AVOID
- Never use generic bright blue or purple gradients that dilute the civic, defense-grade tone.
- Avoid applying heavy drop shadows to the floating dark card; rely on canvas contrast.
- Do not set footer category links to pure black; keep them at #5f6c7b for effortless scanning.
- Never omit the subtle border on the secondary ghost button, or it will disappear against the pine surface.
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 中尝试 
