Design a light-mode website section: bipolar daylight marketing framing an intense midnight developer console with cinematic precision.
LAYOUT
An asymmetrical 5:7 two-column composition anchors this layout. The left column stacks metadata badges, massive two-line display headlines, paragraph copy, feature icon rows, CTA pairs, and a horizontal proof grid. The right column dedicates its full height to an expansive 16:10 ratio rounded console showcasing navigation, search filters, video clip outputs, timeline scrubbers, and side-by-side API logs.
PALETTE (use these exact hex values)
- #f8fafd — Canvas Marketing: Background canvas for the marketing column and page foundation
- #0d131e — Console Surface Base: Primary background for the complex mock dashboard application wrapper
- #131a27 — Console Surface Sub-panel: Used for code terminals, secondary cards, and search inputs within the app
- #1a6df5 — Primary Brand Blue: Main CTA buttons, timeline bounding box handles, active sidebar pills, and key badges
- #eef4ff — Soft Icon Blue Surface: Background fill for marketing feature list icons
- #10b981 — Status Emerald: Indicates 200 OK API status, quota progress meters, and uptime indicators
- #0b121f — Marketing Text Primary: High-contrast headings and feature labels on the light side
- #5e6e82 — Marketing Text Secondary: Body copy, subtitles, and supporting meta labels on the light canvas
- #e8eef6 — Console Text Primary: Dashboard labels, media titles, and active code text inside the dark frame
- #6c7d93 — Console Text Muted: Inactive sidebar nav items, code syntax punctuation, and secondary metadata
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 28px heading, 48px display. Tracking -0.03em on display, -0.01em on body. The typography conveys razor-sharp industrial competence and developer fluency. Inter or a comparable geometric sans provides an authoritative, neutral voice on headings, while JetBrains Mono injects unpretentious mechanical rigor into the code surfaces.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1440px container, comfortable density.
DEPTH
Depth is delivered through a high-contrast physical layer stack rather than blurry ambient drop shadows. The dark console acts as a monolithic dark glass slate floating atop the soft #f8fafd marketing canvas, with fine 1px slate-gray borders separating interior panels within the dark workspace.
IMAGERY
Photographic media is exclusively cinematic and hyper-realistic, focusing on pristine landscape footage (mountains, sea of clouds, alpine lakes) to demonstrate high fidelity 4K capabilities. Visual assets avoid abstract vectors, human-centric stock photos, or saturated illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated filmstrip scrubber timeline married directly to an adjacent side-by-side API call/response box within a unified dark dashboard frame. This demonstrates that creative video editing controls are directly mapped to programmatic REST requests.
MUST
- Retain the sharp juxtaposition between the light marketing half and the dark console mockup.
- Use electric blue (#1a6df5) strictly for actionable or active focal elements.
- Constrain console typography to monospaced families inside request and response shells.
- Keep media thumbnail cards inside the console slightly rounded with 8px radius.
AVOID
- Do not invert the marketing side to dark mode; the stark duality creates the signature tension.
- Avoid warm colors or playful rounded cartoonish icons in this developer context.
- Do not allow border radiuses on interior UI controls to exceed the 20px container curvature.
- Never replace monospaced code elements with standard proportional sans-serif.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
