CURATED · OPEN · FREE

SiteInspire

A premium, minimalist curation gallery showcasing the web's finest design and talent.

01

Identity DNA

a curated museum exhibition of digital design

02

Color

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

A consistent 4px micro-grid is used for all internal padding and margin, creating a tight, predictable structure.

05

Surfaces

1px solid rgb(228,228,231) for structural separation and card outlines.

0px 0px 0px 0px rgba(0,0,0,0) · 0 4px 6px -1px rgba(0,0,0,0.05)

06

Layout

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

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

• button Pill-shaped (border-radius: 9999px) for primary actions like 'Sign In', often with a solid dark background. Standard text links for navigation.
• card A simple, borderless or lightly bordered container holding a large thumbnail image with metadata (title, date, author) cleanly aligned underneath.
• chip Text-based category tags in the footer section, presented as a horizontal list of simple text links.
• input Minimalist search input in the top navigation, primarily indicated by a magnifying glass icon and simple text label.
• hero A large, horizontally scrolling carousel area displaying featured project screenshots against a soft gray background.

09

Voice & Don'ts

• Tone Authoritative, curated, and objective.
• Headlines Direct, concise, and punchy statements (e.g., 'A showcase of the web's finest design + talent').
• CTAs Minimalist 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.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko