A clean, monospaced blueprint for enterprise AI infrastructure.
02
Color
#FF8800Accent
#000000Ink
#333333Ink soft
#FAFAFABG
#EBEBEBBG quiet
#666666Muted
rgba(0,0,0,0.1)Line
A stark, high-contrast monochrome palette anchored by a single bright orange accent.
03
Typography
geometric-sans · grotesque-sans · monospaced
display64px · 700
body16px · 400
mono14px · 400
Navigation and labels are set in monospace, uppercase. · Headlines use tight tracking and high weight. · Body text uses a standard sans-serif for maximum legibility.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px base with generous 24px gutters.
05
Surfaces
sm · 6px
md · 0px
lg · 0px
pill · 999px
Thin 1px solid black borders, emphasizing a wireframe and diagrammatic aesthetic.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Centered single-column layout for the hero, transitioning to multi-column feature sections.
07
Motion & Interaction
150msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Subtle transform on hover for interactive elements.
Subtle background or opacity shift. · Immediate response, no heavy animation.
08
Components
buttonSolid black with white monospaced text, or ghost style with a 1px black border.
cardMinimal, defined by 1px black borders and monospaced headers resembling terminal windows.
chipSmall, orange background with white uppercase monospaced text.
inputMinimal, 1px solid border with monospaced labels.
heroMassive bold geometric headline with a monospaced tagline and CTA buttons.
09
Voice & Don'ts
ToneTechnical, confident, and developer-focused.
HeadlinesUppercase, bold, and concise.
CTAsDirect, imperative monospaced commands (e.g., START FOR FREE, VIEW DOCS).
Don't use drop shadows — screenshot shows flat, 1px borders for all surfaces.
Don't use vibrant multi-color gradients — screenshot shows a strict monochrome palette with a single orange accent.
Don't use decorative serif or script fonts — screenshot shows strict geometric sans and monospaced categories.
Don't use rounded corners on primary elements — screenshot shows sharp, 0px radius borders.
Don't use lowercase for navigation — screenshot shows strict uppercase monospaced lettering for all nav items.
Don't use center-aligned body text — screenshot shows strict left or center alignment only for headlines and CTAs.
Avoid: Avoid overly marketing-heavy or fluff copy.
Avoid: Avoid complex gradients or drop shadows.
Avoid: Avoid cursive or overly decorative typefaces.
Avoid: Avoid cluttered or multi-colored backgrounds.
Avoid: Avoid large, multi-paragraph blocks of text in the hero.
Captured from the live site · real computed styles
11
System prompt
This site is a technical developer tool focused on AI sandboxes, positioned with a 'blueprint' or 'wireframe' aesthetic. It uses a strict black-and-white palette with a single high-chroma orange accent (#FF8800). Typography relies on a combination of geometric sans-serif for massive display headlines and monospaced fonts for navigation, labels, and smaller UI elements. The layout is clean and spacious, defined by thin 1px black borders that give the components a technical, terminal-like feel. Critical constraints: Never use drop shadows or gradients; always use monospaced fonts for navigation and CTAs; keep the palette strictly monochrome with orange as the only exception.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
