Design a light-mode website section: surgical fintech minimalism executed with emerald verification accents on crisp white and midnight card surfaces.
LAYOUT
The section begins with a centered header module containing an emerald uppercase eyebrow, a large display title, and a two-line descriptor. Below sits an equal-width 4-column procedural grid linked sequentially with subtle horizontal chevrons. The section concludes with a secondary 4-column horizontal feature strip highlighting core technical capabilities with circular mint icon containers.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Dominant background canvas across sections and outer layout surfaces.
- #F8FAFC — Surface Offwhite: Background for workflow card containers and routing node chips.
- #0A131F — Midnight Obsidian: High-contrast background for interactive code editors and order receipt widgets.
- #0F172A — Obsidian Deep: Primary typography for headlines, card titles, and high-impact numerical values.
- #64748B — Slate Muted: Secondary typography for explanatory copy, metadata labels, and endpoint details.
- #10B981 — Emerald Primary: Brand accent for step numbers, success badges, sparklines, and eyebrow navigation.
- #ECFDF5 — Emerald Tint: Faint background fill for step number circles, check badges, and footer feature icons.
- #E2E8F0 — Border Subtle: 1px hairline rules framing workflow cards, data tables, and inline divider tags.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 20px heading, 36px display. Tracking -0.03em at display, 0 at body. Clinical, institutional, and developer-tailored. The pairing of Plus Jakarta Sans (or Inter) with a technical monospace communicates high engineering rigor, millisecond precision, and financial reliability. Substitutions should stay within modern neo-grotesque sans-serif families to preserve the exact technical credibility.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated strictly through surface contrast rather than drop shadows. Flat, low-contrast 1px perimeter borders (#E2E8F0) encase the modules, while midnight dark-mode widgets (#0A131F) provide an illusion of deep elevation against the brilliant white canvas.
IMAGERY
Vector-based structural diagrams and live interface simulations replace traditional photography entirely. Graphics depict node routing curves, code interfaces, execution cards, and financial sparklines rendered in clean, vector lines. Photorealistic assets, decorative stock photos, or complex 3D renders would completely break the developer-grade aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The rhythmic alternating juxtaposition of midnight terminal widgets (#0A131F) against light tabular data cards, joined sequentially by chevrons and punctuated with mint-encircled step numbers. Misusing this pattern by turning all cards dark or removing the connecting flow turns an intuitive technical timeline into a disjointed feature grid.
MUST
- Use emerald (#10B981) exclusively for confirmation, success, active steps, and positive vector paths.
- Maintain strict 14px border radius across all major workflow card containers.
- Alternate light and dark internal preview widgets to sustain dynamic contrast across the sequence.
- Keep code snippets concise and formatted strictly in monospace at 12px or 13px.
AVOID
- Do not introduce bright saturated accent colors like red, blue, or yellow outside syntax tokens.
- Never omit the 1px #E2E8F0 structural border on light-mode feature cards.
- Do not use heavy drop shadows; achieve depth purely through flat surface color contrast.
- Avoid varying the height of the four procedural cards in desktop viewports.
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 中尝试 
