Design a light-mode web interface screen: sunlit enterprise clarity balancing crisp terracotta accents with high-contrast dark analytical canvases.
LAYOUT
The page is organized within a centered 1240px bounded container. The top navigation is 72px tall with a 3-part layout (logo, centered links, right utility buttons). The hero splits evenly into a 45/55 two-column grid: left column stacks tag, display headline, body copy, feature chips, CTA row, and avatar proof; right column houses the large dashboard illustration. Below sits a full-width metrics footer dividing logo validation on the left from 4 stat cards on the right.
PALETTE (use these exact hex values)
- #FAFAFC — Canvas Background: Primary outer viewport background creating subtle contrast with white card surfaces
- #FFFFFF — Pure White Surface: Inner main container background, metric tiles, and floating badge backdrops
- #0E1526 — Dashboard Deep Slate: Internal dark canvas for the software interface preview and analytics graphs
- #CF5C3F — Terracotta Primary: Primary action buttons, active navigation indicator, brand mark bars, and chart accents
- #111927 — Charcoal Navy: High-contrast headings, main metric values, and prominent icon strokes
- #6B7280 — Muted Slate Gray: Secondary descriptive body copy, passive navigation links, and subtitle metadata
- #E5E7EB — Subtle Border Line: Light 1px containment borders on metric cards, pills, and the footer separator
- #E8F5E9 — Teal Mint Tint: Background tint for real-time analytics pill and positive metric badges
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Public Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative yet approachable, driven by Plus Jakarta Sans. Its wide apertures, geometric roundness in 'o' and 'c', and crisp stroke weights convey modern technological precision without feeling sterile. In production, Inter or DM Sans serve as flawless drop-in open-source alternatives.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1240px container, airy density.
DEPTH
Depth is rendered flat-to-soft. Surfaces rely primarily on 1px crisp neutral borders (#E5E7EB) and subtle tonal layering between the #FAFAFC background and pure white #FFFFFF cards. Only the central device mockup uses a very diffuse, low-opacity drop shadow (0 20px 40px rgba(0,0,0,0.06)) to hover gently off the canvas.
IMAGERY
The visual anchor combines a hyper-crisp dark SaaS dashboard interface with flat, friendly editorial vector illustrations. Human characters feature clean outlines, solid color fills, and business-casual styling interacting directly with UI elements. Photorealistic product renders, 3D claymorphism, or generic stock photography would immediately break the narrative tone.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the deliberate contrast between a warm, sunlit terracotta-and-white editorial marketing wrapper and an inset glowing, midnight-navy analytics dashboard being actively operated by 2D illustrated team members. Misusing this pattern by making the whole website dark, or removing the human vector interaction, strips the design of its distinct balance between deep technical capability and human warmth.
MUST
- Reserve the terracotta red (#CF5C3F) strictly for actionable touchpoints, active states, and critical chart metrics.
- Use 999px pill radii for chips, tags, and secondary metadata badges.
- Maintain strict typographic contrast using deep charcoal (#111927) for headings against white or off-white surfaces.
- Incorporate dark slate (#0E1526) solely within product previews to create an intense visual anchor.
AVOID
- Do not use generic vivid blue or bright purple for primary buttons; the identity depends on terracotta warmth.
- Do not apply dark mode across the entire page canvas; the dark surface belongs strictly inside the dashboard mockup.
- Do not use sharp 0px square corners on buttons or pill tags.
- Do not crowd the hero headline; keep leading tight (1.08) but leave ample 20px-32px padding around the block.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3648:2256. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
