Design a dark-mode website section: precision enterprise intelligence housed in deep navy glass with radiant azure command accents.
LAYOUT
Vertically stacked two-tiered architecture. The top tier features a high-impact conversion card divided into a 50/50 split (copy left, interactive terminal right). The lower tier contains a comprehensive 6-column footer grid flanked by branding/newsletter inputs on the left and stacked operational widgets on the far right.
PALETTE (use these exact hex values)
- #050913 — Abyss Void: Global application background and deepest structural ground beneath the footer.
- #0a1120 — Slate Obsidian: Background fill for the primary CTA banner and modular status utility cards.
- #070c16 — Console Depth: Inner interactive terminal console background providing high-contrast depth within the CTA.
- #182438 — Navy Border: Subtle container borders, terminal outlines, and input dividing lines.
- #256ef5 — Electric Azure: Solid primary CTA button, active text highlight, and brand logo glyph.
- #10b981 — Terminal Emerald: System status indicator dots, terminal prompt syntax, and confidence badges.
- #f8fafc — Pure Frost: Primary headings, brand wordmark, and high-priority terminal output text.
- #8597af — Muted Cobalt: Secondary descriptive paragraphs, footer navigation links, and terminal body logs.
- #475569 — Dull Steel: Copyright text, placeholder strings, and inactive terminal window controls.
TYPOGRAPHY
Typeface Inter (or Geist Sans,SF Pro Display,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 36px heading. Tracking -0.025em for headings, 0 for body. Precise, engineered, and modern. Inter delivers transparent clarity for administrative text and confident headlines, while JetBrains Mono injects strict engineering credibility into console snippets.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 72px between sections, 1240px container, comfortable density.
DEPTH
Depth is strictly surface-level and structural rather than shadow-based. Subtle ambient blue gradients (#0f2a52) bloom softly behind key cards to lift them from the base canvas, while 1px navy-slate borders (#182438) crisply define physical boundaries.
IMAGERY
Avoid photo assets; graphical identity relies entirely on functional, simulated software artifacts like terminal shells, code logs, badge metadata, and crisp SVG micro-icons. Any visual asset must feel like direct product architecture.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated terminal simulation juxtaposed against consumer-grade SaaS CTA copy inside a single master card, tied together by an electric blue headline highlight ('today.').
MUST
- Wrap high-level product actions within modular cards framed by 1px #182438 borders.
- Pair a solid primary button with an arrow alongside a ghost text button with a chevron.
- Use JetBrains Mono exclusively inside console/terminal simulator components.
- Feature operational trust signals with active micro-indicators directly under primary actions.
AVOID
- Do not use generic gray borders; all borders must contain dark navy-slate saturation (#182438).
- Never use pure black (#000000); preserve the midnight blue undertones across all surfaces.
- Avoid loud solid badges; status indicators should use muted dark pill badges with glowing dots.
- Do not drop secondary action buttons into solid fills; keep them transparent with inline chevrons.
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 中尝试