A precision instrument for building complex communication systems, where clarity and control are paramount.
02
Color
#E8673CAccent
#000000Ink
#222222Ink soft
#F9F9FBBG
#60646CMuted
rgba(200, 206, 213, 1)Line
A restrained palette uses deep neutrals for readability and a single, vibrant warm accent to signal primary actions.
03
Typography
geometric-sans · humanist-sans · monospace
display56px · 500
headline40px · 500
subtitle24px · 400
body16px · 400
label14px · 500
Use geometric-sans for headlines to convey precision and modernity. · Use humanist-sans for body text for optimal readability. · Use monospace for code snippets and technical data. · Maintain strict typographic hierarchy using size and weight, not color.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px base grid with generous whitespace to separate sections and focus attention.
A structured, column-based layout with generous padding and a clear content hierarchy.
07
Motion & Interaction
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth transitions on interactive elements for feedback. · Subtle fade-in animations for content appearance. · Transformations for hover states.
Color or background changes on interactive elements, with a standard cubic-bezier transition. · Immediate visual feedback, often through subtle transform or color shifts.
08
Components
buttonSolid primary (coral) and outlined secondary buttons with 4px radius. Clean, functional, and high-contrast.
cardWhite cards with subtle 1px borders and rounded corners, used to group related information.
chipA rounded pill-shaped badge used for status indicators like 'New'.
inputClean text inputs with subtle borders, focusing on function over decoration.
heroA centered, spacious hero section with a large headline, clear subtext, and two prominent call-to-action buttons.
09
Voice & Don'ts
ToneAuthoritative, clear, and technically proficient. It speaks directly to developers.
HeadlinesDirect, declarative, and benefit-oriented. Uses active verbs.
CTAsAction-oriented and specific, using clear commands like 'Get started' or 'Read our docs'.
Don't use bright, competing accent colors — the screenshot shows one primary coral accent against a neutral palette.
Don't use decorative serif fonts — the typography is strictly geometric and humanist sans-serif.
Don't use heavy drop shadows — shadows are minimal and functional, used for subtle elevation.
Don't use rounded corners larger than 12px on cards — the design uses tight, precise radii.
Don't clutter the layout — the screenshot shows ample whitespace and a clear visual hierarchy.
Don't use a dark background for the primary interface — the design is predominantly light, with high contrast text.
Captured from the live site · real computed styles
11
System prompt
Knock is a developer-focused SaaS platform for customer engagement, positioned as a clean, precise, and powerful tool. The design DNA is characterized by a restrained light neutral palette (#F9F9FB background, #000000 ink) with a single, high-chroma coral accent (#E8673C) for primary actions. Typography mixes geometric-sans for headlines and humanist-sans for body, all rendered with excellent readability. Key critical donts: never use decorative serifs, avoid competing accent colors, and don't clutter the generous, whitespace-rich layout. The design prioritizes clarity, hierarchy, and functional elegance for technical audiences.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
