{
  "id": "siteinspire",
  "title": "SiteInspire",
  "url": "https://www.siteinspire.com",
  "tags": [
    "design",
    "gallery"
  ],
  "colors": {
    "principle": "Monochromatic and restrained, relying on a soft off-white canvas to let the showcased colorful design work breathe without competing.",
    "bg": "#f4f4f5",
    "bgSoft": "#fafafa",
    "bgQuiet": "#ffffff",
    "ink": "#18181b",
    "inkSoft": "#71717a",
    "muted": "#a1a1aa",
    "mutedSoft": null,
    "accent": null,
    "line": "rgba(228,228,231,1)"
  },
  "typography": {
    "rules": [
      "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."
    ],
    "scaleUses": [
      "Main hero statement",
      "Subheadings and category titles",
      "Primary reading and navigation text"
    ],
    "display": "grotesque-sans",
    "body": "grotesque-sans",
    "mono": null,
    "scale": [
      {
        "token": "display",
        "size": 56,
        "lh": 1.0,
        "weight": 500,
        "ls": "-1px"
      },
      {
        "token": "heading",
        "size": 30,
        "lh": 1.2,
        "weight": 500,
        "ls": "-0.4px"
      },
      {
        "token": "body",
        "size": 14,
        "lh": 1.4,
        "weight": 400,
        "ls": "-0.4px"
      }
    ]
  },
  "spacing": {
    "rhythm": "A consistent 4px micro-grid is used for all internal padding and margin, creating a tight, predictable structure.",
    "base": 4,
    "scale": [
      4,
      8,
      16,
      24,
      32,
      48,
      64,
      96
    ]
  },
  "surfaces": {
    "shadows": [
      "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.",
    "radius": {
      "sm": 2,
      "md": 4,
      "lg": 9999,
      "pill": 9999
    }
  },
  "layout": {
    "skeleton": "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.",
    "container": 1400,
    "paragraph": 680,
    "columns": 12,
    "gutter": 24,
    "breakpoints": [
      768,
      1024
    ]
  },
  "motion": {
    "patterns": [
      "Quick 150ms transitions on opacity and color for hovers.",
      "Smoother 0.15s transitions for interactive state changes like border-color and background-color."
    ],
    "durations": {
      "micro": 150,
      "small": 150,
      "medium": 300
    },
    "easing": "cubic-bezier(0.4, 0, 0.2, 1)"
  },
  "identity": {
    "keywords": [
      "design showcase",
      "inspiration",
      "curation",
      "gallery",
      "directory"
    ],
    "analogy": "a curated museum exhibition of digital design",
    "oneLiner": "A premium, minimalist curation gallery showcasing the web's finest design and talent."
  },
  "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."
  },
  "interaction": {
    "hover": "Subtle color shifts on text links and UI elements, maintaining the overall calm aesthetic.",
    "click": "Standard pointer cursor for interactive elements, with immediate visual feedback via transitions.",
    "transition": "All interactive elements utilize a standard 0.15s cubic-bezier transition for a responsive but unhurried feel.",
    "keyboard": "Standard browser focus outlines for accessibility, though visually unstyled in the base design."
  },
  "voice": {
    "tone": "Authoritative, curated, and objective.",
    "headlineStyle": "Direct, concise, and punchy statements (e.g., 'A showcase of the web's finest design + talent').",
    "ctaStyle": "Minimalist and action-oriented, often just a single word or short phrase (e.g., 'Sign In', 'Subscribe').",
    "avoid": [
      "Avoid overly casual or enthusiastic language.",
      "Avoid visual clutter or complex decorative elements.",
      "Avoid bright, competing accent colors that distract from the showcased work."
    ]
  },
  "donts": [
    "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."
  ],
  "systemPrompt": "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."
}