Design a light-mode website section: crisp developer tools tempered with mathematical restraint, precise line work, and an unexpected editorial serif flourish.
LAYOUT
Asymmetric two-column split hero occupying a 1280px container. Left column contains value proposition messaging, badge, dual CTAs, and trust checks stacked vertically. Right column contains a 2-column, 2-row bento grid grouping technical capability previews. The section anchors with a full-width four-column value bar along the bottom edge.
PALETTE (use these exact hex values)
- #fbfbfd — Base Surface: Global page canvas background providing soft, low-contrast neutral warmth
- #ffffff — Card Surface: Background for bento cards, interactive mockups, and feature docks
- #f8f9fc — Subtle Surface: Internal code editor surface and nested metric chip backgrounds
- #e9ebf0 — Border Neutral: 1px perimeter stroke across cards, buttons, connectors, and feature dividers
- #4344e4 — Primary Indigo: Primary buttons, active node hubs, and the italicised hero serif display word
- #111827 — Ink Primary: Headlines, section labels, code syntax keywords, and active navigation links
- #6b7280 — Ink Secondary: Body copy, inactive nav links, code gutter numbers, and diagram subtexts
- #10b981 — Positive Green: Positive backtest percentage returns and healthy financial metrics
- #ef4444 — Alert Red: Drawdown metrics and live strategy status indicators
- #fef3f2 — Badge Tint: Pale salmon tint background for the hero pre-header pill badge
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 54px display. Tracking -0.03em display, -0.01em body. Objective, highly engineered sans-serif (Inter) delivers structural utility and developer familiarity. This technical chill is intentionally broken by a fluid, high-contrast serif italic ('for developers') rendered in vivid cobalt, giving the brand a refined, thoughtful editorial authority reminiscent of academic journals and high-end fintech.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 72px between sections, 1280px container, comfortable density.
DEPTH
Depth is communicated almost purely through crisp 1px borders (#e9ebf0) and subtle background value shifts rather than diffuse drop shadows. White elevated panels (#ffffff) sit on top of a slightly cool tinted canvas (#fbfbfd). Inset wells (like the code viewport) use a darker tint (#f8f9fc) to establish recessed visual hierarchy.
IMAGERY
Avoid photographic assets or generic 3D illustrations. Visuals are strictly structural, functional UI artifacts: code snippets, flowchart node diagrams, and financial equity charts that mirror real software states. Graphic iconography uses fine 1.5px linear vector glyphs inside rounded keyline boxes.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden typographical juxtaposition of a brutalist, clean sans-serif headline resolved with an elegant editorial italic serif in vibrant cobalt blue (#4344e4). This single gesture immediately differentiates an otherwise standard developer-tool bento grid from generic SaaS boilerplate.
MUST
- Reserve the italic serif font strictly for one short emotional or contextual headline clause.
- Use 1px border (#e9ebf0) on white cards rather than heavy drop shadows for separation.
- Keep code snippet syntax highlighting muted with max 3 discrete token colours.
- Always pad bento cards with a consistent 20px to 24px internal spacing.
AVOID
- Do not apply heavy dark drop shadows; keep elevation nearly flat using border definition.
- Never render entire paragraphs or multiple headline lines in the italic serif typeface.
- Do not use saturated primary green or red for decorative elements; restrict to quantitative metrics.
- Avoid mixing card radius scales; maintain 16px on exterior containers and 8-10px on inner elements.
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 中尝试 
