Use the "Vercel Monochrome" design system. Pure black-and-white infrastructure aesthetics. Sharp geometry, flat high-contrast buttons, an 8pt spacing grid and fast decelerating motion — the confident restraint of a developer platform.

Use a neon noir palette with a near-black background (#0A0A0F). Primary actions in electric violet (#8B5CF6), secondary in soft purple (#A78BFA), and accents in hot pink (#EC4899). Cards use dark purple-black (#16131E). Text is lavender-white (#F5F3FF) and muted purple secondary (#A78BFA). This palette conveys futurism, energy, and bold creativity.

Use a geometric tech typography system with Manrope for headings and UI labels (font-weight: 800, size: 2rem for h1) and IBM Plex Mono for body text, code, and data displays (font-weight: 400, line-height: 1.65). Headings should feel rounded and geometric. Body mono text provides technical precision at 15px base. Use Manrope at weight 500 for navigation and buttons. This pairing conveys technical expertise, precision, and developer-friendly aesthetics.

Implement a Vercel-style card hover effect. Cards should default to having no shadow, only a subtle 1px border. On hover, apply a quick 150ms transition that introduces a minimal drop shadow (0 4px 6px -1px #0000000D) and slightly darkens the border, without scaling the card geometry. Keep it snappy and highly responsive.

Use the Sharp Geometric radius system for a crisp, architectural UI. Border radii: none (0px) for containers and sections, 2px for buttons and inputs, 4px for cards and modals. Avoid rounded corners — this system uses sharp edges to convey precision and authority. Apply 2px radius to interactive elements only for subtle softening. Never use border-radius greater than 4px with this system.

Use a liquid chrome gradient with 4 stops: bright silver (#E4E4E7 at 0%), deep zinc shadow (#52525B at 40%), near-white specular (#FAFAFA at 75%), and soft silver (#D4D4D8 at 100%) at a 160-degree angle. The 4-stop structure is critical — the asymmetric dark band at 40% simulates a concave reflective surface, while the near-white at 75% creates a sharp specular highlight that makes the gradient feel three-dimensional. Apply to hero backgrounds, product showcases, and premium CTAs. For maximum impact, layer over near-black (#18181B). For subtle usage, reduce to 15% opacity on dark cards. Animate gradient direction (0-360deg over 6s) for a rotating metallic sheen. This gradient conveys premium materiality, industrial precision, and futuristic luxury.

Use the Modular 8pt Grid spacing system — strict 8px multiples for perfect visual rhythm. Scale: 8, 16, 24, 32, 40, 48, 56, 64, 80, 96. Every spacing value MUST be a multiple of 8. No exceptions. Button padding: 8px 16px. Card padding: 16px or 24px. Section spacing: 48px or 64px. Page margin: 32px. This creates mechanical precision and perfect alignment across all breakpoints.

Use the Smooth Deceleration easing system for all UI transitions. Primary curve: cubic-bezier(0, 0, 0.2, 1) at 400ms for standard transitions, 200ms for micro-interactions, and 600ms for page-level reveals. This curve starts fast and gently decelerates, creating a polished, professional feel. Apply to modals, dropdowns, tooltips, and slide-in panels. Never use linear or bounce easings with this system.

Create a primary deploy button inspired by Vercel:
1. Styling: High contrast. Background is pure white (#F5F3FF), text is pure black (#0A0A0F).
2. Typography: Arial/Inter, medium weight, tight tracking.
3. Interaction: On hover, change background to a very slight off-white (#F5F3FFE6). On active (click), scale down to 0.95 and reduce opacity slightly. No aggressive shadows.

Use a minimal, tech-focused card component with a left-aligned icon box (40x40px). The icon box uses a sharp 6px radius and a subtle border (1px solid #F5F3FF14). To the right, stack a bold, small title (#F5F3FF) and a muted description (#A78BFA) with very tight line-height (gap-0.5). Add a group-hover effect on the entire row: the background slightly darkens (#F5F3FF05), and the child icon box instantly (150ms) gains a 0 4px 6px -1px #0000000D, 0 2px 4px -2px #0000000D drop shadow and a darker border. This card conveys minimal, cool, and futuristic technical precision.

Build a Vercel-style command bar navigation.

Design philosophy — developer-first navigation:
1. Background: Pure black (#0A0A0F) with a 1px bottom border (#2E2546). No blur, no transparency — solid and authoritative.
2. Layout: Fixed top, full-width. Logo left, navigation center, actions right (including a ⌘K command palette trigger).
3. Typography: 13px, font-weight 400, color #A78BFA default. Hover → #F5F3FF with 150ms transition. Active link gets a subtle bottom dot indicator.
4. Command palette trigger: Inline search-like button with rounded-md, bg #2E2546, text #A78BFA, 12px. Shows "⌘K" or "Search..." placeholder. This is the centerpiece of the nav.
5. Logo: Simple wordmark in white, 15px, font-weight 600. A small triangle (▲) icon before the text.
6. Height: 48px. Vertically centered content with flex.
7. Separator: Between logo section and nav links, add a subtle slash "/" divider in #2E2546.

The navigation should feel like a CLI wearing a GUI skin — powerful underneath, restrained on the surface.

Build a Vercel-style split-grid hero section.

Design philosophy — developer confidence through restraint:
1. Background: Pure black (#0A0A0F) — not dark gray, not near-black. Black means finality, infrastructure, the void from which deployments emerge. Optional dot-grid pattern (1px dots, 32px spacing, #16131E) to subtly reference the underlying grid system without being decorative.
2. Layout: Two-column grid (50/50) on desktop, stacked on mobile. Left column holds text content, right holds an interactive preview window. The preview IS the product — showing a real deploy interface, code snippet, or terminal output is worth more than any illustration.
3. Headline: 48-64px (clamp(3rem, 4.5vw, 4rem)), font-weight 700, tracking -0.04em, color #F5F3FF (not pure white — pure white on black creates too much contrast and feels harsh). One line if possible. Developer tools earn trust through brevity.
4. Subtitle: 16-18px, font-weight 400, color #A78BFA, line-height 1.6. Maximum two lines. Write like documentation, not marketing — developers can smell inauthenticity from the first sentence.
5. CTA group: Primary — white (#F5F3FF) bg, black text, rounded-md, px-6 py-3. The inverted contrast (white on black page) makes it impossible to miss. Secondary — #A78BFA text link with chevron. No border, no bg — it earns attention through placement, not decoration.
6. Right panel: bg #16131E, rounded-xl, border #2E2546, generous padding. Fill it with a real product screenshot or interactive demo — never placeholder content. The panel should have a subtle inner glow (box-shadow: inset 0 1px 0 #F5F3FF0A).
7. Animation: Left content slides from translateX(-20px) with opacity, right panel from translateX(20px), 600ms ease-out, 150ms stagger. The symmetrical entrance reinforces the split-grid concept.

The hero should feel like opening a terminal — purposeful, fast, and ready.

Implement a subtle dot-matrix background using a 20x20px repeating radial gradient to draw 1px white dots at 15% opacity on black. Mask the edges with a radial-gradient to black at 70% so the dots disappear at the boundaries.

Build a Vercel-style deployment status pulse micro-interaction.

Design philosophy — ambient awareness:
1. Status dot: 8px circle. Three states: Building (amber #f5a623), Ready (teal #50e3c2), Error (red #ee5a5a).
2. Pulse animation (building): The dot scales between 1x and 1.4x with opacity fading from 1 to 0.4, over 1.5 seconds with ease-in-out. A second ring (16px) pulses outward simultaneously with opacity 0.3→0, creating a radar-like effect.
3. Success transition: Pulse stops immediately. Dot snaps to solid teal with a brief scale(1.2)→scale(1) bounce (200ms, cubic-bezier(0.34, 1.56, 0.64, 1)). A checkmark fades in inside the dot.
4. Error transition: Three rapid flashes (opacity 1→0.3, 100ms each), then solid red with a subtle shake animation (translateX ±2px, 300ms).
5. Label: 13px, font-weight 500, color #F5F3FF. Shows deployment URL or status text. Positioned to the right of the dot.
6. Secondary info: 11px, color #A78BFA. Shows time elapsed or commit hash.
7. Container: Inline-flex, items-center, gap-2. The dot should be vertically centered with the label.

The animation should make deployment feel like a heartbeat — alive and monitored.