Design a dark-mode website section: command-line precision meets auto-shop operations on deep ink-black canvases with punchy orange-red keystrokes.
LAYOUT
The top section features an asymmetric two-column split: marketing headline, subtext, and twin CTA buttons with feature highlights on the left; an interactive command-line terminal window on the right. Below this lies a full-width telemetry ticker separating hero from footer. The lower section houses a six-column footer directory featuring brand bio, categorized link lists, and a discrete newsletter capture box.
PALETTE (use these exact hex values)
- #030708 — Canvas Black: Deepest primary background canvas across hero, CTA, and footer sections.
- #070d12 — Terminal Surface: Subtle card and terminal background providing soft contrast from pure black.
- #131c24 — Surface Border: 1px hairline borders delineating cards, inputs, tabs, and footer separators.
- #f24e32 — Engine Vermilion: Brand logo, terminal shell prompt '>_', eyebrow text, and primary CTA fill.
- #22c55e — Terminal Status Green: Operational status dots, terminal checks, and active agent telemetry indicators.
- #4ade80 — Code Mint: Command prompt syntax and successful terminal response key-values.
- #f1f5f9 — Primary Text: Headlines, active tabs, primary button text, and strong body headings.
- #7d8b99 — Muted Text: Secondary descriptors, navigation links, terminal log outputs, and metadata.
- #475569 — Faint Text: Copyright text, placeholder input values, and secondary legal links.
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px subheading, 14px body, 16px body-lg, 20px heading, 32px heading-lg, 44px display. Tracking -0.02em at display, 0.01em at body. The voice is hyper-competent, engineering-first, and utilitarian. Inter (or Geist Sans) handles high-impact, low-line-height headlines with tight tracking, while JetBrains Mono injects strict developer authenticity across syntax, system status, and breadcrumbs. For open-source replacements, Geist Sans and Geist Mono provide an identical cold, mechanical feel.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1200px container, tight density.
DEPTH
Depth is strictly non-skeuomorphic and flat. Layering is conveyed solely through precise 1px borders (#131c24) against subtly differing dark background levels (#030708 canvas vs #070d12 surfaces). Zero box-shadows or surface blurs are used, preserving terminal utility.
IMAGERY
No photographic imagery or lifestyle photos are present. The visual language relies purely on structured code text, syntax highlighting, minimal line icons (checkmarks, terminal chevron, lock glyph), and ASCII-inspired tabular formatting. Organic photos or 3D illustrations would feel completely disconnected.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated terminal shell prompt '>_' rendered in vermilion on both the eyebrow telemetry and embedded directly within the primary call-to-action button, paired alongside an actual multi-step CLI window. Misusing this signature involves styling non-actionable elements with the prompt symbol or using generic rounded pill buttons that erode the developer-tool aesthetic.
MUST
- Use uppercase monospace typography with generous letter-spacing (0.08em) for telemetry eyebrows and column headers.
- Restrict bright vermilion (#f24e32) strictly to primary interactive moments and brand logo anchors.
- Keep terminal cards bordered with precise 1px strokes in dark muted teal-gray (#131c24).
- Pair live green indicators (#22c55e) strictly with active system status and operational checks.
AVOID
- Never apply rounded pill shapes (999px) to primary buttons; enforce precise 8px radii.
- Do not use fuzzy drop shadows or colorful outer glows around cards.
- Never substitute standard body text where code snippets, JSON, or status metrics are shown.
- Avoid bright white borders; borders must stay below #1c2730 to prevent visual noise.
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 中尝试