---
name: SiteInspire
description: "Worth including as a definitive example of minimalist editorial curation, demonstrating how extreme restraint and a strict typographic system can elevate a gallery UI."
version: alpha

colors:
  background: "#f4f4f5"
  primary: "#18181b"
  secondary: "#71717a"
  neutral: "#a1a1aa"
  bg-soft: "#fafafa"
  bg-quiet: "#ffffff"
  line: "rgba(228,228,231,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 30px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.4px"
  body:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.4px"

rounded:
  sm: 2px
  md: 4px
  lg: 9999px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*a curated museum exhibition of digital design*

## Colors

Monochromatic and restrained, relying on a soft off-white canvas to let the showcased colorful design work breathe without competing.

- **Background (`#f4f4f5`)** — uses `bg` token
- **Primary text (`#18181b`)** — uses `ink` token
- **Secondary text (`#71717a`)** — uses `ink-soft` token
- **Muted (`#a1a1aa`)** — uses `muted` token
- **Borders (`rgba(228,228,231,1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- 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.

## 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.

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

## Elevation & Depth

- 0px 0px 0px 0px rgba(0,0,0,0)
- 0 4px 6px -1px rgba(0,0,0,0.05)
- Borders: 1px solid rgb(228,228,231) for structural separation and card outlines.

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 9999px
- `pill`: 9999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```