# Minimal Gallery – Hand-picked website inspiration, tools, domains and more — Design System

## North Star
> A gallery of beautiful & functional websites — a dark canvas that gets out of the way of every featured screenshot.

**Theme:** dark
**Tags:** `dark` · `vibrant` · `cool` · `sans-only` · `minimal` · `achromatic` · `grid-driven` · `spacious` · `editorial`

## Description
Minimal Gallery is a dark-canvas archive of curated website screenshots organized in a uniform 3-column grid. The dark background lets each screenshot's own colors pop; thumbnails are nearly edge-to-edge with small captions below. A thin top tag bar (AI · Portfolio · Personal · Startup · One page · Agency · E-commerce · Branding · Tools · Finance · SAAS · Type foundry…) is the entire navigation. Italics for the site title in the hero, otherwise a quiet sans throughout.

## Colors
| Name | Hex | Group | Role | Tailwind |
|---|---|---|---|---|
| neutral-50 | `#ffffff` | neutral | neutral step 50 | `zinc-50` (Δ0.015) |
| neutral-200-1 | `#c6c6c6` | neutral | neutral step 200 | — |
| neutral-950 | `#000000` | neutral | neutral step 950 | — |
| neutral-900 | `#0f0f0f` | neutral | neutral step 900 | `stone-950` (Δ0.022) |
| violet-600 | `#7a00df` | violet | violet step 600 | `purple-700` (Δ0.012) |
| blue-600 | `#005a87` | blue | blue step 600 | `sky-800` (Δ0.005) |
| violet-500 | `#9b51e0` | violet | violet step 500 | — |
| red-300 | `#f78da7` | red | red step 300 | — |
| neutral-300 | `#abb8c3` | neutral | neutral step 300 | — |
| green-300 | `#00d084` | green | green step 300 | `emerald-400` (Δ0.016) |
| neutral-200-2 | `#dddddd` | neutral | neutral step 200 | `zinc-200` (Δ0.023) |
| blue-500-1 | `#007cba` | blue | blue step 500 | — |
| orange-400 | `#ff6900` | orange | orange step 400 | `orange-500` (Δ0) |
| blue-400 | `#0693e3` | blue | blue step 400 | — |
| blue-200 | `#8ed1fc` | blue | blue step 200 | `sky-300` (Δ0.02) |
| neutral-100 | `#e5e5e5` | neutral | neutral step 100 | `neutral-200` (Δ0) |
| yellow-200 | `#fcb900` | yellow | yellow step 200 | `amber-400` (Δ0.004) |
| orange-500 | `#cf2e2e` | orange | orange step 500 | `orange-700` (Δ0.019) |
| teal-200 | `#7bdcb5` | teal | teal step 200 | — |
| blue-500-2 | `#006ba1` | blue | blue step 500 | `sky-700` (Δ0.011) |

## Surfaces (Elevation)
| Level | Name | Hex | Purpose |
|---|---|---|---|
| 0 | background | `#ffffff` | Page background |
| 1 | surface-1 | `#e5e5e5` | Cards / elevated panels |
| 2 | surface-2 | `#c6c6c6` | Elevation tier 2 |
| 3 | surface-3 | `#abb8c3` | Elevation tier 3 |
| 4 | surface-floor | `#0f0f0f` | Elevation tier 4 |

**Elevation philosophy.** Completely flat. The dark canvas is the only stage. Screenshots sit edge-to-edge with their natural shadows or chrome (if any) doing all the visual lifting.

## Typography

### Inter — weight 400
*body*

### Times New Roman — weight 400
*serif*

## Type Scale
| Role | Size | Line-height | Tracking |
|---|---|---|---|
| `display` | 32px | 1.4 |  |
| `body` | 17px | 1.4 |  |
| `h3` | 17px | 1.4 |  |
| `link` | 17px | 1.4 |  |
| `ui-action` | 17px | 1 |  |
| `ui-input` | 17px | 1 |  |

## Spacing & Radius

**Radius**
- `none`: 0
- `md`: 6px

**Spacing**
- `base`: 1px

## Layout
Centered hero (logo, italic tagline, email opt-in) → horizontal tag filter row → uniform 3-column grid of screenshots → pagination strip → minimal footer.

## Imagery
Pure curation: hundreds of website screenshots, each at the same aspect ratio, each carrying its own design's color story. The gallery's job is to be a frame.

## Do
- Stay dark by default — every featured screenshot has more vibrancy that way
- Lock the layout to a uniform 3-column grid; the rhythm is the personality
- Keep the tag-bar navigation horizontal and scannable, not hidden behind a hamburger
- Use thin sans-serif caption type that yields to the screenshots above

## Don't
- Don't break the grid — varying cell sizes would compete with the screenshots themselves
- Don't add accent colors or backgrounds beyond the dark canvas
- Don't shadow or border the screenshots; the dark gutters do the separation
- Don't introduce display-scale headlines mid-page — only the hero gets a moment