Design a light-mode website section: institutional authority tempered by soft luminous spectral meshes and clean precision bento instrumentation.
LAYOUT
The header spans the top boundary with balanced three-part alignment (brand left, nav center, actions right). Below, the hero section splits 45/55: the left column houses the announcement pill, headline, subcopy, CTA button row, and compliance trust badge. The right column showcases a dense 5-card bento grid arranged as two 2-column rows topped over a full-width bottom telemetry card.
PALETTE (use these exact hex values)
- #F0F6FA — Canvas Ice Blue: ambient base canvas color fading into soft sky gradients
- #FFFFFF — Tile Pure White: opaque card surfaces housing feature summaries and metrics
- #0D4749 — Deep Pine Teal: primary button fills, logo mark base, and maximum-contrast action triggers
- #0D7C85 — Oceanic Focus Teal: headline secondary accent, primary statistics, and active indicators
- #0F1E2E — Gov Slate: dominant headline copy and core title text
- #4A5E73 — Administrative Slate: supporting descriptive body copy and card subtexts
- #E06A26 — Metric Amber: attention-drawing telemetry stat and radar focal point
- #DCE6EE — Subtle Border Mist: thin 1px outlines on pill badges and secondary buttons
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 26px heading, 52px display. Tracking -0.025em for display, +0.06em for micro caps. Plus Jakarta Sans delivers an open, institutional confidence that replaces dry bureaucratic serif tones with civic clarity. Its clean geometric roundness makes micro-statistics legible at small sizes while offering strong display authority at 52px. Use Inter or DM Sans as free web substitutes if needed.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through background luminosity rather than heavy box shadows. Crisp, solid white feature cards (#FFFFFF) sit elevated over the soft chromatic light gradient via a faint 1px border and a subtle ambient blur shadow (0 12px 32px rgba(13, 71, 73, 0.05)). This produces a clean, airborne glass feel without noisy skeuomorphism.
IMAGERY
Abstract, high-precision procedural graphics represent data flows: concentric radar lines, subtle grid dots, soft user avatar spheres, and rounded activity bar charts. Avoid human photography or literal software UI frames; visual abstractions communicate speed, AI triage, and compliance cleanly.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ethereal warm-cyan light-wave background underneath clinical, pure-white bento tiles with colored metric callouts. To maintain it, preserve the sharp contrast between the glowing backdrop and opaque cards. Misusing it means blurring the cards into murky glassmorphism or muddying the backdrop with gray tones.
MUST
- Anchor public sector credibility with deep pine teal (#0D4749) rather than generic tech indigo.
- Split bento tiles into clear text-stat zones on the left and schematic glyphs on the right.
- Use uppercase tracking (0.08em) for 11px feature taxonomy tags.
- Limit vibrant warm amber (#E06A26) strictly to isolated metric accents or key graphic focal points.
AVOID
- Do not use dark background containers; keep all cards pristine opaque white (#FFFFFF).
- Never replace clean vector data schematics with photographic screenshots in the bento grid.
- Avoid heavy drop shadows; rely on soft ambient lighting and crisp card outlines.
- Do not set body copy below 14px or in low-contrast gray.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
