Design a light-mode website section: crisp engineering clarity paired with dual-tone typographic authority and dense multi-layered application telemetry.
LAYOUT
The viewport is organized into three primary vertical moments: a slim, anchored header bar at the top; a two-column hero section with a 45/55 split; and a grounded enterprise security strip spanning the lower boundary. The left column stacks category badge, dual-tone display headline, descriptive body text, action buttons, and live activity metrics. The right column positions an asymmetrical cluster of floating software cards centered around a realistic pull request code inspection window.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary background for the page canvas and standard modular cards.
- #F8FAFC — Subtle Gray Surface: Background for code diff gutters, trust banner container, and inactive states.
- #071527 — Obsidian Deep Navy: High-contrast background for the dedicated AI agent reviewer card.
- #0B5CFF — Electric Cobalt: Primary interactive buttons, key headline emphasis, icons, and sparkline stroke.
- #0B0F17 — Carbon Text: Main headings, high-priority labels, and active code line text.
- #525F7F — Slate Text: Supporting descriptive copy, metadata items, and inactive navigation links.
- #16A34A — Diff Addition Green: Diff additions, positive metric markers, status pill text, and live indicators.
- #DC2626 — Diff Deletion Red: Diff line deletions and removal counter pills.
- #E2E8F0 — Border Subtle: Hairline outlines enclosing cards, code lines, badges, and trust banner strips.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 24px heading, 64px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, hyper-clean, and technical. The geometric clarity of Inter conveys precision and modern developer tooling standards, while JetBrains Mono provides familiar code-editor realism in diff snippets. For licensing or implementation flexibility, Inter can be substituted seamlessly with SF Pro Text or Plus Jakarta Sans without degrading typographic hierarchy.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created using a disciplined two-layer model. Clean white surfaces sit directly on the root white canvas, separated primarily by 1px borders (#E2E8F0) and reinforced by subtle, long-distance diffused drop shadows (0 12px 32px -8px rgba(15, 23, 42, 0.05)). Floating cards like the code review panel rely on overlapping bounds to suggest spatial layering without aggressive z-index stacking.
IMAGERY
The design eschews photographic imagery, stock illustrations, and 3D renders entirely in favor of authentic interface artefacts. Visual delight is derived from functional UI miniatures: diff tables, code gutters, status badges, radial velocity dials, and ecosystem brand marks (GitLab, GitHub, Docker, Python). All visual assets are literal reflections of software engineering tooling.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dual-tone display headline where the topic begins in obsidian ('Code review') and terminates in vibrant electric cobalt ('for humans and agents.'), visually tethering the core proposition directly to the adjacent interactive code review UI. Misusing this pattern by styling arbitrary words or entire paragraphs in cobalt degrades its status as the page's primary focal anchor.
MUST
- Use electric cobalt (#0B5CFF) selectively for maximum focal pull, particularly on primary CTAs and terminal headline words.
- Enforce strict 1px solid borders (#E2E8F0) around white cards to maintain structure on pure white backgrounds.
- Render code diff additions with soft green tinted backgrounds and deletions with red tinted counters.
- Keep typography tight: apply -0.035em tracking and 1.05 line height to display headlines.
AVOID
- Do not use dark, muddy drop shadows or heavy blur radiuses exceeding 32px.
- Do not color the entire headline in blue; maintain the strong two-tone contrast between obsidian and cobalt.
- Do not use sharp 0px corners; all interactive elements and panels must follow 8px to 16px rounding.
- Do not substitute monospaced code elements with standard proportional sans-serif fonts.
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. 在 DraPub 中尝试 
