Design a light-mode web interface screen: deep navy analytical authority opening into pristine white strategy briefs with luminous cyan accents.
LAYOUT
The page follows an alternating dark-to-light rhythm: full-bleed dark hero on top, followed by a crisp white client logo band. Below is an asymmetrical two-column 'What We Do' intro with adjacent metric tiles, expanding into a symmetrical three-column service card grid. The bottom third re-anchors authority via a dark split-screen case study card before returning to a four-column white capability list.
PALETTE (use these exact hex values)
- #0B0F1F — Midnight Base: Dominant background for hero section and featured case study container
- #FFFFFF — Pure White: Primary working canvas for middle sections and card backgrounds
- #13192E — Dark Slate Surface: Background fill for the analytics card and internal dark metric blocks
- #24B4B6 — Luminous Cyan: Primary button fill, critical metric callouts, and chart revenue polyline
- #6E78FF — Electric Periwinkle: Section uppercase eyebrows, category tags, and icon accent fills
- #B25BF6 — Neon Orchid: Secondary polyline for cost savings in the hero telemetry chart
- #0F172A — Deep Charcoal: High-contrast headings and body titles on white surfaces
- #64748B — Muted Slate: Supporting descriptions, list items, and inactive meta copy on light canvas
- #E2E8F0 — Border Subtle: Hairline perimeter stroke for cards and outline buttons on light surfaces
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 20px subheading, 24px heading, 32px heading-lg, 48px display. Tracking -0.03em at display, 0.05em at eyebrows. The typographic voice is pragmatic, precise, and distinctly corporate, driven by an engineered neo-grotesque sans-serif. Tight display tracking (-0.03em) makes headlines feel deliberate and authoritative, while open uppercase eyebrows establish clear departmental taxonomy. Plus Jakarta Sans or Inter provides the crisp geometric clarity required for high-stakes enterprise consulting.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved through stark boundary definition and high tonal contrast rather than diffused drop shadows. Cards rely on subtle 1px hairline borders (#E2E8F0 on light, #243054 on dark navy) to separate levels. In dark modules, subtle surface steps from #0B0F1F to #13192E provide depth without blur.
IMAGERY
Photography depicts focused executive professionals in modern architectural conference rooms interacting with physical or projected analytics dashboards. The palette must feature cool blues, desaturated neutrals, and warm office lighting, strictly avoiding stylized stock handshakes or artificial smiling portraits.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden, razor-sharp transition from an immersive midnight-navy analytics hero into an expansive, airy white card grid. Misusing this signature by blending the transition with gradient fades or soft blurs instantly degrades the crisp, institutional confidence of the layout.
MUST
- Reserve luminous cyan (#24B4B6) exclusively for high-intent actions, key polylines, and hero CTAs.
- Use uppercase tracking (0.06em to 0.08em) on all category eyebrow labels to preserve hierarchy.
- Maintain high-contrast text: dark navy (#0B0F1F) over cyan buttons, pure white over dark surfaces.
- Frame cards with crisp 1px borders (#E2E8F0 on light, #243054 on dark) rather than fuzzy drop shadows.
AVOID
- Do not introduce diffuse multi-stop gradients across the primary canvas surfaces.
- Avoid using bright cyan as a large surface background; it is strictly an accent and interactive trigger.
- Do not omit the 1px structural stroke on white-on-white card layouts.
- Never use serif or decorative display typography in this analytical consulting environment.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
