Design a light-mode web interface screen: executive digital agency aesthetic pairing deep nocturnal midnight tones with warm terracotta accents and clean daylight card architecture.
LAYOUT
The page follows a deliberate tonal sandwich: a dramatic midnight hero transitions into clean daylight services and narrative blocks, interrupted midway by an encapsulated dark process ribbon before concluding with light testimonials and partner logos. Sections utilize a 12-column grid capped at 1200px maxWidth with consistent 96px vertical section spacing. Asymmetric two-column pairings (e.g., text left, image right) create dynamic visual tension while preserving predictable horizontal reading paths.
PALETTE (use these exact hex values)
- #0D1520 — Midnight Slate: Deep navy-charcoal background for the hero header and process callout container.
- #F8F9FA — Daylight Canvas: Light neutral base for all mid-page content sections, services, and testimonials.
- #FFFFFF — Pure White: Card containers, floating stat badges, and elevated surface layers.
- #0B131F — Process Inset Navy: Contained dark section background framing the four-step execution timeline.
- #D45D43 — Terracotta Accent: Primary interactive CTAs, inline display text emphasis, active navigation indicators, and quote glyphs.
- #FDEEE9 — Soft Peach Tint: Background fill for design category icon circles and testimonial quote accents.
- #111827 — Charcoal Black: Primary headings and high-contrast titles on daylight backgrounds.
- #6B7280 — Slate Neutral: Secondary descriptive body copy, captions, and inactive link text.
- #9CA3AF — Muted Silver: Subtitles, step notes, and secondary text on dark midnight backgrounds.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Urbanist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 40px heading-lg, 52px display. Tracking -0.03em at display, 0.08em at kicker uppercase. Plus Jakarta Sans delivers a sophisticated balance between technical geometric precision and warm, editorial approachability. Its wide apertures and crisp apexes project modern competence without feeling cold or clinical like older neo-grotesques. If licensing requires substitution, Inter or DM Sans provide equivalent legibility and structural discipline across both headline and micro-caption scales.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created through soft, natural multi-layered ambient drop shadows (e.g. 0 12px 32px rgba(0,0,0,0.06)) applied to white cards sitting over the daylight canvas. Floating stat pills overlapping portrait images use slightly deeper diffusion to clearly detach the card from the underlying photo plane. Dark sections remain flat and planar, relying on high-contrast white text rather than shadow to communicate hierarchy.
IMAGERY
Photography emphasizes polished, natural-light executive editorial portraits and candid collaborative agency environments with realistic warm color grading. Subjects make direct, confident eye contact or engage naturally in design reviews, avoiding sterile corporate stock tropes. Photographic corners are consistently rounded to match the system's 16-20px container radii.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the dual-tone headline technique where the final, emotionally resonant phrase of a primary heading is set in warm terracotta (#D45D43) against stark white or black text, paired with floating high-contrast metric pills that overlap photo boundaries. Misusing this pattern by colorizing more than 3-4 words or applying multiple competing accent colors instantly destroys the understated executive tension.
MUST
- Reserve the terracotta hue (#D45D43) strictly for conversion buttons, focal keywords, and small branding marks.
- Maintain high contrast transitions between the dark midnight (#0D1520) hero and light (#F8F9FA) body sections.
- Keep icon containers tinted with soft 10% opacity fills matching their respective category identities.
- Use uppercase tracking (0.12em) exclusively on small kicker headlines and category labels.
AVOID
- Do not use saturated primary colors like blue, yellow, or purple that clash with the warm terracotta palette.
- Do not use harsh 0px sharp corners; every interactive boundary requires a 10px to 16px radius.
- Do not fill entire section backgrounds with terracotta; it must remain an accent, never a canvas ground.
- Do not apply dark drop shadows on dark surfaces; reserve elevation shadows for white cards over daylight gray.
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. Try in DraPub 
