Design a light-mode web interface screen: corporate engineering clarity anchored by deep royal blue accents and grounded photography.
LAYOUT
The page establishes rhythm through a stacked hybrid layout: beginning with an immersive full-width dark hero section, bisected along its bottom seam by a suspended three-column contact card. Directly below, an open three-column stats grid breathes white space before transitioning into an asymmetrical two-column showcase (text left, two vertical project images right). It concludes with a balanced three-column service grid and an understated monochromatic partner ribbon.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Main light background across lower sections and standard card fills
- #0d1522 — Midnight Slate: Base hero background and darkest backdrop layer
- #1d6ff2 — Electric Azure: Primary interactive buttons, key text accents, and active status indicators
- #111827 — Charcoal Black: Primary headings and heavy display typography in light mode
- #6b7280 — Muted Slate: Secondary copy, descriptive body copy, and metadata subtitles
- #eef4ff — Soft Ice Blue: Background fill for primary stat icons and contact badge circles
- #fff7ed — Warm Amber Tint: Background container for creative and advisory feature icon badges
- #ecfdf5 — Mint Teal Tint: Background container for technical and engineering service icon badges
- #e5e7eb — Border Gray: Outline dividers, card borders, and utility strip separators
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 38px heading-lg, 52px display. Tracking -0.02em at display, 0.01em at uppercase labels. Clean, engineered, and distinctly authoritative. The typeface selection uses an objective geometric-grotesque structure (such as Inter or Plus Jakarta Sans) that conveys operational precision, reliability, and modern craftsmanship without stylistic idiosyncrasy. Licensing is simple through open Google Font equivalents.
GEOMETRY & SPACING
Corner radii — cards 12px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved primarily via a single high-impact drop-shadow underneath the white floating contact bar (0 20px 25px -5px rgba(0, 0, 0, 0.08)). All subsequent body cards avoid heavy elevation, relying instead on clean 1px borders (#e5e7eb) and crisp tonal contrast. Image cards rely on deep photographic contrast rather than box shadows.
IMAGERY
Photography consists of realistic, high-definition architectural and construction scenes: site engineers in hard hats looking upward, modern multi-family residential facades, and crane-heavy urban developments. Images feature cool, natural daylight, desaturated steel blues, and neutral architectural concrete. Avoid playful illustrations or abstract 3D shapes.
SIGNATURE DETAIL — the thing that makes this design itself
The floating white 3-column contact card suspended precisely over the threshold between the deep navy photo hero and the pure white body canvas. Misusing it involves placing it fully within a single background color, which eliminates its role as an architectural bridge.
MUST
- Anchor the floating contact bar directly across the boundary between the dark hero and the light canvas.
- Use pastel-tinted square or circular icon wells (#eef4ff, #fff7ed, #ecfdf5) to differentiate service categories.
- Keep typography strictly sans-serif with negative tracking (-0.02em) on headlines above 28px.
- Utilize fine 1px dividers (#e5e7eb) between horizontally stacked contact and metric elements.
AVOID
- Do not introduce sharp 0px card corners; all cards must respect the 10px to 12px boundary radius.
- Do not use dark, heavy solid backgrounds for body service cards.
- Never apply high-saturation background fills across large layout containers.
- Do not drop the trailing arrow from primary action buttons.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2528:3264. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
