A high-speed data highway for AI, engineered for maximum throughput.
02
Color
#dc244cAccent
#ffffffInk
#8f98b2Ink soft
#090e1aBG
#28324dBG soft
#161e33BG quiet
rgba(40, 50, 77, 1.0)Line
High-contrast dark mode with a singular, high-energy accent color to drive action.
03
Typography
humanist-sans · monospace
display64px · 600
h140px · 600
body16px · 400
Tight letter-spacing for display headings to create a solid, architectural feel. · Generous line-height for body text to ensure readability on dark backgrounds. · Monospace for technical labels and code snippets to establish developer context.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Vertical spacing is driven by a 4px base grid, ensuring consistent alignment of modular components.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Solid 1px borders in #28324d to subtly define modules and containers.
Full-width hero with centered text and large background imagery, transitioning to a structured grid for content sections.
07
Motion & Interaction
200msmicro
300mssmall
400msmedium
cubic-bezier(0.2, 0, 0, 1)easing
Standard ease-out for transitions and hover states. · Opacity and visibility changes for modal and menu reveals. · Color transitions for interactive button states.
Background color shifts and subtle opacity changes. · Visual feedback through inset shadows or slight scale shifts.
08
Components
buttonPrimary buttons use a bold red gradient (#dc244c) with pill-shaped rounded corners for high visibility.
cardContent cards are defined by subtle 1px borders and generous internal padding.
chipNavigation items are clean, text-based chips with hover transitions.
inputForm inputs use subtle backgrounds with 1px borders and rounded corners.
heroA cinematic hero section featuring large-scale typography over a space-themed illustrative background.
09
Voice & Don'ts
ToneTechnical, confident, and direct.
HeadlinesBold, declarative statements emphasizing performance and scale.
CTAsAction-oriented and benefit-driven (e.g., 'Start Free').
Don't use light, airy backgrounds — the screenshot shows a deep, dark (#090e1a) interface.
Don't use soft, rounded corners everywhere — the screenshot shows sharp, 8px corners on cards and containers.
Don't use a wide variety of colors — the screenshot shows a limited palette focused on dark blues and a single red accent.
Don't use low-contrast text — the screenshot shows bright white (#ffffff) text on dark backgrounds.
Don't use playful or decorative fonts — the screenshot shows a functional, humanist-sans system.
Don't clutter the layout with many side-by-side elements — the screenshot shows generous whitespace and a clear vertical flow.
Avoid: Vague marketing jargon.
Avoid: Overly complex technical explanations in headlines.
Captured from the live site · real computed styles
11
System prompt
This is a high-performance developer tool for AI vector search. The design DNA is defined by a dark, architectural aesthetic using a deep navy background (#090e1a) and a vibrant red accent (#dc244c) for critical actions. Typography uses a clean humanist-sans system with tight letter-spacing for display headlines to convey speed and scale. Critical donts: Avoid light backgrounds, avoid overly rounded corners, and avoid low-contrast text. The interface must feel engineered, reliable, and built for scale, with generous whitespace and a clear information hierarchy.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
