Design a light-mode website section: high-key productivity canvas anchored by a dense midnight footer for institutional trust and deep architectural routing.
LAYOUT
The top section utilizes an asymmetrical two-column layout: left column contains value framing, action buttons, and trust chips; right column holds a framed live-software window. Below, a full-bleed dark footer breaks into a multi-column corporate directory with a 4-column link grid flanked by identity on the left and newsletter on the right. A hairline rule closes the page with a dual-justified legal bar.
PALETTE (use these exact hex values)
- #fcfdfd — Canvas Daylight: Primary background for hero, value proposition, and interactive preview area
- #0b1120 — Midnight Obsidian: Full-width background surface for the comprehensive structural footer
- #ffffff — Card Surface Pure: Elevated dashboard preview panel surface and bright card backgrounds
- #1d6bf3 — Vibrant Royal: Primary CTA button fills, newsletter submission button, active badges, and logo mark
- #0f172a — Slate Text High: High-contrast headings, main hero title, and dark UI label elements
- #475569 — Slate Text Subdued: Hero paragraph descriptions, secondary links, and sub-labels
- #94a3b8 — Footer Muted: Inactive footer links, supporting descriptions, and legal metadata
- #16a34a — Metric Emerald: Positive delta indicators inside dashboard metrics and growth pills
- #eff6ff — Tint Badge Blue: Background fill for top eyebrow badge and soft highlighted items
- #1e293b — Footer Border Dark: Sub-footer divider rule and input field outline borders in footer
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 44px display. Tracking -0.025em on display, 0 on body. The typographic tone is ultra-composed, technical, and frictionless. Inter communicates clinical accuracy, mimicking modern operating systems and developer tools. Tracking stays pulled in slightly on titles to retain density, preventing large headings from feeling airy or detached.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled through surface layering rather than strong shadows. The daylight dashboard uses an ultra-diffuse 0 20px 40px -15px rgba(15, 23, 42, 0.06) drop shadow coupled with a precise 1px slate border. The midnight footer deliberately flattens depth into a singular architectural sheet.
IMAGERY
Avoid photographic assets entirely in favor of crisp UI component models and thin architectural vector rings. Decorative background elements consist exclusively of hairline concentric circular strokes fading into white. Any imagery introduced must look like live application interface data.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tier light-to-midnight cut: presenting the interactive product in pure white day-mode while grounding the brand in an expansive, high-density dark mode footer. Use it by ensuring the product card breathes in daylight before plunging directly into structured institutional links. Misusing it involves placing soft gradients or transitional colors between the two zones.
MUST
- Strictly reserve vibrant royal blue (#1d6bf3) for primary actions and active navigation states.
- Maintain the sharp boundary line between the white hero stage and the midnight footer without gradients.
- Use pill radius (9999px) strictly on utility tags, badges, and circular action icons.
- Represent positive delta metrics using clean green text (#16a34a) alongside dark slate values.
AVOID
- Never introduce colorful saturated card backgrounds into the daylight canvas.
- Do not blur or blend the transition between the daylight upper section and midnight footer.
- Avoid heavy drop shadows; rely on 1px borders (#e2e8f0 or #1e293b) for edge definition.
- Do not use uppercase text outside of eyebrow badges and small metadata tags.
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 
