Design a light-mode website section: monochrome architectural bento grid with an inverted command center hero card.
LAYOUT
Asymmetric bento grid structure. The upper section is divided into a 1/3 introductory header on the left and a heavy 2/3 dark hero card on the right. Beneath the hero header, a 2-column subsection leads into a full-width lower tier consisting of a 3-column equal-width card row, creating architectural balance and clear visual paths.
PALETTE (use these exact hex values)
- #f8f9fa — Canvas Background: Outer page backdrop behind cards and section headers
- #ffffff — Surface White: Primary fill for light bento cards and nested pill badges
- #0e1117 — Dark Command Surface: Background fill for the featured hero card and inner code containers
- #161b22 — Dark Surface Panel: Nested code editor background and step list panels inside dark card
- #0f172a — Primary Text Dark: Main titles, headlines, and metrics on light backgrounds
- #64748b — Secondary Text Muted: Card body copy, descriptions, and metadata labels
- #6366f1 — Brand Violet: Eyebrow tag text, category badges, active indicators, and sparkline
- #e0e7ff — Brand Violet Surface: Subtle light violet background for category tags and mini chips
- #e2e8f0 — Border Subtle: Structural borders bounding cards, inner list rows, and avatar chips
- #30363d — Border Dark Subtle: Dividers and panel separators within the dark IDE interface
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 32px heading-lg, 44px display. Tracking -0.025em for headings, 0 for body, 0.08em for uppercase tags. Utilitarian, authoritative, and deeply technical. The typography mirrors elite modern developer infrastructure tools like Vercel, Linear, and Raycast. Inter or Geist Sans provides precision tracking and legible micro-copy at dense UI scales, communicating enterprise reliability.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created almost entirely without shadows. Boundaries are established using 1px stroke borders (#e2e8f0 on light, #30363d on dark). When elevation is required for floating hubs, a razor-thin shadow (0 2px 4px rgba(0,0,0,0.04)) is applied strictly to distinguish overlapping pills.
IMAGERY
No photographic imagery is present. Visuals are entirely composed of programmatic UI artifacts: simulated IDE code editors, directory trees, telemetry line charts, and integration logo grids. Graphic accents resemble literal software UI controls with authentic developer ergonomics.
SIGNATURE DETAIL — the thing that makes this design itself
The stark inverted dark command card sitting inside an otherwise pristine light-mode canvas. It immediately pulls the eye to the product's primary action (the execution IDE) while allowing the surrounding marketing features to stay light and readable. Misusing it means making every card dark or failing to carry light-mode text standards.
MUST
- Anchor the layout with exactly one dark inverted card to create an undeniable focal point.
- Use 16px border-radius consistently on outer container cards.
- Keep section titles tight with negative letter spacing (-0.025em) for crisp hierarchy.
- Present miniature UI artifacts (file trees, IDEs, graphs) with authentic pixel fidelity inside cards.
AVOID
- Do not invert multiple cards; having more than one dark hero card destroys the intentional contrast hierarchy.
- Do not apply heavy multi-stop gradient backgrounds behind the main layout canvas.
- Do not use colorful rainbow status dots; adhere strictly to muted slate, green, and indigo.
- Do not allow card padding to fall below 20px on desktop viewports.
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. 在 DraPub 中尝试 
