Design a light-mode website section: architectural precision balanced with luminous generative rendering across a disciplined, high-key bento canvas.
LAYOUT
The hero uses an asymmetrical two-column layout: the left column (approx 40% width) hosts the editorial narrative, dual CTAs, and trust icons, while the right column (60% width) presents an organized bento grid. The bento grid features a dominant visual transformation card anchored beside stacked preview tiles. Beneath the hero columns sits a full-width linear workflow stepper that spans the entire content width.
PALETTE (use these exact hex values)
- #FFFFFF — Pure White Canvas: dominant page background and elevated card container fill
- #F8FAFC — Cadence Slate: secondary nested card wells, pill chips, and hover states
- #1E60F2 — Electric Cobalt: primary call-to-action buttons, headline emphasis, and active indicators
- #0F172A — Charcoal Black: primary headlines, card titles, and high-emphasis textual labels
- #64748B — Technical Slate: subheadings, descriptive copy, blueprint annotations, and inactive navigation links
- #E2E8F0 — Architectural Wireframe: delicate 1px card outlines, horizontal dividers, and blueprint boundaries
- #ECFDF5 — Generative Mint: pill badge background for ai feature tags and completion icons
- #0D9488 — Emerald Drafting: sparkle iconography and text inside high-affinity generative tags
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px heading, 52px display. Tracking -0.03em at display, -0.01em at body, 0.02em at caption. The typographic tone is technical, objective, and precise, mirroring modern CAD and architectural tooling. Inter provides the clean geometric geometry, high legibility, and neutral personality required to balance creative renders with engineering data. If substituting, use Plus Jakarta Sans to retain the open apertures and clean circular counters.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is communicated through ultra-subtle ambient drop shadows (e.g., 0 4px 20px -2px rgba(15, 23, 42, 0.04)) combined with razor-thin 1px outlines (#E2E8F0). Overlaid image chips utilize backdrop blur (8px) with 90% white fills to establish clear z-axis layering without visual clutter. The baseline interface deliberately reads flat and planar, echoing architectural blueprint conventions.
IMAGERY
Imagery follows an architectural duality: technical, crisp monochrome vector floor plans and structural elevation cross-sections juxtaposed against warm, sunlit Scandinavian/modern luxury home photography. Visual assets should always appear buildable and geometrically realistic. Unrealistic fantasy renders, low-res photorealism, or abstract 3D shapes are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The split sketch-to-photoreal architectural showcase card. The transition between raw black-and-white drafting lines and warm, photorealistic building exterior immediately conveys generative power while anchoring the product in real construction reality. Misusing it by displaying a purely finished render without the underlying drafting line destroys the core product metaphor.
MUST
- Use a two-tone headline where the primary keyword matches brand cobalt #1E60F2.
- Enclose bento cards in precise 1px solid #E2E8F0 borders with 16px radius.
- Pair technical vector wireframes directly adjacent to warm photographic renders.
- Keep typography strictly sans-serif with subtle negative tracking on large titles.
AVOID
- Never apply harsh or dark drop shadows; keep elevation soft and diffused.
- Avoid solid vibrant background fills across entire sections or containers.
- Do not use serif or playful handwritten fonts; maintain strict drafting discipline.
- Never display renders without their grounding structural or CAD context.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
