Design a dark-mode website section: dual warm-and-cool fluted illumination framing deep obsidian glass analytics cards for high-contrast enterprise precision.
LAYOUT
The hero layout follows a symmetric top-to-bottom hierarchy anchored by a global top navbar. The central stack consists of an announcement badge, a two-line display title, two lines of centered description, two CTA buttons, and a social proof logo bar. Below the text stack, five analytics cards are arranged side-by-side in a docked carousel-like row cutting through the lower fold.
PALETTE (use these exact hex values)
- #04060E — Obsidian Deep Base: Deepest canvas background behind all hero text, navigation, and lighting overlays.
- #0B0F19 — Card Surface Surface: Background fill for lower preview cards and metric widgets.
- #1E293B — Card Border Subtle: Micro-borders defining the perimeter of floating dashboard cards.
- #3B82F6 — Electric Blue Primary: Primary CTA fill, navigation action button, and positive indicator accents.
- #D95B16 — Left Curtain Amber: Volumetric fluted stage lighting spilling from the left viewport edge.
- #0284C7 — Right Curtain Cyan: Volumetric fluted stage lighting spilling from the right viewport edge.
- linear-gradient(90deg, #A855F7 0%, #38BDF8 100%) — Gradient Profitable: Text clip gradient applied exclusively to hero emphasize word 'profitable'.
- #FFFFFF — Text White: Headlines, card values, primary CTA label, and active navigational items.
- #94A3B8 — Text Muted Slate: Subheadings, supporting body descriptions, inactive navigation, and secondary metric labels.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 36px heading, 60px display. Tracking -0.03em for display, 0.05em for overlines. Plus Jakarta Sans delivers an engineered, contemporary SaaS voice that feels both mathematically structured and human-accessible. Its geometric roundness avoids sterile technicality while crisp kerning maintains high density in analytical tables and metric headers. Substitute with Inter for a slightly more neutral tone, or DM Sans for a friendlier roundness.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created without drop shadows, using luminosity staging. Bright, textured fluted lighting sits in the backmost plane, an obsidian canvas (#04060E) overlays the mid-plane, and glossy interactive cards float in the foreground delimited by sharp 1px hairline borders (#1E293B) and subtle interior glow gradients.
IMAGERY
There are no photographic portraits or lifestyle images. Visual storytelling is achieved via programmatic, glowing UI charts, stylized bar graphs, and area splines rendered inside dark glass containers. Any realistic photography or un-stylized stock graphics would break the futuristic SaaS financial tone.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-sided fluted curtain lighting: deep vertical amber-orange pleats on the far left mirrored by cool cyan-blue pleats on the far right. This creates a stage-like spotlight effect on the central dark content without overwhelming text readability. Misusing it by bleeding colors across the center destroys the optical focal point.
MUST
- Keep the central 50% of the canvas purely dark to preserve headline legibility.
- Confine the warm amber fluted lighting strictly to the left edge of the viewport.
- Confine the cool cyan fluted lighting strictly to the right edge of the viewport.
- Use a subtle 1px border (#1E293B) on every preview card to separate from the dark canvas.
AVOID
- Never blend warm amber light across the center into the blue lighting area.
- Do not use pure black (#000000) for preview card surfaces; use #0B0F19.
- Avoid using saturated backgrounds for buttons other than the dedicated primary CTA.
- Never add drop shadows with positive offsets; rely entirely on 1px stroke borders.
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 中尝试 
