Design a light-mode website section: dense, clinical developer tooling framed in deep pine green and pristine architectural panels.
LAYOUT
A two-column grid on a 1360px container with approximately 38% allocated to the left narrative stack and 62% dedicated to the live IDE simulation. The left column reads strictly top-to-bottom: overline tag, two-line title, body blurb, four stacked feature items, dual CTAs, and a trust checklist. The right column houses an intact, high-fidelity app frame with header toolbar, node-graph canvas, run history table, and code previewer.
PALETTE (use these exact hex values)
- #F8F9FA — Canvas Background: Full-bleed section backdrop creating soft contrast against pure white cards
- #FFFFFF — Surface Pure: Workspace card surface, active node backgrounds, and input fields
- #E5E7EB — Border Subtle: Hairline 1px dividers, card boundaries, and node connector lines
- #0C3B2E — Brand Pine: Primary headline accent word, primary button fill, and status indicators
- #082B21 — Brand Pine Hover: Interactive state for primary action buttons and badge tags
- #0F172A — Text Primary: H1 title, subheads, node labels, and high-priority interface text
- #64748B — Text Muted: Explanatory paragraphs, feature descriptions, run metadata, and console timestamps
- #E0F2FE — Accent Ice Blue: Background squircle for code and integration icons
- #DCFCE7 — Accent Mint: Background squircle for workflow and prompt management icons
- #FEF3C7 — Accent Amber: Background squircle for test and debug lightning icon
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 32px heading, 44px display. Tracking -0.03em at display, -0.01em at body. The voice is precise, engineered, and understated. Inter provides a clean, neutral canvas that steps aside to let the node architecture and dense console logs communicate clarity. JetBrains Mono lends immediate developer authenticity in the code panel and execution timers.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 6px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1360px container, tight density.
DEPTH
Depth is handled with clinical restraint. Surfaces rely almost exclusively on 1px borders in #E5E7EB to declare separation. The only prominent elevation belongs to the master app mockup, which uses a delicate, dispersed shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.06).
IMAGERY
There is no photographic or illustrative imagery. Instead, the design uses literal, production-grade interface simulation as its hero visual. Any stock photography, decorative floating spheres, or isometric 3D models would immediately degrade the product's utilitarian credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The two-word hero punchline where 'Together.' is rendered in deep forest pine green (#0C3B2E), creating an immediate color anchor that matches the primary CTA and grounds the clinical grey-and-white UI simulation.
MUST
- Keep the primary action button strictly rectangular with moderate 8px radius; avoid pill shapes.
- Render the hero headline accent strictly in deep pine green (#0C3B2E) rather than bright emerald.
- Use 1px hairline borders (#E5E7EB) inside the mockup to preserve dense software realism.
- Employ pastel tinted square backgrounds (36x36px, radius 8px) behind feature icons to inject disciplined color.
AVOID
- Do not use saturated or neon green gradients on buttons or badges.
- Do not apply deep, muddy drop shadows; rely on crisp 1px borders and faint ambient shadows.
- Do not replace the realistic app mockup with abstract 3D illustrations or stock photography.
- Do not enlarge body copy beyond 15px; developer tools require high informational density.
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 中尝试 
