Design a dark-mode website section: pristine daylight conversion layout that anchors directly into an authoritative deep-navy operational footer.
LAYOUT
The composition follows a centered conversion stack atop a 6-column enterprise directory grid. The top module centers badge, headline, paragraph, dual-button group, and 3-item trust bar in strict vertical symmetry. Below the wave transition, the footer splits into an expansive left column (brand, mission, newsletter, socials), four balanced navigation columns, and a dedicated right-aligned support card, finalized by an edge-to-edge legal bar.
PALETTE (use these exact hex values)
- #0E1726 — Deep Navy Base: dominant canvas for the expansive navigation and contact footer section
- #152234 — Navy Elevated Card: background surface for the right-hand 'Get in touch' contextual container
- #FFFFFF — Daylight Canvas: primary light background for the conversion CTA block
- #1D64F2 — Electric Cobalt: focal primary button fill and newsletter submit action
- #E6F7F5 — Teal Pill Surface: badge surface for the top domain category indicator
- #0F172A — Deep Slate 900: high-contrast title text on daylight surface
- #475569 — Muted Slate 600: secondary supportive paragraph text in daylight zone
- #94A3B8 — Steel Blue 400: footer navigation link text, captions, and copyright strings
- #1E2F46 — Navy Border Outline: dividers, horizontal separators, and input boundaries in dark section
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,SF Pro Text), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 22px heading, 44px display. Tracking -0.025em for headings, 0em for body, 0.05em for caps. The typographic stance is neutral, authoritative, and industriously modern. Inter provides balanced tabular figures and clean horizontal terminals that project reliability for enterprise and construction management software. If substituting, use a geometric neo-grotesque like Plus Jakarta Sans or Geist to maintain the tight tracking and sturdy x-height.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 6px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is strictly governed through surface shifts rather than skeuomorphic box-shadows. On the light section, subtle cyan-blue ambient gradient curves imply dimensional softness without lifting elements off the canvas. In the footer, depth is established solely by floating the 12px radius #152234 support card against the flat #0E1726 background.
IMAGERY
No photographic imagery is present in this viewport. The visual vocabulary relies entirely on crisp vector iconography (tools, locks, user groups, envelopes) paired with a subtle, low-opacity dot-matrix grid fading inward from the desktop margins.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-zone architectural handoff: a daylight CTA crowned with a soft wave gradient, terminating immediately into an expansive #0E1726 operational footer. To apply it correctly, ensure the CTA feels airy and open with centered typography, while the footer immediately packs high-density utilities without feeling cramped.
MUST
- Retain the clean split between white CTA canvas and deep #0E1726 footer canvas without muddy intermediate colors.
- Use exact 8px radius for interaction buttons and 12px radius for nested dark container cards.
- Separate inline feature chips with subtle 1px vertical borders (#E2E8F0) to maintain crisp horizontal pacing.
- Keep footer column titles white (#FFFFFF) while keeping all clickable destination links in #94A3B8.
AVOID
- Do not blur or place aggressive drop shadows on the daylight CTA action buttons.
- Never substitute the dark navy footer (#0E1726) with pure #000000 or neutral charcoal.
- Do not allow footer links to share the same font weight or pure white color as their column headings.
- Avoid omitting the gentle background dot grid pattern framing the daylight hero headline.
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 中尝试