Design a dark-mode website section: fluted dark glass illuminated by an ember glow, balancing enterprise rigour with cinematic depth.
LAYOUT
Asymmetric two-column split within a 1240px container. The left column holds product categorization tag, a 2-line headline, value-proposition paragraph, dual CTA buttons, and trust indicators. The right column holds an interactive agent visualization card alongside a right-hand rail of stacked metric widgets. A client category bar sits directly below.
PALETTE (use these exact hex values)
- #08090C — Base Void: Deepest canvas background behind fluted texture and lighting gradients
- #0D0F14 — Card Surface: Fill for floating dashboard widgets and interactive schematic cards
- #C85A17 — Amber Glow Left: Warm atmospheric lighting cast across the left fluted backdrop
- #0E1A2B — Cobalt Shade Right: Cool shadow and ambient rim light on the right edge
- #F4EFEA — Bone White Primary: Primary CTA button background and prominent headline text
- #FFFFFF — Text Primary: High-contrast headings, main metric values, and navigation links
- #9E9EA6 — Text Muted: Body copy, secondary labels, and descriptive captions
- #1E222B — Subtle Border: 1px hairline strokes separating cards, pills, and interactive inputs
- #34D399 — Mint Metric: Positive metrics, growth indicators, and active pipeline statuses
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 36px heading-lg, 56px display. Tracking -0.03em at display, 0 at caption. The typographic tone is authoritative, highly technical, and crisp. Utilizing a modern grotesque sans-serif like Inter or Plus Jakarta Sans with tight tracking on headings (-0.03em) creates a commanding infrastructure software aesthetic, while clear tabular figures and small uppercase tags convey mathematical precision.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using optical lighting rather than drop shadows. Translucent dark card surfaces (#0E1015) with subtle 1px border strokes sit atop an atmospheric fluted ribbed texture, illuminated from the left by an internal amber gradient and from behind by glowing bezier connection lines.
IMAGERY
Abstract system graphics and stylized UI schematics replace photography entirely. Visual assets include an isometric glowing node cube, glowing multi-colored neon connecting splines, and minimalist line graphs representing system efficiency. Imagery must feel architectural, technical, and computational.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the cinematic amber fluted curtain background contrasted against dark glass telemetry cards and an isometric computational routing hub. Misusing this means blowing out the warm glow to overpower the layout or omitting the sharp 1px card outlines, which collapses the structure into a muddy gradient.
MUST
- Use a high-contrast warm bone white (#F4EFEA) for primary CTA buttons to punch through dark backgrounds.
- Frame complex nodes and status chips with 1px dark hairline borders and 6px-8px corner radiuses.
- Pair a warm amber lighting bleed on the left with deep cold shadows on the right.
- Keep typography strictly sans-serif, using weight differentiation rather than decorative typefaces.
AVOID
- Do not use saturated flat colors for large surfaces; rely on ambient edge glows and dark tones.
- Avoid thick button borders or drop shadows; use clean 1px strokes with frosted fills.
- Do not center-align the hero text; keep copy strictly left-aligned against the visual dashboard.
- Never use generic photography of people or office scenes in this hero space.
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 中尝试