Design a light-mode website section: surgical infrastructure clarity framed by deep terminal shadows and cool mint phosphor accents.
LAYOUT
The section is structured in a two-tier composition within a 1240px container. The top tier features an asymmetric two-column header (left-aligned bold claim, right-aligned summary narrative). The lower tier splits horizontally: the left side holds a large dark spotlight card stacked atop a shallow horizontal security bar, while the right side organizes four symmetric capability cards in a rigid 2x2 grid.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Background: Primary light canvas background providing breathing room for the entire grid layout
- #090D10 — Obsidian Hero Surface: Deep nocturnal foundation for the primary spotlight card and sandbox environment visual
- #FFFFFF — Card Elevated: Background for secondary feature cards with subtle borders and shadows
- #E5E7EB — Subtle Border: 1px hairline border defining perimeter of light cards and dividing strip columns
- #111827 — Text Primary: High-contrast headings, main titles, and bold metric labels on light surfaces
- #667085 — Text Secondary: Body copy, feature descriptions, and lead paragraph on right header
- #F9FAFB — Text Inverted: Headings, bullet items, and label text inside the obsidian hero container
- #1B7D5A — Emerald Phosphor: Uppercase section eyebrow, metric values (10x, 99.9%), and iconography outlines
- #EBF8F2 — Mint Surface Tint: Soft rounded background container for feature category icons
- #3EE4A2 — Cyber Glow Highlight: Luminescent edge highlights on the isometric stack graphic and terminal status dot
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Display, Helvetica Neue), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 26px heading, 44px display. Tracking -0.03em at display, 0.08em at uppercase badges. The typographic tone is restrained, technical, and executive. Geist Sans or Inter provides an unembellished, tool-like texture where large titles feel engineered through tight letter-spacing (-0.03em) and lower line heights. Uppercase 11px eyebrows with positive tracking inject a measured, operational command-line atmosphere.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 72px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled predominantly through surface tone inversion rather than physical drop shadows. Light cards sit flat with a hairline 1px border (#E5E7EB) and a soft ambient shadow (0 4px 16px rgba(0,0,0,0.03)). The dark spotlight card breaks plane via high visual mass and an internal cyan-mint backglow radiating from the central isometric graphic.
IMAGERY
Visual assets are strictly architectural and abstract: layered isometric technical platforms rendered in matte glass and dark charcoal with glowing teal laser rims. Realistic photography, playful hand-drawn doodles, or generic 3D human characters are entirely forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric dark spotlight card placed within an otherwise pristine white layout, accented by an internal mint-glow isometric glass stack. It signals deep developer infrastructure without forcing the entire site into a fatigue-inducing dark mode.
MUST
- Anchor the layout with a high-contrast dark card against the predominantly white page.
- Use emerald green (#1B7D5A) strictly for telemetry numbers, status indicators, and category eyebrows.
- Keep card corner radii consistent at exactly 14px across both light and dark components.
- Provide ample breathing space between the headline lockup and the feature card grid.
AVOID
- Do not invert the entire page to dark mode; the tension relies on a single dark hero card.
- Never use saturated primary blue or purple; brand accents are strictly emerald and mint.
- Do not allow card corner radii to exceed 16px or become fully pill-shaped.
- Avoid heavy drop shadows; depth must come from crisp borders and subtle luminescence.
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 中尝试 
