Design a light-mode website section: crisp daylight documentation paired with deep terminal telemetry and radiant cyan ambient lighting.
LAYOUT
Two-column grid split roughly 45/55 on desktop. The left column stacks the category badge, a bold 42px heading, descriptive subtitle, and five self-contained accordion cards. The right column holds an expansive dark container split internally into feature icons and a live telemetry card, tied together by a centered bottom floating dock.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: dominant page background providing high readability for left-hand accordion text
- #090d16 — Obsidian Slate: deep navy-black fill for the high-contrast telemetry card on the right
- #1d70f5 — Cobalt Engine: primary call-to-action buttons, active icon badges, and navigational focus states
- #172338 — Void Border: subtle inner containment strokes and dividers within the dark feature container
- #e8ecf2 — Daylight Border: perimeter outlines for accordion items and the bottom floating resolution dock
- #0a0f1d — Ink Primary: maximum contrast headlines and closed accordion title labels
- #5e6d82 — Muted Slate: descriptive body text, helper copy, and secondary terminal outputs
- #22c55e — Telemetry Emerald: live status indicators, CLI prompt dots, and positive financial trajectory percentages
TYPOGRAPHY
Typeface Inter (or system-ui, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 42px display. Tracking -0.025em on display, 0 on body. Inter provides a clean, neutral, hyper-modern fintech voice that emphasizes institutional credibility. Coupled with JetBrains Mono, it communicates developer precision and automated rigor, perfectly suited for an enterprise financial infrastructure product.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created primarily through contrast layering rather than blur shadows. A subtle, large-radius diffuse shadow (0 16px 40px rgba(9, 13, 22, 0.05)) is reserved solely for the floating support bar, while the dark telemetry panel uses an ambient cyan glow behind its upper edge to simulate backlighting.
IMAGERY
Vector line graphics simulate hardware and network circuit traces in faint gray (#f0f3f6) in the upper-right canvas. UI screenshots are eschewed in favor of precise, live code-and-metric codeblocks rendered as crisp UI wireframes. Photography is strictly absent.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-canvas polarity: crisp daylight accordion rows alongside a glowing, obsidian-backed command-line financial report.
MUST
- Retain the sharp contrast between the clean white left column and the dense obsidian right bento.
- Use 1px border strokes (#e8ecf2 for light surfaces, #172338 for dark surfaces) instead of heavy dropped shadows.
- Pair monospace font strictly with data reads, metrics, and command-line code execution.
- Keep accordion icons inside 36px square subtle rounded housings to maintain vertical visual alignment.
AVOID
- Do not apply dark mode backgrounds to the entire page; the left half must remain stark white.
- Do not use saturated backgrounds for the accordion list items.
- Do not replace the terminal monospace typeface with a proportional font for the CLI panel.
- Avoid heavy dark drop shadows on light accordion cards; use border boundaries instead.
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. Try in DraPub 
