Design a light-mode website section: crisp white canvas cta transitioning into an authoritative obsidian regulatory control footer.
LAYOUT
The layout is divided into two distinct stacked islands with equal horizontal margins. The upper island is a dual-column CTA banner (headline left, node diagram right) spaced 64px apart. Below sits an obsidian footer arranged into a left branding block, four navigation columns, and a right-aligned newsletter subscription box, finalized with a thin divider and horizontal utility bar.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Background for the upper CTA card and floating diagram pill capsules
- #121316 — Obsidian Ground: Background container for the multi-column site footer
- #F8F9FA — Outer Void: Page-level background behind rounded card modules
- #D92D20 — Payna Crimson: Primary CTA button fill, logo mark facet, and eyebrow accent dot
- #101828 — Ink Primary: Headlines and primary bold text within the light CTA module
- #475467 — Ink Subdued: Body copy on light backgrounds
- #98A2B3 — Dark Text Subdued: Footer navigation links, copyright, and platform descriptions
- #12B76A — Operational Green: Operational status indicators and checkmark badges
- #1F242F — Subtle Border Dark: Borders around input fields, status chips, and dividers in footer
- #EAECF0 — Subtle Border Light: Outlines on node cards, container cards, and diagram trajectory rings
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 18px subheading, 44px display. Tracking -0.03em at display, 0.12em at uppercase micro. Clean, engineered neo-grotesque (closely matching Inter) with tightened letter-spacing in the display size (-0.03em) that projects institutional authority. Micro-copy uses tracked uppercase styling to evoke audit reports and regulatory checklists. If Inter is unavailable, Plus Jakarta Sans or SF Pro Display offer an identical technological and compliant cadence.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 32px between sections, 1280px container, comfortable density.
DEPTH
Elevation is deliberately restrained. The CTA and footer cards sit directly on a #F8F9FA canvas without drop shadows, relying on perimeter 1px borders (#EAECF0) and contrasting fills. Floating node capsules utilize a feather-light ambient shadow (0px 4px 16px rgba(0,0,0,0.04)) to subtly lift off the curved trace lines.
IMAGERY
Avoid photographic assets entirely; visual interest is generated through clean, geometric UI nodes connected by faint hairline svg paths. The Payna logo is a faceted red origami-like polygon, reinforcing technical precision. Icons are monoline vector symbols (calendar, shield, lock, refresh) placed within tinted circular backdrops.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-island architectural rhythm: a spacious 24px white card containing a looping compliance network diagram positioned immediately above an equally curved obsidian footer (#121316) with an embedded operational status pill.
MUST
- Keep CTA card background strictly #FFFFFF with 24px border radius.
- Use uppercase tracking (0.12em) on all category headers and eyebrow tags.
- Preserve high-contrast dark foundation (#121316) for bottom footer enclosure.
- Pair primary crimson buttons (#D92D20) exclusively with white text and clean SVG icons.
AVOID
- Do not merge CTA and footer into a single continuous background.
- Never use rounded pill buttons for primary actions; keep buttons at 8-10px radius.
- Avoid bright saturated accents other than Payna Crimson and Operational Green.
- Do not remove the hairline 1px border between light modules and dark footer.
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 中尝试 
