Design a light-mode web interface screen: crisp product-studio elegance with high-contrast electric blue accents and rhythmic dark module interruptions.
LAYOUT
The page adheres to a 1200px centered grid with generous vertical rhythm spaced at 96px increments. The hero is structured into a classic 55/45 asymmetrical two-column layout, balancing strong typography and trust badges against a dominant rounded photograph with an overlapping metric pod. Content flows methodically from high-level hero validation to a 4-column capability grid, an inverted dark horizontal process stepper, and finally a 3-column project showcase.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Dominant background for the page body and service card surfaces.
- #2B66F6 — Electric Cobalt: Primary interaction states, hero keyword highlights, active indicators, and prominent pill buttons.
- #121833 — Midnight Ink: Full-width nested container background for the interactive process section.
- #111827 — Obsidian Text: High-emphasis display typography, section headings, and card titles.
- #64748B — Slate Text: Secondary copy, hero descriptors, step captions, and rating review counters.
- #EFF4FE — Ice Blue Tint: Background fill for metadata pills, section kicker tags, and category chips.
- #F43F5E — Vibrant Rose: Icon container fill for design-focused service cards and workflow steps.
- #22C55E — Emerald Green: Review rating stars, positive percentage deltas, and completion step markers.
- #E2E8F0 — Subtle Border: Hairline perimeter stroke for cards, badges, and segmented content blocks.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.02em at display, -0.01em at body. The typographic tone is authoritative, clean, and unmistakably modern tech-editorial. Set in a geometric grotesque like Plus Jakarta Sans, the heavy headline weights (-0.02em tracking) project confidence and precision, while the airy, slate-colored body copy guarantees effortless scannability. Inter or Manrope can be used as exact drop-in substitutes without degrading tone.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled predominantly through soft, diffused ambient drop shadows on floating elements like the hero stat card (0px 14px 34px rgba(18, 24, 51, 0.08)). Most cards remain flush, separating from the background via 1px hairline borders (#E2E8F0) rather than heavy drop shadows. High visual depth is instead achieved contextually through the solid midnight navy (#121833) container contrasting against the clean white canvas.
IMAGERY
Photography features real human practitioners in candid, well-lit, contemporary engineering and design environments. Figures work directly with modern hardware and crisp data dashboards, framed inside generous organic radiused masks. Stylized, low-fidelity vector illustrations or 3D clay graphics would clash severely with this authentic studio identity.
SIGNATURE DETAIL — the thing that makes this design itself
The defining visual anchor is the floating stat capsule overlapping an ultra-rounded hero photo frame, paired downstream with the encapsulated dark-mode methodology block. To reproduce it faithfully, place a rounded portrait-oriented photo (36px radius) alongside a white floating metric card that overlaps its bottom-left corner by 20%, showing a sparkline and highlighted KPI.
MUST
- Use a bright electric blue highlight for single keywords within major headlines to create immediate reading cadence.
- Maintain high border radii (18px to 24px) on both service containers and full-bleed image frames.
- Pair numbered process steps with a horizontal dashed track to signal step-by-step methodology.
- Anchor section headers with compact, uppercase kicker badges wrapped in pill shapes.
AVOID
- Do not use dark backgrounds for the entire page; reserve the midnight navy specifically for the process container.
- Do not allow raw, unrounded corners anywhere; buttons, badges, and frames must all carry radius.
- Do not mix multiple heavy serif fonts; retain modern sans-serif typography across all hierarchies.
- Do not overload cards with heavy multi-layered drop shadows; rely on hairline borders and soft ambient blur.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1616:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
