Design a dark-mode website section: dense developer telemetry compressed into a glowing obsidian feature rail.
LAYOUT
The component is arranged as a strict single-tier horizontal flex row aligned center. From left to right: the glowing NEW badge leads directly into the announcement headline and subhead block, followed by an inset vertical hairline divider. The center-right zone hosts three evenly spaced feature columns (icon + stacked labels). The right flank terminates with a standalone stroked call-to-action button.
PALETTE (use these exact hex values)
- #0b0f17 — Obsidian Surface: main background container fill for the entire announcement bar
- #1e293b — Border Hairline: subtle perimeter stroke and vertical column divider rule
- #2563eb — Vibrant Blue: primary badge fill and interactive CTA button border outline
- radial-gradient(circle, rgba(37,99,235,0.45) 0%, rgba(11,15,23,0) 70%) — Electric Glow: luminous back-glow highlighting the release badge
- #60a5fa — Telemetry Sky: version number highlight text and realtime tracing icon stroke
- #2dd4bf — Alert Emerald: shield icon stroke for smart alerts status indication
- #fbbf24 — Metric Amber: bar chart icon stroke representing scale capabilities
- #ffffff — Text Primary: feature headers, announcement title, and cta label text
- #94a3b8 — Text Secondary: supporting taglines, subheadings, and micro-metric descriptive text
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px subheading, 18px heading. Tracking -0.01em for headings, 0 for body. The typographic tone is ultra-modern, technical, and authoritative, matching high-performance infrastructure tools. Crisp geometric letterforms (like Inter or Geist) ensure extreme legibility at dense sizes such as 11px and 12px. The intentional pairing of stark white titles over low-contrast slate subtext keeps the informational hierarchy instantly parseable.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1080px container, tight density.
DEPTH
Depth is minimal and flat within the bar structure itself, relying on dark-on-light separation from the canvas. The sole dimensional flourish is a soft, radial electric-blue diffusion positioned immediately beneath the NEW badge to suggest luminescent hardware or active status. The perimeter uses a 1px border stroke #1e293b to cleanly delineate borders without heavy drop shadows.
IMAGERY
Iconography is strictly vector and line-based with consistent 1.5px stroke weights and 20px bounding boxes. Each icon utilizes clean geometric forms: concentric circles for tracing, a shield with checkmark for alerts, and staggered bar columns for scale. Complex raster graphics, photography, or heavily shaded illustrations would break this disciplined telemetry aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the glowing blue 'NEW' badge paired with the tripartite colorful feature telemetry items divided by a subtle hairline. This transforms what could be a standard notification banner into an actionable, rich developer dashboard snippet. Misusing it means adding verbose paragraphs or flattening the icons into monochrome gray.
MUST
- Use distinct semantic accent hues for each feature icon to speed up visual scanning.
- Keep the bar height compact between 64px and 72px with centered vertical alignment.
- Highlight specific version numbers using an accent hue lighter than the primary headline.
- Constrain line lengths to single-line lockups within the telemetry clusters.
AVOID
- Do not allow multi-line text wrapping within the feature items inside this bar.
- Never use filled background containers for feature icons; keep them delicate strokes.
- Do not remove the vertical hairline divider separating announcement and feature details.
- Avoid bright white backgrounds for the bar; it relies on obsidian dark mode contrast.
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 中尝试 
