Design a light-mode web interface screen: structured clarity where luminous cobalt accents float over pristine white canvases and soft architectural interfaces.
LAYOUT
The page flows in a centered, highly disciplined vertical stack. It begins with a transparent, balanced navigation bar, descends into a centered hero stack (badge, display title, subtitle, CTA input), and centers the oversized software canvas mockup. Below the mockup, a horizontal partner logo strip spans the grid, resolving into an alternating zig-zag series of two-column feature stories paired with dedicated mini-UI windows.
PALETTE (use these exact hex values)
- #ffffff — Canvas Pure: Primary surface background across the hero and white UI mockups
- #f8f9fa — Canvas Muted: Subtle feature container backgrounds and preview card canvas fills
- #1e2128 — Sidebar Charcoal: Dark navigation panel inside the simulated product interface mockup
- #1a65f6 — Electric Cobalt: Primary call-to-action buttons, active states, and focal headline emphasis word
- #181a1f — Text Primary: Headings, titles, primary labels, and high-emphasis body copy
- #666e7d — Text Secondary: Body paragraphs, metadata, placeholder text, and partner logos
- #3b5bdb — Eyebrow Indigo: Uppercase section overline badges and category anchors
- #eaebf0 — Border Subtle: Hairline card boundaries, mockup framing, and input borders
- #fde8e8 — Pill Rose: Background for floating decorative context tags like 'Logs'
- #f3e8ff — Pill Lavender: Background for decorative tags like 'APIs' and status badges
TYPOGRAPHY
Typeface Inter (or General Sans, DM Sans, system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 32px heading, 44px heading-lg, 60px display. Tracking -0.03em at display, -0.01em at body, 0.06em on eyebrows. The typography is clinical, approachable, and decisively engineered. Inter or an equivalent modernist grotesque delivers ultra-clean legibility at 12px UI scales while projecting authority at 60px display sizes through tight tracking and heavy weight. Its neutrality allows the content within software mockups to feel legitimate and operational rather than decorative.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 120px between sections, 1160px container, comfortable density.
DEPTH
Depth is restrained and architectural, avoiding aggressive multi-layer drop shadows. The primary canvas rests on pure white (#ffffff) or ultra-subtle grey (#f8f9fa), with depth suggested exclusively through 1px borders (#eaebf0) and wide, feathered box-shadows (0 20px 50px -10px rgba(0, 0, 0, 0.05)). Floating pills in the hero use soft zero-elevation positioning, letting negative space supply depth.
IMAGERY
Visual assets are strictly functional software product snapshots and clean UI representations rather than photographic stock. UI previews feature authentic elements like sidebar navigation trees, user avatar clusters (24px circles with 2px white borders), and minimalist document headers. Any non-UI graphic is a minimal monoline vector illustration with flat pastel fills.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the electric blue word highlight embedded directly into the massive display headline ('Put clarity at the center...') framed by pastel contextual pill badges orbiting the hero perimeter. Recreate this by picking exactly one pivotal emotional noun to tint in cobalt blue (#1a65f6), letting soft-toned pill tags float freely with generous breathing room around the headline.
MUST
- Keep typography strictly monochrome except for deliberate single-word cobalt blue accents.
- Use pill badges (radius 999px) for auxiliary metadata and floating ambient tokens.
- Enclose all product UI mockups in thin 1px hairline borders (#eaebf0) with soft drop shadows.
- Maintain generous 120px vertical padding between feature alternating rows.
AVOID
- Do not introduce saturated gradients or bright neon colors outside the single cobalt blue.
- Do not use sharp 0px card corners; all visual panels require minimum 12px to 20px radius.
- Avoid heavy dark borders; structural lines must remain subtle at 1px with light slate tones.
- Do not clutter hero space with dense background graphics; whitespace must stay immaculate.
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. Try in DraPub 
