Design a light-mode website section: clean bento modularity anchored by an ink-navy telemetry card and electric blue functional nodes.
LAYOUT
The layout is structured as a two-tier responsive bento grid beneath a centered header cluster. The top row splits into an asymmetrical span: a 50% wide automated workflow card, a 25% personalization card, and a 25% builder diagram card. The bottom tier balances this with a 40% dark performance card, a 35% donut chart insights card, and two 25% stacked micro-cards for saved time and team access.
PALETTE (use these exact hex values)
- #ffffff — Canvas Background: Global backdrop providing maximum contrast for nested light-gray and white modules
- #ffffff — Card Surface: Base fill for light bento tiles framed with hairline borders
- #0b1222 — Telemetry Slate: High-contrast dark card background dedicated to performance metrics and charts
- #155eef — Electric Cobalt: Brand hero color used for primary icon tiles, kicker labels, active nodes, and CTA buttons
- #e4e7ec — Border Hairline: 1px stroke defining bento containers, micro-cards, and nested diagram elements
- #101828 — Text Heading: Page headline, card titles, and primary numerical readouts
- #475467 — Text Muted: Subtitle paragraphs, card explanatory body copy, and secondary metrics
- #12b76a — Node Emerald: Workflow trigger nodes, success badges, and positive data visualization arcs
- #7f56d9 — Node Violet: Personalization indicators and secondary logic node icons
- #f79009 — Node Amber: Action nodes and donut chart distribution segments
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, General Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 44px display. Tracking -0.03em at display, -0.01em at body, 0.08em at uppercase kicker. The typographic tone is authoritative, clean, and engineered, projecting enterprise-grade stability and modern developer speed. It uses Plus Jakarta Sans or Inter with tightly tracked display headers to feel compact and unified. Tabular numbers ensure numerical telemetry metrics stay perfectly aligned across comparison columns.
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 achieved through crisp 1px neutral borders (#e4e7ec) and minimal ambient elevation (0 1px 3px rgba(16, 24, 40, 0.04)). The design avoids dramatic multi-layered drop shadows in favor of surgical boundary lines and high-contrast color blocks. Stacking and nesting of white pills over slightly cooler #f8fafc panels create physical tactile separation without blur.
IMAGERY
Avoids photographic stock assets completely in favor of crisp product UI miniature mocks, vector node diagrams, and minimal isolated 3D hardware renders (e.g., matte black studio headphones). Graphic assets must have transparent or neutral backgrounds that blend into white card surfaces seamlessly.
MUST
- Use 16px border radii consistently across all primary Bento grid parent containers.
- Reserve the dark slate surface (#0b1222) for exactly one key focal card to avoid muddying page hierarchy.
- Pair colored iconography with corresponding semantic pill tags for unified visual taxonomy.
- Keep card inner padding strictly between 20px and 24px for comfortable breathing room.
AVOID
- Do not introduce drop shadows heavier than 4px blur; rely on 1px strokes for definition.
- Do not use saturated gradient backgrounds behind entire card surfaces.
- Do not mix serif or decorative typefaces with this precise technical sans-serif system.
- Do not allow internal mock diagrams to touch the perimeter padding of their parent container.
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 中尝试 
