# SiteInspire · Design system migration spec

> Source: https://www.siteinspire.com  ·  Curated by OpenDesign  ·  en

> Worth including as a definitive example of minimalist editorial curation, demonstrating how extreme restraint and a strict typographic system can elevate a gallery UI.

## 1. Identity DNA

SiteInspire operates like a curated museum exhibition of digital design, where the system's architecture exists solely to frame the artifacts on display. Its identity is one of disciplined omission, a framework that gains authority by what it chooses to leave out.

**One-liner:** A premium, minimalist curation gallery showcasing the web's finest design and talent.
**Keywords:** design showcase · inspiration · curation · gallery · directory
**Analogy:** a curated museum exhibition of digital design

## 2. Color

The color system is a strict monochrome, a palette of restraint that serves as a neutral gallery wall. Deep ink text and soft off-white backgrounds ensure the showcased work remains the sole focal point of visual interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f4f4f5` | main background |
| `--bg-soft` | `#fafafa` | card background |
| `--bg-quiet` | `#ffffff` | quiet area |
| `--ink` | `#18181b` | body text |
| `--ink-soft` | `#71717a` | secondary text |
| `--muted` | `#a1a1aa` | placeholder |
| `--line` | `rgba(228,228,231,1)` | divider |

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

The governing principle is that the platform's palette must never compete with the creative output it presents.

## 3. Typography

Typography is handled by a single, clean grotesque sans-serif, set with tight tracking to achieve a compact, editorial density. The system reserves weight 500 exclusively for hierarchy, maintaining a uniform and objective typographic voice throughout.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Main hero statement |
| heading | 30px | 1.2 | 500 | -0.4px | Subheadings and category titles |
| body | 14px | 1.4 | 400 | -0.4px | Primary reading and navigation text |

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

## 4. Spacing

A consistent 4px micro-grid governs all spacing, creating a tight, rhythmic structure that underpins the interface's visual predictability.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px micro-grid is used for all internal padding and margin, creating a tight, predictable structure.

## 5. Surfaces

Surfaces are defined by minimal intervention: soft, almost imperceptible shadows and thin, light borders provide just enough separation for structural clarity. The design avoids depth effects that would distract from the flat, image-driven grid.

- **Radius:** sm 2px · md 4px · lg 9999px · pill 9999px
- **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.

## 6. Layout

The layout is a predictable scaffold: a fixed navigation bar caps a full-width hero area, which gives way to a flexible, multi-column grid for gallery thumbnails. This structure prioritizes visual density and allows the collection of work to form the primary visual pattern.

- **Container max:** 1400px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is purely functional, a brief 150ms transition applied to opacity and color for interactive feedback. The philosophy is one of immediate but unobtrusive response, ensuring the interface feels alive without becoming performative.

- **Durations:** micro 150ms · small 150ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Quick 150ms transitions on opacity and color for hovers.
  - Smoother 0.15s transitions for interactive state changes like border-color and background-color.

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

## 8. Voice & Don'ts

The editorial voice is authoritative, curated, and objective, mirroring the tone of a professional journal. Headlines are direct and punchy, while calls to action are minimalist and action-oriented, often just a single word.

- **Tone:** Authoritative, curated, and objective.
- **Headline style:** Direct, concise, and punchy statements (e.g., 'A showcase of the web's finest design + talent').
- **CTA style:** 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.

### Don'ts
- ❌ 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.

The system deliberately avoids decorative fonts, bright accent colors, and visual clutter, maintaining its role as a silent, respectful frame for others' work.

## System Prompt (paste into AI tool)

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