Design a light-mode website section: clinical fintech clarity tempered with pastel-coded categorical swimlanes.
LAYOUT
The section follows a disciplined top-down symmetrical flow: centered eyebrow badge and dual-line headline lead into a balanced 3-column by 2-row card grid. Below the grid, a 48px gap gives breathing room to a centered summary line with an accent spark icon. All card interiors enforce a left-aligned vertical stack: Icon -> Title -> Body -> Tag cluster.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ground: Outer page background providing low-contrast contrast against pure white cards
- #FFFFFF — Card Surface: Background fill for all six workflow category cards
- #E2E8F0 — Card Stroke: Hairline 1px border framing individual workflow cards
- #0F172A — Ink Primary: Headlines, section title, card headers, and bottom summary text
- #64748B — Ink Secondary: Body copy, subtitles, and explanatory workflow text
- #2563EB — Cobalt Accent: Sourcing and screening icon stroke, tag text, and sparkle mark
- #EFF6FF — Cobalt Soft Tint: Background for use cases badge, sourcing icon box, and blue tags
- #DB2777 — Fuchsia Accent: Due diligence icon stroke and pill badge text
- #FDF2F8 — Fuchsia Soft Tint: Background for due diligence icon container and tags
- #0891B2 — Cyan Accent: Investment committee icon stroke and pill badge text
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 14px body-sm, 15px body, 18px subheading, 38px heading-lg. Tracking -0.02em at display, 0.05em at tags. The typography relies on Inter (or equivalent neo-grotesques like Plus Jakarta Sans) to convey institutional reliability and modern software efficiency. Bold headline weights deliver direct authority, while generous line heights (1.55) in the slate body text ensure effortless readability. Crisp letter-spacing on tags creates functional micro-labels reminiscent of financial terminal interfaces.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 6px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
This design deliberately avoids traditional shadow elevation. Depth is achieved via surface juxtaposition: pure white (#FFFFFF) cards sit atop a pale slate canvas (#F8FAFC), framed by subtle 1px border strokes (#E2E8F0). Light pastel fills inside icons and tags provide optical layering without Z-axis lift.
IMAGERY
No photographic imagery is present. Visual storytelling relies solely on clean 1.75px stroke-weight geometric line icons depicting tools (funnel, document, chart line, briefcase, speedometer, exit arrow). Solid-filled illustration styles or 3D iconography would compromise the crisp enterprise clarity.
SIGNATURE DETAIL — the thing that makes this design itself
The defining move is the strict monochromatic pairing between the top icon tile and the bottom taxonomy pills within each card, shifting through a muted pastel spectrum (blue, magenta, cyan, violet, cobalt, rose) across the grid. Misusing this by mixing colors within a single card or using saturated tag backgrounds destroys the disciplined categorization aesthetic.
MUST
- Keep icon container fills ultra-light (opacity 10-15% or designated tint hexes) so outlines pop cleanly.
- Maintain uniform 28px internal padding inside all six cards to preserve column alignment.
- Pair the color of the card's icon directly with its bottom metadata tag labels.
- Set tag typography to strict uppercase with wide letter-spacing (0.05em to 0.08em).
AVOID
- Do not introduce drop shadows; elevation is achieved entirely through border definition and white surface contrast.
- Do not use dark or saturated backgrounds for icon containers or category pills.
- Never mix multiple accent colors within a single card; one card belongs to one color family.
- Do not change card corner radii from 16px or use sharp rectangular corners.
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 中尝试