Design a light-mode website section: crisp healthcare reassurance and product velocity condensed into a modular floating announcement strip.
LAYOUT
The component follows an unbroken horizontal inline rhythm: [Novelty Tag] + [Product Title] | [Target Domain] | [Trust Badge] [Secondary Link] | [Primary CTA]. Vertical alignment is strictly centered along the horizontal axis. Dividers establish predictable rhythmic pauses between narrative, trust, and execution.
PALETTE (use these exact hex values)
- #FAFAFA — Canvas Background: Outer ambient background field behind the elevated banner bar
- #FFFFFF — Surface Floating: Main pill container fill for the floating utility bar
- #E2E8F0 — Hairline Border: Exterior card stroke and vertical internal separator dividers
- #0F172A — Heading Ink: High-emphasis product title text Beacon Copilot is live
- #475569 — Muted Slate Ink: Descriptive subtitle and HIPAA compliance label copy
- #1D61F2 — Electric Cobalt: Primary solid button fill, security shield icon, and text link
- #ECFDF5 — Mint Pill Surface: Subtle green background fill for the 'New' novelty badge
- #047857 — Emerald Sparkle Ink: Sparkle glyph and typography inside the 'New' novelty badge
TYPOGRAPHY
Typeface Inter (or SF Pro Text, Plus Jakarta Sans, Geist Sans), weights 400/500/600. Sizes 12px caption, 13px body-sm, 14px body, 15px subheading. Tracking -0.01em for titles, 0 for body and badges. The typography is utilitarian, modern, and clinically reassuring. Rendered in a clean neo-grotesque sans like Inter, it maintains an even texture across weights (400 for descriptions, 500 for actions, 600 for names). Licensing should favor standard open-source Google Fonts (Inter) or native system fonts (SF Pro).
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 32px between sections, 1040px container, comfortable density.
DEPTH
Depth is handled with clinical minimalism. The white bar floats over the #FAFAFA page with a diffuse box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) and a crisp 1px #E2E8F0 border. No internal shadows, layered cards, or glassy blur effects are used.
IMAGERY
Iconography is strictly vector, semantic, and mono-weight. It consists of a 4-point sparkle glyph for novelty, a solid verification shield with a checkmark for HIPAA security, and standard directional/external arrows. Photorealistic imagery or illustrative graphics are completely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The four-part segmented pill ribbon combining product release, value proposition, compliance seal, and dual action links separated by razor-thin vertical pipes. To implement correctly, wrap all items in a single white 12px rounded container with 1px slate-200 borders and ensure the vertical rules never extend past 20px in height. Misusing it involves dropping the dividers or allowing text to wrap into multiple lines.
MUST
- Use 1px vertical hairline dividers (#E2E8F0) exclusively between logically distinct content clusters.
- Pair the green badge with a subtle 4-pointed sparkle icon to clearly signal AI novelty.
- Keep the outer card radius at 12px and child button radius strictly tighter at 8px.
- Reserve the solid #1D61F2 cobalt blue fill for the single final conversion trigger.
AVOID
- Do not wrap announcement items onto multi-line paragraphs inside the floating bar.
- Do not use dark or colored backgrounds for the floating container; it must stay #FFFFFF.
- Do not remove the vertical dividers, as text segments will bleed into unreadable prose.
- Do not color the HIPAA compliance text blue; only its shield icon carries the brand tint.
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 中尝试 
