Design a dark-mode website section: a precision release console floating like an instrument panel over a neutral field.
LAYOUT
The bar operates on a single horizontal axis with asymmetric flex distribution. From left to right: status badge pill anchored at 24px left margin, followed by the headline-icon lockup, a vertical divider, a 3-column micro-feature cluster, and a terminal CTA link pushed toward the right edge with 28px padding.
PALETTE (use these exact hex values)
- #f1f3f6 — Canvas Ground: ambient presentation canvas behind the floating banner
- #090b10 — Obsidian Base: main solid surface of the banner bar
- linear-gradient(115deg, transparent 40%, rgba(29, 78, 216, 0.35) 75%, transparent 95%) — Cobalt Streak: subtle optical flare across the right half of the banner
- #1e2430 — Hairline Border: outer perimeter border and vertical column divider strokes
- #3b82f6 — Signal Blue: live status indicator dot in the announcement tag
- #f59e0b — Solar Star: eight-point announcement sparkle icon fill
- #ffffff — Primary Text: headline and high-contrast link label
- #94a3b8 — Muted Slate: feature titles, descriptions, and metadata
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Roboto), weights 400/500/600. Sizes 9px caption, 11px body-sm, 12px body, 15px heading. Tracking -0.01em at body, 0.08em at uppercase tags. The typography is clinical, quiet, and hyper-engineered. Using a modern neutral sans-serif like Inter or Geist conveys software-grade stability, where uppercase micro-labels handle orientation while high-contrast sentence case carries narrative momentum. Licensing can be fulfilled via open-source Google Fonts (Inter).
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 6px, buttons 9999px. Spacing on a 4px unit, 16px gaps, 72px between sections, 1200px container, tight density.
DEPTH
Depth is created purely through flat contrast and ambient displacement. The obsidian bar casts a soft, low-frequency drop shadow (0 16px 36px rgba(0,0,0,0.18)) onto the light canvas, while internal layering is handled exclusively via 1px hairlines and surface luminescence rather than stacked card shadows.
IMAGERY
No photographic imagery is present. Visual expression relies solely on crisp, geometric outline iconography (sparkle, layers, bar-chart, shield) rendered at 14-16px, paired with a subtle astronomical blue streak light effect across the right hemisphere.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the cinematic diagonal blue light beam cutting through the right third of an otherwise strictly monochrome dark HUD bar. It converts what would be a dry corporate notification widget into an evocative, high-end engineering telemetry console. It must be implemented as a soft overlaid gradient mask so text remains crisp and legible.
MUST
- Keep the height strictly bounded between 68px and 80px for standard desktop viewports.
- Use 1px vertical borders (#1e2430) to establish clean separation between the headline and feature columns.
- Restrict bright color accents strictly to the 6px status dot and 16px sparkle star.
- Stack secondary feature descriptions into two compact lines to maintain consistent baseline alignment.
AVOID
- Do not use saturated backgrounds; keep the primary banner surface locked to near-black #090b10.
- Do not allow text sizes to exceed 16px; this is a dense telemetry bar, not a hero banner.
- Do not apply heavy multi-colored gradients across the entire bar surface.
- Do not remove the 1px vertical structural divider; without it the layout loses its instrument character.
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 中尝试 
