Design a light-mode website section: compact enterprise announcement banner bridging product changelog with quantified operational trust metrics.
LAYOUT
The component executes a rigid single-row flexbox layout with centered vertical alignment. The left anchor holds the 40px brand tile followed by the 'NEW' badge, release title, divider, descriptive sentence, and CTA link. A vertical separator marks the transition to the right cluster, where three symmetrical metric items are spaced evenly with 20px gaps.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Light neutral background canvas providing contrast for the floating bar
- #FFFFFF — Surface White: Primary background for the floating banner card and metric containers
- #E2E8F0 — Border Subtle: Hairline perimeter stroke and internal section separator rule
- #1D4ED8 — Cobalt Brand: Primary brand tile background and interactive link text color
- #0F172A — Text Primary: Headline text, release titles, and bold metric numerical values
- #64748B — Text Secondary: Feature descriptions, metric labels, and inline divider glyphs
- #DBEAFE — Badge Tint Blue: Background fill for the compact NEW announcement pill badge
- #ECFDF5 — Metric Emerald Tint: Pastel container fill for distributor community proof icon
- #EFF6FF — Metric Sky Tint: Pastel container fill for financial volume stat icon
- #FEF3C7 — Metric Amber Tint: Pastel container fill for system uptime reliability icon
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto), weights 400/500/600/700. Sizes 10px caption, 11px body-sm, 13px body, 14px subheading, 15px heading. Tracking -0.01em at body, 0.02em at uppercase labels. The typographical tone is neutral, technical, and executive-ready, leaning heavily on Inter or system sans-serifs for high legibility at micro sizes (10-14px). Tight letter-spacing on headlines conveys modern digital engineering, while uppercase letter-spacing on the 'NEW' pill introduces crisp rhythm. Open-source substitutes like Inter, Geist Sans, or Roboto seamlessly preserve its matter-of-fact clarity.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 9999px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved through a whisper-thin multi-stop shadow (0 4px 6px -1px rgba(15, 23, 42, 0.02), 0 10px 15px -3px rgba(15, 23, 42, 0.04)) resting against a #F8FAFC canvas. The perimeter is sharpened by a 1px solid #E2E8F0 border, preventing the pure white container from bleeding into the background. Internal components remain flat without internal drops or bevels.
IMAGERY
No photographic imagery is present. Graphic language relies strictly on a geometric vector brand glyph in the blue anchor tile alongside minimal monoline outline icons (users, trend line, shield) rendered in category-specific accent tones.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the horizontal hybrid fusion of a product release banner with a three-pillar KPI trust bar separated by a delicate vertical border. It combines active product momentum ('v1.3 is live') with instant credibility metrics ($1.2B+, 99.9% uptime) in a single 64px floating ribbon. Misusing it by cramming multi-line copy or removing the metric icons destroys its balanced, glanceable scan path.
MUST
- Keep total banner height between 60px and 72px to maintain a compact ticker profile.
- Use pastel fills (#ECFDF5, #EFF6FF, #FEF3C7) under 16px line icons to indicate metric categories.
- Separate the narrative changelog section from numerical metrics with a subtle 1px vertical divider.
- Ensure statistical numbers are rendered in bold 600 or 700 weight for immediate scanning.
AVOID
- Do not allow the banner to stretch full width without outer horizontal padding.
- Never use dark background fills inside the metric icon tiles; maintain light pastel tints.
- Do not omit the vertical separator between changelog copy and trust statistics.
- Avoid heavy dark drop shadows; keep elevation subtle using low opacity slate rgba values.
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 中尝试 
