Design a light-mode website section: grounded technical clarity merging crisp blueprint data with a high-contrast nocturnal estimating footer.
LAYOUT
The top section utilizes a balanced 50/50 two-column hero layout: textual value propositions and dual CTAs on the left, counterbalanced by a dense CAD preview card on the right. Below this, a four-column grid of trust benefits transitions into a deep nocturnal footer structured as a 5-column navigation system with integrated lead capture and a compartmentalized compliance bottom bar.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Light: Primary background for the CTA section and hero feature presentation
- #F8FAFC — Slate Preview Surface: Contained background for interactive blueprint card and mock software panels
- #05191D — Petrol Dark Canvas: Base canvas for entire multi-column footer and newsletter capture area
- #0E2B31 — Petrol Border Subdued: Dividers, newsletter input strokes, and social button outlines in footer
- #0D8364 — Deep Emerald: Primary conversion button background, eyebrow text, and active highlight accents
- #10B981 — Electric Mint: AI confidence indicators, brand wordmark accent, and footer subscribe button
- #0F172A — Charcoal Slate Text: Main high-contrast headlines and numerical takeoff line items
- #475569 — Muted Slate Text: Descriptive body copy, subheadings, and sheet metadata strings
- #8BA4A8 — Footer Muted Teal: Nav links, helper copy, and copyright text within the dark footer
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Archivo), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 22px subheading, 28px heading, 44px heading-lg. Tracking -0.02em at display, 0.06em at micro-caps. Plus Jakarta Sans delivers an engineered, crisp operational cadence suited for trade professionals and electrical contractors. The tight display tracking communicates robust authority without drifting into cold geometric detachment, while the high x-height keeps numerical specifications readable at small scales.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely via planar surface shifts and hairline borders rather than drop shadows. The top software preview card sits on an off-white plane (#F8FAFC) with a crisp 1px neutral stroke (#E2E8F0), keeping the technical aesthetic flat and precise like a blueprint sheet.
IMAGERY
Visual assets consist exclusively of accurate architectural electrical plans, wiring schematics, and vector glyph indicators. Linework is muted slate gray with electric emerald overlays indicating takeoff counts, deliberately rejecting decorative stock photos or lifestyle illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The stark transition from a sterile architectural CAD preview on a pale canvas to a nocturnal, petrol-slate footer populated with security compliance seals and vibrant mint callouts. It gives an industrial SaaS tool an immediate sense of enterprise-grade security and blueprint precision.
MUST
- Keep CAD preview illustrations strictly technical with monochrome lines and localized green markup highlighting.
- Pair primary conversion buttons with a contextual micro-reassurance label like 'No credit card required.'
- Use uppercase tracking (0.06em to 0.08em) for all navigation column titles in the footer.
- Maintain strict tabular numeric alignment on all takeoff metric lists.
AVOID
- Do not use generic stock photography; all imagery must mimic authentic electrical floorplans and CAD drawings.
- Avoid centered text alignments in the CTA body; left-align copy to match technical schematics.
- Do not render the footer with bright borders; keep structural dividers under 10% opacity against the dark petrol ground.
- Avoid pill-shaped buttons for actionable triggers; reserve full pills exclusively for status badges.
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 中尝试 
