Monochromatic and restrained, relying on a soft off-white canvas to let the showcased colorful design work breathe without competing.
03
Typography
grotesque-sans
display56px · 500
heading30px · 500
body14px · 400
Use tight tracking (-0.4px) across all text to maintain a compact, high-end editorial feel. · Keep body text size relatively small (14px) to prioritize the visual density of the gallery thumbnails. · Reserve weight 500 exclusively for headlines, subheadings, and active navigation items.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
A consistent 4px micro-grid is used for all internal padding and margin, creating a tight, predictable structure.
05
Surfaces
sm · 2px
md · 4px
lg · 9999px
pill · 9999px
1px solid rgb(228,228,231) for structural separation and card outlines.
A fixed top navigation bar sits above a full-width hero area. Below, a flexible grid layout (typically 3 columns) displays project thumbnails, with a collapsible footer for category navigation.
07
Motion & Interaction
150msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Quick 150ms transitions on opacity and color for hovers. · Smoother 0.15s transitions for interactive state changes like border-color and background-color.
Subtle color shifts on text links and UI elements, maintaining the overall calm aesthetic. · Standard pointer cursor for interactive elements, with immediate visual feedback via transitions.
08
Components
buttonPill-shaped (border-radius: 9999px) for primary actions like 'Sign In', often with a solid dark background. Standard text links for navigation.
cardA simple, borderless or lightly bordered container holding a large thumbnail image with metadata (title, date, author) cleanly aligned underneath.
chipText-based category tags in the footer section, presented as a horizontal list of simple text links.
inputMinimalist search input in the top navigation, primarily indicated by a magnifying glass icon and simple text label.
heroA large, horizontally scrolling carousel area displaying featured project screenshots against a soft gray background.
09
Voice & Don'ts
ToneAuthoritative, curated, and objective.
HeadlinesDirect, concise, and punchy statements (e.g., 'A showcase of the web's finest design + talent').
CTAsMinimalist and action-oriented, often just a single word or short phrase (e.g., 'Sign In', 'Subscribe').
Don't use vibrant, high-contrast accent colors — screenshot shows a strictly monochromatic palette with only one subtle red logo dot.
Don't use decorative, serif, or script fonts — screenshot exclusively uses a clean, uniform grotesque sans-serif.
Don't implement heavy drop shadows or complex border-radiuses — screenshot shows mostly flat surfaces with minimal radius (2px, 4px, or pill-shaped).
Don't crowd the interface with excessive text or complex UI components — screenshot relies heavily on a clean, image-first grid layout.
Don't use large, bulky button styles — screenshot shows minimal, pill-shaped buttons with plenty of white space.
Don't deviate from the strict 4px base grid — screenshot shows very consistent, tight spacing patterns throughout all elements.
Avoid: Avoid overly casual or enthusiastic language.
Avoid: Avoid visual clutter or complex decorative elements.
Avoid: Avoid bright, competing accent colors that distract from the showcased work.
Captured from the live site · real computed styles
11
System prompt
SiteInspire is a premium, minimalist curation gallery showcasing the web's finest design and talent. It uses a strict monochromatic palette: a soft off-white background (#f4f4f5), deep ink text (#18181b), and muted secondary text (#71717a). The typography relies exclusively on a clean, tightly tracked grotesque sans-serif. Critical donts include: never use bright, competing accent colors; never use decorative or serif fonts; never implement heavy drop shadows; and always maintain a strict 4px base spacing grid. The design prioritizes visual density through an image-first grid, treating the showcased content as the primary visual element.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.