Design a light-mode web interface screen: deep midnight hero staging transitioning into high-clarity porcelain productivity cards and structured service grids.
LAYOUT
The document follows a classic modern corporate top-to-bottom rhythm starting with an asymmetrical two-column hero where heavy typographic copy balances an expansive floating UI mockup. Below the midnight fold, the page transitions immediately to a horizontal 4-column feature row on pure white. It then introduces an asymmetric 2-column editorial about block (stats and copy on left, photo with floating badge on right) followed by a 5-column service carousel driven by top-right navigation arrows.
PALETTE (use these exact hex values)
- #070B19 — Midnight Base: Background canvas for the entire hero section and dark header container.
- #0066FF — Electric Cobalt: Primary interactive buttons, key headline emphasis text, badges, and focal icons.
- #FFFFFF — Pure White: Primary canvas for content sections below hero, card fills, and hero button text.
- #F8FAFC — Porcelain Tint: Subtle background container fill for featured content blocks and card hovers.
- #EFF6FF — Ice Blue Accent: Icon container backgrounds and subtle pill badges across light modules.
- #0F172A — Ink Slate: Primary headings, titles, and high-emphasis body text in light sections.
- #64748B — Muted Slate: Body copy, subheadings, icon labels, and secondary metadata descriptions.
- #94A3B8 — Ghost Slate: Secondary copy, stats labels, and breadcrumbs inside dark hero context.
- #E2E8F0 — Hairline Border: Card perimeters, input outlines, and horizontal dividers on light surfaces.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 40px heading-lg, 52px display. Tracking -0.025em for display titles, 0.08em for uppercase badges. Plus Jakarta Sans delivers an engineered, contemporary voice that balances startup energy with agency professionalism. Its geometric roundness gives warmth to large display sizes (52px) while maintaining extreme legibility in micro dashboard tags and stat labels at 12px. When substituting, Inter offers similar mechanical precision, while DM Sans matches the friendly geometric counters.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled through stark contrast rather than pervasive layered drop shadows. The floating dashboard in the hero uses an expansive soft shadow (0 25px 50px -12px rgba(0, 0, 0, 0.35)) to lift it high off the midnight background. In the light sections below, elevation collapses into flat, crisp planar cards bounded by 1px hairline strokes (#E2E8F0), restoring depth only for floating media chips like 'Our Mission'.
IMAGERY
Photography captures real, well-lit collaborative creative teams in modern industrial-loft studio spaces. Shots must feel candid and warm, avoiding staged corporate handshake tropes or synthetic stock smiles. Visual assets outside of human photography rely on clean, vector-rendered SaaS dashboard graphics with realistic charts, badges, and interface controls.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dramatic split-canvas architecture: an immersive dark navy hero that showcases a glowing, fully rendered white SaaS interface mockup, immediately giving way to a clean, architectural white agency layout below. To execute this correctly, ensure the floating dashboard slightly breaks the baseline of the hero content and use the exact cobalt highlight (#0066FF) within the headline to bridge the dark and light worlds.
MUST
- Always start the page with a deep navy (#070B19) hero before transitioning cleanly to white surfaces.
- Use electric cobalt (#0066FF) strictly for intentional focal points, primary CTAs, and key title words.
- Maintain consistent 16px border radii across all light cards and service modules.
- Enclose iconography in soft 44px ice-blue (#EFF6FF) rounded squircle badges.
AVOID
- Do not use dark backgrounds below the hero; downstream sections must remain light and airy.
- Avoid fully rounded pill buttons for primary actions; stick to an 8px-10px squircle radius.
- Never substitute the electric cobalt (#0066FF) with desaturated or cyan-leaning blues.
- Do not crowd service cards; preserve at least 24px internal padding and 16px gutters.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2336:3520. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
