An architectural blueprint for the future of software development.
02
Color
#2200FFAccent
#000000Ink
#191919Ink soft
#F7F6F5BG
#8E8E8EMuted
rgba(0,0,0,0.1)Line
High-contrast monochrome with a single, bold electric blue accent for primary interactions.
03
Typography
transitional-serif · geometric-sans · monospace
display56px · 400
heading20px · 400
body16px · 400
caption12px · 400
Use transitional-serif for large, high-impact headlines. · Use geometric-sans for body copy and UI elements. · Maintain a consistent font-weight of 400 across all elements.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous whitespace with 64px horizontal padding for main containers.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Subtle 1px borders using rgba(0,0,0,0.1)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A clean 12-column grid with a persistent left-side navigation bar on desktop.
07
Motion & Interaction
100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth opacity transitions for element appearances. · Subtle hover states for interactive elements.
Subtle color shifts or opacity changes. · Immediate feedback with minimal delay.
08
Components
buttonBlack filled with white text for primary actions, outlined or text-based for secondary.
cardClean layout for articles, typically featuring a title and a date.
chipSimple tags or metadata labels in small monospaced fonts.
inputMinimal, borderless text inputs for simple forms.
heroA large, centered text block with a wide margin and a secondary background block.
09
Voice & Don'ts
ToneAuthoritative yet collaborative, focusing on the future of engineering.
HeadlinesBold, direct statements about the product's core capabilities.
CTAsClear, action-oriented phrases like 'Explore roles'.
Don't use multiple high-chroma colors — screenshot shows a predominantly black and white palette with one blue accent.
Don't use rounded corners on primary elements — screenshot shows sharp, square edges on buttons and cards.
Don't use heavy drop shadows — screenshot shows a flat, clean design with minimal depth.
Don't use a complex background — screenshot shows a solid, light neutral background (#F7F6F5).
Don't use bold font weights — screenshot shows a consistent 400 font-weight across all text.
Don't use sans-serif for headlines — screenshot shows a transitional-serif used for the main hero text.
Captured from the live site · real computed styles
11
System prompt
This design system is for a premium AI developer tool focused on autonomous software engineering. It uses a transitional-serif for display headlines, a geometric-sans for body text, and a monospaced font for code elements. The color palette is strictly monochromatic (ink #000000 on bg #F7F6F5) with a single high-chroma electric blue accent (#2200FF) used sparingly for interactive states. Key critical donts: Never use multiple accent colors, avoid all rounded corners on primary components, and never use bold font weights; the design relies on size and font-family for hierarchy. Maintain generous whitespace and a clean, editorial feel that emphasizes the product's technical sophistication and authority.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
